当前位置：首页 > news >正文

【Web前端技术】第二节—HTML标签（上）

news 来源：原创 2025/8/22 4:08:12

hello！好久不见——

做出一个属于自己的网站！

云边有个稻草人-个人主页

Web前端技术—本篇文章所属专栏

一、HTML 语法规范

1.1 基本语法概述

1.2 标签关系

二、HTML 基本结构标签

2.1 第一个 HTML 网页

2.2 基本结构标签总结

三、网页开发工具

3.1 VSCode的使用

3.2 VSCode 工具生成骨架标签新增代码

3.2.1 文档类型声明标签

3.2.2 lang 语言种类

3.2.3 字符集

3.2.4 总结

四、常用标签

4.1 标签语义

4.2 标题标签

4.3 段落和换行标签

4.4 练练手

4.5 文本格式化标签

4.6 <div>和<span>标签

4.7 图像标签和路径

4.7.1 图像标签

4.7.2 路径

4.8 超链接标签（重点）

4.8.1 链接的语法格式

4.8.2 链接分类：

五、HTML 中的注释和特殊字符

5.1 注释

5.2 特殊字符

正文开始——

一、HTML 语法规范

1.1 基本语法概述

1. HTML 标签是由尖括号包围的关键词，例如 <html> 。

2. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为 双标签。 标签对中的第一个标签是开始标签，第二个标签是结束标签。

3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为 单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系

<head> <title> </title> 
</head>

并列关系

<head> </head>
<body> </body>

二、HTML 基本结构标签

2.1 第一个 HTML 网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为 HTML 文档。

<html> <head> <title>我的第一个页面</title></head><body>好好学习，天天向上</body>
</html>

<html></html>，HTML标签—页面中最大的标签，我们称之为根标签。
<head></head>，文档的头部—注意在head标签中我们必须要设置的标签是title。
<title></title>，文档的标题—让页面拥有一个属于自己的网页标题。
<body></body>，文档的主体—元素包含文档的所有内容，页面的内容基本都是放到body里面的。

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

2.2 基本结构标签总结

三、网页开发工具

我是用的是VSCode，后续就用这个软件来进行学习了

3.1 VSCode的使用

双击打开软件。
新建文件（Ctrl + N ）。
保存（Ctrl + S ）, 注意移动要保存为 .html 文件
Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
生成页面骨架结构。输入! 按下 Tab 键。（见下图）
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

3.2 VSCode 工具生成骨架标签新增代码

<!DOCTYPE> 标签
lang 语言
charset 字符集

3.2.1 文档类型声明标签

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.。

注意:

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。

3.2.2 lang 语言种类

用来定义当前文档显示的语言。

1. en定义语言为英语

2. zh-CN定义语言为中文

简单来说,定义为 en 就是英文网页, 定义为 zh-CN 就是中文网页，其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。

3.2.3 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

 <meta charset="UTF-8">

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

3.2.4 总结

以上三个代码 vscode 自动生成,基本不需要我们重写.
<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
<html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
<meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.

四、常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2 标题标签 <h1> - <h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。

<h1> 一级标题 </h1>

单词 head 的缩写，意为头部、标题。标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变的加粗，字号也会依次变大。
一个标题独占一行。

4.3 段落和换行标签

4.3.1 <p>标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中， <p> 标签用于定义段落，它可以将整个网页分为若干个段落。

<p> 一个段落标签 </p>

单词 paragraph [ ˈ pær ə græf] 的缩写，意为段落。标签语义：可以把 HTML 文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

4.3.2 <br />标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br /> 。

<br />

单词 break 的缩写，意为打断、换行。标签语义：强制换行。

特点：

<br /> 是个单标签。
<br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4 练练手

素材

水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0数据统计：水花兄弟合砍61分库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。兄弟对决升级：小库里给哥哥造成压力库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。作者: 云边有个稻草人2025-4-16

效果展示

代码

注意，最后的页面效果并不会因为代码里面的文字有换行就会有换行效果，页面里面所有的效果都要通过标签来实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻</title>
</head><body><h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1><h3>数据统计：水花兄弟合砍61分</h3><p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p><p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p><h3>兄弟对决升级：小库里给哥哥造成压力</h3><p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p><p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p><p>作者: 云边有个稻草人<br />2025-4-16</p></body></html>

4.5 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义: 突出重要性, 比普通文字更重要。

重点记住加粗和倾斜。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本格式化标签</title>
</head>
<body><p><strong>加粗</strong></p><p><em>倾斜</em></p><p><del>删除线</del></p><p><ins>下划线</ins></p>
</body>
</html>

4.6 <div> 和<span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是头部 </div> 
<span> 今日价格 </span>

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：

<div> 标签用来布局，但是现在一行只能放一个<div>。大盒子
<span> 标签用来布局，一行上可以多个 <span>。小盒子

4.7 图像标签和路径

4.7.1 图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL" />

单词 image 的缩写，意为图像。 src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

【src】

简单介绍之后我们来实践一下如何在网页里面插入图片

（1） 首先将图片和我们创建的网页文件放在一起，方便插入到网页文件里面

【alt】

【title】

效果不错哦

<h4>title 提示文本 鼠标放到图片上，显示的文字</h4>
<img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" />

【width】+【height】+【border】

    <h4>width 给图片设置宽度</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" width="500" /><h4>height 给图片设置高度</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" width="500" height="100" />

border一般是在CSS进行修改的，我们后面会详细讲解，我们在这先记住border的简单用法

图像标签属性注意点：

① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

重点掌握：

图像标签中那个属性是必须要写的？
图像标签中 alt 和 title 的区别是什么？

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像标签和路径</title>
</head><body><h4>图像标签的使用</h4><img src="chaochao.jpg" /><h4>alt 替换文本 当图片显示不出来的时候用文字替换</h4><img src="chaochao1.jpg" alt="邓超 分手大师" /><h4>title 提示文本 鼠标放到图片上，显示的文字</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" /><h4>width 给图片设置宽度</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" width="500" /><h4>height 给图片设置高度</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" height="100" /><h4>border 给图片设置边框粗细</h4><img src="chaochao.jpg" alt="邓超 分手大师" title="亚比囧囧囧" width="500" border="15" /></body></html>

4.7.2 路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹： 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。

根目录： 打开目录文件夹的第一层就是根目录

(2) VSCode打开目录文件夹:

文件---- 打开文件夹 . 选择目录文件夹. 后期非常方便管理文件.

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为： 1. 相对路径 2. 绝对路径

【相对路径】（重点）

相对路径： 以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于 HTML 页面的位置

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

【绝对路径】

是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

【自己电脑】

但是绝对路径是针对自己的电脑找到里面的文件而言的，电脑不同这个绝对路径就有差异，平时很少使用，了解一下就OK

【网络路径】

还有一种情况，是在网络中的一种绝对路径。我随便打开一个网站在里面找到一个图片，并复制图片的链接

相对路径是重点掌握的。。。

4.8 超链接标签（重点）

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

4.8.1 链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词 anchor [ ˈ æŋk ə (r)] 的缩写，意为：锚。两个属性的作用如下：

4.8.2 链接分类：

外部链接: 例如 < a href="http:// www.baidu.com ">百度</a >。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。

在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">第2集介绍</h3>

【演示1-外部链接+target】

【演示2-内部链接】

【演示3-空链接】

【演示4-下载链接】

    <h4>6.下载链接:地址链接的是 文件.exe 或者 .zip等压缩包形式#</h4><a href="chaochao.zip" target="_blank">下载文件</a>

【演示5-网页元素链接】

【前面案例所用代码合集】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head><body><h4>1.外部链接</h4><a href="https://www.csdn.net/">CSDN博客网站</a><h4>2.外部链接，在替换掉原先的页面</h4><a href="https://www.csdn.net/" target="_self">CSDN博客网站</a><h4>3.外部链接，在空白页面重新打开该链接网页</h4><a href="https://www.csdn.net/" target="_blank">CSDN博客网站</a><h4>4.内部链接</h4><a href="体育新闻.html" target="_blank">体育新闻</a><!-- 当某些地址还没有考虑好就可以用这种 --><h4>5.空链接：#</h4><a href="#" target="_blank">首页</a><h4>6.下载链接:地址链接的是 文件.exe 或者 .zip等压缩包形式#</h4><a href="chaochao.zip" target="_blank">下载文件</a><h4>7.网页元素链接</h4><a href="http://qq.com" target="_blank"><img src="chaochao.jpg" /></a></body></html>

【演示6-锚点链接】

字数多占得不止一个页面的时候效果会更明显，字数太少移动不到位看不到效果，所以建议多来点文字。同时我们可以活学活用，当想要回到顶部的时候我们可以写“回到顶部”，在这里添加一个锚点链接回到顶部，就不用再滑动鼠标慢慢回到顶部了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>锚点链接</title>
</head><body><h2 id="mulu">目录</h2><a href="#jingli">1 早年经历</a><br /><a href="#yanyi">2 演艺经历</a><br /><a href="#live">3 个人生活</a><br /><h2 id="jingli">1 早年经历</h2>刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18]。刘德华从黄大仙天主教小学毕业后升读可立中学[19]。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20]。<h2 id="yanyi">2 演艺经历</h2>1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在 刘德华早期照片 刘德华早期照片(2张)喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]。 1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28] ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29] 。1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30] ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32]。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32] 。 刘德华 刘德华 电影时代1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班 刘德华电视剧剧照 刘德华电视剧剧照(9张) 的学员[33]。1982年，在剧情片《投奔怒海》中饰演美军翻译官祖名，并凭借该片获得第2届香港电影金像奖最佳新演员提名[33]。 1983年，与张曼玉搭档主演剧情片《家在香港》，在片中饰演急功近利的青年人亚伦[34] ；同年，主演动作片《毁灭号地车》，在片中与一个越南少女演绎了一段爱情故事[35]。1984年，在爱情片《停不了的爱》中饰演富家公子Eric[36]1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22]；该剧获得美国电视节电视剧特别奖[23] 。1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在 刘德华早期照片 刘德华早期照片(2张)喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]。 1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28] ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29] 。1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30] ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32]。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32] 。 刘德华 刘德华 电影时代1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班 刘德华电视剧剧照 刘德华电视剧剧照(9张) 的学员[33]。1982年，在剧情片《投奔怒海》中饰演美军翻译官祖名，并凭借该片获得第2届香港电影金像奖最佳新演员提名[33]。 1983年，与张曼玉搭档主演剧情片《家在香港》，在片中饰演急功近利的青年人亚伦[34] ；同年，主演动作片《毁灭号地车》，在片中与一个越南少女演绎了一段爱情故事[35]。1984年，在爱情片《停不了的爱》中饰演富家公子Eric[36]1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在 刘德华早期照片 刘德华早期照片(2张)喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]。 1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28] ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29] 。1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30] ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32]。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32] 。 刘德华 刘德华 电影时代1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班 刘德华电视剧剧照 刘德华电视剧剧照(9张) 的学员[33]。1982年，在剧情片《投奔怒海》中饰演美军翻译官祖名，并凭借该片获得第2届香港电影金像奖最佳新演员提名[33]。 1983年，与张曼玉搭档主演剧情片《家在香港》，在片中饰演急功近利的青年人亚伦[34] ；同年，主演动作片《毁灭号地车》，在片中与一个越南少女演绎了一段爱情故事[35]。1984年，在爱情片《停不了的爱》中饰演富家公子Eric[36]1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在 刘德华早期照片 刘德华早期照片(2张)喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]。 1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28] ；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29] 。1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30] ；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32]。1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32] 。 刘德华 刘德华 电影时代1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班 刘德华电视剧剧照 刘德华电视剧剧照(9张) 的学员[33]。1982年，在剧情片《投奔怒海》中饰演美军翻译官祖名，并凭借该片获得第2届香港电影金像奖最佳新演员提名[33]。 1983年，与张曼玉搭档主演剧情片《家在香港》，在片中饰演急功近利的青年人亚伦[34] ；同年，主演动作片《毁灭号地车》，在片中与一个越南少女演绎了一段爱情故事[35]。1984年，在爱情片《停不了的爱》中饰演富家公子Eric[36]<br /><a href="#mulu">返回顶部目录</a>。<h2 id="live">3 个人生活</h2>刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）[158] 。 感情1986年，刘德华随香港明星足球队赴吉隆坡时，结识了朱丽倩。2008年6月23日，刘德华与朱丽倩在美国拉斯维加斯注册结婚[159] 。2012年5月9日，刘德华的妻子朱丽倩生下一个女儿。[160-161]2016年3月，刘德华的妻子朱丽倩怀上第2胎。[162]</body></html>

五、HTML 中的注释和特殊字符

5.1 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束。

<!-- 注释语句 --> 快捷键: ctrl + /

一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的。添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

5.2 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

演示一下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注释和特殊字符</title>
</head><body><!-- 在文件里面手动添加多个空格最终都只会显示出一个空格，所以我们可以使用特殊字符来添加多个空格 -->云边有个稻草人      好好学习<br />云边有个稻草人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好好学习<br /><!-- 左右括号的显示 --><p>是一个段落标签，这样不会显示出左右括号，必须使用特殊字符才行<br />&lt;p&gt;</body></html>

完——

根据今天学习的知识可以找案例好好巩固一下，目前来看还是有点意思的。。。

记得是夏天，高中（大概是高一吧）晚自习下课骑车回家的路上，告别白天的燥热，终于摆脱无聊的学校，吹着凉凉的晚风，用电话手表听的，很喜欢的一首歌......(那是一天中难得的真正属于自己的时间，回听这首歌，有种陌生但是确实体会过的心境)

飞鸟和蝉_任然

至此结束——

我是云边有个稻草人

期待与你的下一次相遇

【Web前端技术】第二节—HTML标签（上）

hello！好久不见—— 做出一个属于自己的网站！ 云边有个稻草人-个人主页 Web前端技术—本篇文章所属专栏目录一、HTML 语法规范 1.1 基本语法概述 1.2 标签关系二、HTML 基本结构标签 2.1 第一个 HTML 网页 2.2 基本结构标签总结三、网页开发…...

编程日记 2025/8/22 4:08:12

Android开发协调布局滑动悬停

Android开发协调布局滑动悬停直接给个xml，防止下次忘了怎么写。 <?xml version"1.0" encoding"utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android"http://schemas.android.com/apk/res/android…...

编程日记 2025/8/22 4:04:47

R语言简介与下载安装

1.R语言简介与下载安装 R语言其诞生于新西兰奥克兰大学，由Ross Ihaka 和Robert Gentleman开发，属于商业软件S语言的替代品；R语言是一款开源的编程类工具，专门用于数据清洗、整理、统计分析、可视化以及数据挖掘等方面&#xff0c…...

编程日记 2025/8/22 4:02:58

CGAL边折叠edge_collapse的问题

使用edge_collapse对一个模型简化，之后回收垃圾，collect_garbage 处理之前的顶点和三角形数量： number_of_vertices: 955730 number_of_faces: 1903410 num_vertices: 955730 num_faces: 1903410 处理之后的顶点和三角形数量：…...

编程日记 2025/8/22 3:58:47

2025 全球分布式云大会演讲实录 | 沈建发：智启边缘，畅想未来：边缘计算新场景落地与 Al 趋势新畅想

4 月 9 日，2025 全球分布式云大会暨 AI 基础设施大会在深圳成功举办，火山引擎边缘云产品解决方案高级总监沈建发出席并以《智启边缘，畅想未来：边缘计算新场景落地与 Al 趋势新畅想》为主题，分享了边缘计算在 AI 技术趋…...

编程日记 2025/8/22 4:02:24

【ELF2学习板】OpenCL程序测试

目录引言 OpenCL简介主要特点编程模型应用场景测试程序代码说明构建编译环境头文件库文件程序编译测试结果结语引言 ELF2开发板采用的是RK3588处理器，它是瑞芯微推出的一款高性能 SoC。RK3588 集成了 ARM Mali-G610 MP4 GPU，…...

编程日记 2025/8/19 7:06:25

EtherCAT转ProfiNet边缘计算网关配置优化：汽车制造场景下PLC与机器人协同作业案例

1.行业背景与需求分析智能汽车焊装车间是汽车制造的核心工艺环节，某德国豪华品牌在其上海MEB工厂新建的焊装车间中，采用西门子S7-1500PLC作为ProfiNet主站，负责整线协调与质量追溯；同时部署KUKAKR1500Titan机器人（Eth…...

编程日记 2025/8/17 20:34:36

AI 推理与训练优化的核心理论体系建构及关键技术分析框架

AI 推理与训练优化的核心理论体系建构及关键技术分析框架一、推理加速的动态系统理论建模与算法设计 （一）基于MDP的动态计算图理论生物启发的决策框架：模拟灵长类视觉系统的注意力分配机制，构建马尔可夫决策过程（M…...

编程日记 2025/8/17 20:45:32

Jupyter 中 Markdown 邂逅 LaTeX：一场知识的绮梦

引言： 在日常编程和数据分析工作中，我们经常需要记录和分享信息。传统的注释方式功能有限，而富文本编辑器又过于臃肿。Markdown作为一种轻量级标记语言，完美解决了这个问题。为什么选择Markdown？ Markdown具有两大优势…...

编程日记 2025/8/21 10:51:54

AI 对话高效输入指令攻略（二）：关于豆包的指令

免责声明：该文章的所有样例只是测试，没有唆使大家利用AI抄袭作业！更没有宣传豆包。前言没有听不懂话的AI，只有不会调教AI的人。（自己瞎说的）当你把AI当人看之后，你就会发现，他是多…...

编程日记 2025/8/20 20:25:24

Apache Atlas构建安装（Linux）

一、环境准备 maven 3.6.3python 2.7nodejs 12java 1.8 注意环境一定要对，不然一堆问题 1. python2.7 安装参考文章：https://blog.csdn.net/weixin_42081389/article/details/101276251 打开链接：https://www.python.org/downloads/sourc…...

编程日记 2025/8/17 20:02:21

【JAVA】在idea新加artifact时，点击Build-Build Artifacts时，新加的artifact不能选中

首先保证添加artifact无问题，比如依赖都正确、无重复命令的情况等办法一 File > Invalidate Caches / Restart。重启IDEA后，重新检查Artifact是否可选办法二打开 Project Structure（CtrlShiftAltS）。进入 Artifacts 选…...

编程日记 2025/8/19 7:07:20

【杂谈】-自动驾驶变革：货运革新与机器人出租车崛起

自动驾驶变革：货运革新与机器人出租车崛起文章目录自动驾驶变革：货运革新与机器人出租车崛起一、市场主导力量二、机器人出租车的崛起三、货运运输的变革四、商业视角下的分析五、责任归属问题汽车行业，凭借其在道路状况、车辆性能及整体环…...

编程日记 2025/8/20 20:22:12

吊顶上的灯线怎么预留？是提前到位还是后期随意拉拽？

业主问家里的灯线怎么预留？ 问业主灯线指的是主灯还是射灯？ 业主说他家里边要做边吊，边吊上边要放一些射灯。在射灯上方对应的留灯线就可以，不用特别的精确，把线头放的稍微长一点即可。这位业主又说为什么要这样预留…...

编程日记 2025/8/20 2:21:37

网易游戏 x Apache Doris：湖仓一体架构演进之路

导读：网易游戏引入 Apache Doris 升级架构，先是替换 Elasticsearch、Hbase、Clickhouse 构建了实时数仓，而后基于 Apache Doris 和 Iceberg 构建了湖仓融合架构，实现架构的大幅简化及统一。目前，网易游戏 Apache Doris…...

编程日记 2025/8/19 2:04:02

大模型会不会取代人类工作

大模型是否会取代人类工作？ 随着人工智能技术的迅猛发展，尤其是大型语言模型（如GPT-4、BERT等）的出现，人们开始担忧这些先进的技术是否会在未来取代人类的工作。这种担忧并非空穴来风，历史上每一次技术革命…...

编程日记 2025/8/17 18:23:11

深入理解 Linux 权限管理：从 Shell 到文件权限

🌼🌼 在 Linux 系统中，权限是保障系统安全与稳定的核心之一。每个操作都可能涉及权限的管理和控制，特别是当你开始以不同用户的身份进行操作时。本文将通过生动的比喻与详细的技术解析，带你一起深入理解 Linux 权限系统…...

编程日记 2025/8/20 2:06:52

.net core 项目快速接入Coze智能体-开箱即用-全局说明

目录一、Coze智能体的核心价值二、开箱即用-效果如下三流程与交互设计为什么要分析意图，而不是全部交由AI处理。四接入前的准备工作五：代码实现----字节Coze 签署 JWT和获取Token .net core 项目快速接入Coze智能体-开箱即用 .net core快…...

编程日记 2025/8/17 19:57:08

React 开放封闭原则详解，构建可扩展的应用

开放封闭原则 React 采用了一些面向对象编程的原则和概念，其中之一就是开放封闭原则（Open-Closed Principle，OCP），它是面向对象编程的一个基本原则。本文将详细解释开放封闭原则的概念和在 React 中的应用，…...

编程日记 2025/8/17 18:25:06

【并行分布计算】Hadoop完全分布搭建

Hadoop完全分布搭建 1.为了使机器都处于同一个局域网中，先要修改机器的ip地址分配方式为固定ip，并为其固定分配一个ip地址。 [rootlocalhost ~]# vi /etc/sysconfig/network-scripts/ifcfg-ens33 问题：修改ip地址后，网络无法正常…...

编程日记 2025/8/19 8:44:32

Three.js + React 实战系列 : 从零搭建 3D 个人主页

可能你对tailiwindcss毫不了解，别紧张，记住我们只是在学习，学习的是作者的思想和技巧，并不是某一行代码。在之前的几篇文章中，我们已经熟悉了 Three.js 的基本用法，并通过 react-three-fiber 快速构建了一…...

编程日记 2025/8/17 21:23:18

四月十六日华为发布会

智能家居及穿戴类华为智能门锁 2 系列发布：2025 年 4 月 16 日，华为智能门锁 2 系列正式发布。该系列引入 AI 掌静脉识别技术和 AI 3D 人脸识别 3.0，具备高安全性；采用超清智能大猫眼，可视范围达 161；通过…...

编程日记 2025/8/17 21:08:18

23种设计模式-创建型模式之工厂方法模式（Java版本）

Java 工厂方法模式（Factory Method Pattern）详解 🌟 什么是工厂方法模式？ 工厂方法模式是一种创建型设计模式，定义一个创建对象的接口，让子类决定实例化哪一个类。它让类的实例化推迟到子类进行&#xf…...

编程日记 2025/8/19 12:06:32

基于FreeBSD的Unix系统搭建Nginx+PHP5运行环境

服务器操作系统版本：FreeBSD-10.1-i386 Nginx安装配置 1.以ports形式安装 #进入nginx目录 cd /usr/ports/www/nginx #执行编译安装 make install 2.编辑配置文件 #进入etc目录 cd /etc #编辑配置文件 ee rc.conf #进入编辑模式 i #参照如下设置 nginx_enable”YES…...

编程日记 2025/8/17 21:10:24

医院处方外流对接外部药房系统（合规python代码版）

系统概述本系统旨在帮助医院实现与外部零售药店的安全、合规对接，满足2025年医保局和卫健委关于处方流转的最新规定。系统采用Python开发，基于RESTful API实现医院HIS系统与外部药房之间的处方信息传输、医保支付验证和处方状态跟踪等功能。系统架构 #mermaid-svg-zKU5Wj…...

编程日记 2025/8/17 10:25:25

第十七届“华中杯”B 题校园共享单车的调度与维护问题分析

问题1：估算共享单车总量及不同停车点位在不同时间点的数量分布首先，我们需要对附件1的数据进行汇总，以估算出校园内的共享单车总量。由于数据是按不同时间和停车点位统计的，我们可以通过对所有时间和点位的单车数量进行求和&…...

编程日记 2025/8/17 6:29:34

线程池的封装（c/c++）

前言：本文将要封装的线程池相关接口是基于之前一篇文章中的实现（文章链接：Linux多线程编程的艺术：封装线程、锁、条件变量和信号量的工程实践-CSDN博客）。不过无需担心，即使您没有阅读过前文，只…...

编程日记 2025/8/17 18:24:22

「数据可视化 D3系列」入门第六章：比例尺的使用

比例尺的使用一、比例尺是什么？典型示例： 二、常用比例尺类型1. 线性比例尺 (scaleLinear)2. 序数比例尺 (scaleOrdinal)3. 其他常用比例尺类型： 三、实际应用主要改进点说明四、比例尺的高级用法1. 颜色比例尺2. 时间比例尺3. 分段比例尺 …...

编程日记 2025/8/17 1:39:33

巧用ChatGPT生成适合小白的Python练习题，助力编程入门

🎁个人主页：User_芊芊君子 🎉欢迎大家点赞👍评论📝收藏⭐文章 🔍系列专栏：AI 【前言】在Python学习的道路上，练习题是帮助小白快速掌握编程知识和技能的重要工具。然而，…...

编程日记 2025/8/17 18:23:16

iOS15描述文件在哪下载？iOS15测试版描述文件下载与升级教程

iOS 15正式发布：全面升级体验与开发者工具推荐今天凌晨，备受关注的WWDC21开发者大会上如期召开，果粉期待已久的新一代iOS 15操作系统正式发布。iOS 15系统带来了全新FaceTime与通知界面，并对照片、天气、钱包、地图等应用进行了…...

编程日记 2025/8/21 23:37:52

Java面试（2025）—— Spring

什么是Spring? 结构化回答（总分总模式） ① 一句话定义 “Spring 是一个开源的 Java 企业级应用框架，核心目标是简化企业应用的开发，通过控制反转（IoC）、依赖注入（DI）和面向切面编…...

编程日记 2025/8/17 19:49:14

【C++ Qt】Hello World、初始信号槽、理解对象树 ~~~（通俗易懂图文并茂）

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry” 绪论： 本章是Qt的第二篇，带你认识Qt中几个简单的控件如何实现，以及通过信号槽的方式实现一定的用户和程序的联动，还有许多…...

编程日记 2025/8/19 7:17:42

2025.04.16【GroupedandStackedbarplot】生信数据可视化技法

Negative values This blogpost shows what happens when the dataset includes negative values. Most basic streamchart The most basic streamchart you can build with R and the streamgraph package. 文章目录 Negative valuesMost basic streamchart 2025.04.16【Gro…...

编程日记 2025/8/17 18:23:12

一、HTML 语法规范

1.1 基本语法概述

1.2 标签关系

二、HTML 基本结构标签

2.1 第一个 HTML 网页

2.2 基本结构标签总结

三、网页开发工具

3.1 VSCode的使用

3.2 VSCode 工具生成骨架标签新增代码

3.2.1 文档类型声明标签

3.2.2 lang 语言种类

3.2.3 字符集

3.2.4 总结

四、常用标签

4.1 标签语义

4.2 标题标签 <h1> - <h6>

4.3 段落和换行标签

4.4 练练手

4.5 文本格式化标签

4.6 <div> 和<span>标签

4.7 图像标签和路径

4.7.1 图像标签

4.7.2 路径

4.8 超链接标签（重点）

4.8.1 链接的语法格式

4.8.2 链接分类：

五、HTML 中的注释和特殊字符

5.1 注释

5.2 特殊字符

相关文章：