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

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

article 2026/1/19 19:36:41

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的使用

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

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

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

四、常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

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

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。 
<h1> 一级标题 </h1>
单词 head 的缩写，意为头部、标题。 标签语义： 作为标题使用，并且依据重要性递减。
特点：
  1. 加了标题的文字会变的加粗，字号也会依次变大。
  2.  一个标题独占一行。

4.3 段落和换行标签

4.3.1 <p>标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中， <p> 标签用于 定义段落 ，它可以将整个网页分为若干个段落。 
<p> 一个段落标签 </p>
单词 paragraph [ ˈ pær ə græf] 的缩写，意为段落。 标签语义： 可以把 HTML 文档分割为若干段落。
特点：
  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。

4.3.2 <br />标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用 换行标签 <br /> 。 
<br />
单词 break 的缩写，意为打断、换行。 标签语义： 强制换行。
特点：
  1. <br /> 是个单标签。
  2. <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 意为跨度、跨距。
特点：
  1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
  2. <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 路径
(1)目录文件夹和根目录:
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹： 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 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 链接分类：
  1. 外部链接: 例如 < a href="http:// www.baidu.com ">百度</a >。
  2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
  3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
  4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
  5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
  6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
  • 在链接文本的 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&#xff01;好久不见—— 做出一个属于自己的网站&#xff01; 云边有个稻草人-个人主页 Web前端技术—本篇文章所属专栏 目录 一、HTML 语法规范 1.1 基本语法概述 1.2 标签关系 二、HTML 基本结构标签 2.1 第一个 HTML 网页 2.2 基本结构标签总结 三、网页开发…...

编程日记 2026/1/4 9:24:50

1.Axum 与 Tokio：异步编程的完美结合

摘要 深入解析 Axum 核心架构与 Tokio 异步运行时的集成&#xff0c;掌握关键原理与实践技巧。 一、引言 在当今的软件开发领域&#xff0c;高并发和高性能是衡量一个系统优劣的重要指标。对于 Web 服务器而言&#xff0c;能够高效地处理大量并发请求是至关重要的。Rust 语言…...

编程日记 2025/12/1 18:16:36

08软件测试需求分析案例-删除用户

删除用户是后台管理菜单的一个功能模块&#xff0c;只有admin才有删除用户的权限。不可删除admin。 1.1 通读文档 通读需求规格说明书是提取信息&#xff0c;提出问题&#xff0c;输出具有逻辑、规则、流程的业务步骤。 信息&#xff1a;此功能应为用户提供确认删除的功能。…...

编程日记 2026/1/1 7:32:53

SDL基础

SDL SDL&#xff08;Simple DirectMedia Layer&#xff09;是一个开源的跨平台多媒体开发库&#xff0c;主要用于开发需要图形、音频和输入设备支持的应用程序。它使用C语言编写&#xff0c;提供了简单易用的API&#xff0c;**能够帮助开发者快速实现跨平台的多媒体功能。**SD…...

编程日记 2025/12/2 3:22:58

十三种通信接口芯片——《器件手册--通信接口芯片》

目录 通信接口芯片 简述 基本功能 常见类型 应用场景 详尽阐述 1 RS485/RS422芯片 1. RS485和RS422标准 2. 芯片功能 3. 典型芯片及特点 4. 应用场景 5. 设计注意事项 6. 选型建议 2 RS232芯片 1. RS232标准 2. 芯片功能 3. 典型芯片及特点 4. 应用场景 5. 设计注意事项 6…...

编程日记 2026/1/16 15:56:56

反转一个字符串

用数组栈实现 void Reverse(char *C, int len) {top -1;for(int i 0; i < len; i){push(C[i]);}for(int i 0; i < len; i){C[i] Top();pop();} } 全部函数 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX_SIZE 101int …...

编程日记 2025/12/27 21:26:54

从GPT到Gemini 大模型进化史

从GPT到Gemini&#xff1a;大模型进化史 在过去的几年里&#xff0c;人工智能领域经历了翻天覆地的变化&#xff0c;其中最引人注目的莫过于大规模语言模型的发展。从最初的GPT系列到最近的Gemini&#xff0c;这些模型不仅在技术上取得了重大突破&#xff0c;还在实际应用中展…...

编程日记 2026/1/10 8:17:37

【限流算法】计数器、漏桶、令牌桶算法

1 计数器 使用计数器实现限流&#xff0c;可限制在指定时间间隔内请求数小于阈值的情况&#xff0c;但存在临界问题。如图1-17所示&#xff0c;假设每分钟系统限流500个请求&#xff0c;在XX:00:59时刻系统接收到500个请求&#xff0c;在XX:01:00时刻系统又接收到500个请求&am…...

编程日记 2026/1/19 9:30:21

秘密任务 2.0：如何利用 WebSockets + DTOs 设计实时操作

在之前的文章中&#xff0c;我们探讨了为什么 DTO 是提升 API 效率和安全性的秘密武器。现在&#xff0c;我们进入了一个全新的场景——我们将深入探讨如何通过 WebSockets DTOs 实现实时操作&#xff01; Agent X 正在进行一项高风险的卧底任务。突然&#xff0c;总部更新了…...

编程日记 2026/1/13 10:20:37

‌RAII 技术详解

1. 核心概念‌ ‌定义‌&#xff1a;RAII&#xff08;Resource Acquisition Is Initialization&#xff0c;资源获取即初始化&#xff09;是 C 中通过对象生命周期管理资源的核心机制&#xff0c;核心思想是将资源的获取与对象构造绑定、资源释放与对象析构绑定&#xff0c;确…...

编程日记 2026/1/12 14:23:10

Windows快速切换屏幕/桌面

windows自带的切屏 需要winctrl 小键盘左右键 但是&#xff01; Windows使用还是键盘加鼠标舒服&#xff01; 教程 安装autohotkey 代码 ~LWin & LButton::{SendInput "^#{Left}" ; 发送 Win Ctrl Left (切换到左侧虚拟桌面) } ; 使用花括号包裹命令&a…...

编程日记 2026/1/7 5:37:55

SpringAI+DeepSeek大模型应用开发——3 SpringAI简介

SpringAI整合了全球&#xff08;主要是国外&#xff09;的大多数大模型&#xff0c;而且对于大模型开发的三种技术架构都有比较好的封装和支持&#xff0c;开发起来非常方便&#xff1b; 不同的模型能够接收的输入类型、输出类型不一定相同。SpringAI根据模型的输入和输出类型…...

编程日记 2026/1/17 11:15:52

使用 Function 来编写策略模式：优雅而高效的设计模式实践

引言&#xff1a;为什么选择策略模式&#xff1f; 策略模式&#xff08;Strategy Pattern&#xff09;是行为设计模式中的经典之一&#xff0c;它允许我们定义一系列的算法或操作&#xff0c;并使得它们可以互换使用。策略模式的关键思想是将算法的实现与使用它们的上下文分离…...

编程日记 2025/12/4 23:14:19

Java字符串处理

Java字符串处理全解析&#xff1a;String、StringBuilder与StringBuffer 一、String类基础 1. String的本质 不可变对象&#xff1a;Java中的String对象一旦创建就不能修改底层实现&#xff1a;基于private final char value[]字符数组字符串池&#xff1a;JVM维护的特殊存储…...

编程日记 2025/12/2 10:39:08

JS实现RSA加密

目录 目标 环境 实现RSA加解密 计算RSA加密允许的最大字节长度 目标 使用JS实现RSA加密解密。计算RSA加密允许的最大字节长度。 环境 node-rsa 实现RSA加解密 const NodeRSA require(node-rsa);function getKey() {const keyLength512// 创建 RSA 密钥对const key new …...

编程日记 2025/12/2 4:27:50

MySQL GTID集合运算函数总结

MySQL GTID 有一些运算函数可以帮助我们在运维工作中提高运维效率。 1 GTID内置函数 MySQL 包含GTID_SUBSET、GTID_SUBTRACT、WAIT_FOR_EXECUTED_GTID_SET、WAIT_UNTIL_SQL_THREAD_AFTER_GTIDS 4个内置函数&#xff0c;用于GTID集合的基本运算。 1.1 GTID_SUBSET(set1,set2) …...

编程日记 2026/1/16 23:38:18

从“链主”到“全链”：供应链数字化转型的底层逻辑

1. 制造业与供应链数字化转型的必然性 1.1. 核心概念与战略重要性 制造业的数字化转型&#xff0c;是利用新一代数字技术&#xff08;如工业互联网、人工智能、大数据、云计算、边缘计算等&#xff09;对制造业的整体价值链进行根本性重塑的过程。这不仅涉及技术的应用&#…...

编程日记 2026/1/16 21:12:45

学习笔记十五——rust柯里化，看不懂 `fn add(x) -＞ impl Fn(y)` 的同学点进来！

&#x1f9e0; Rust 柯里化从零讲透&#xff1a;看不懂 fn add(x) -> impl Fn(y) 的同学点进来&#xff01; &#x1f354; 一、什么是柯里化&#xff1f;先用一个超好懂的生活比喻 假设你在点一个汉堡&#xff1a; 你说&#xff1a;我要点一个鸡腿汉堡&#xff01; 店员…...

编程日记 2025/12/4 22:48:13

定制化突围：遨游防爆手机的差异化竞争策略

在石油、化工、矿山等危险作业场景中&#xff0c;随着工业智能化与安全生产需求的升级&#xff0c;行业竞争逐渐从单一产品性能的比拼转向场景化解决方案的深度较量。遨游通讯以九重防爆标准为技术底座&#xff0c;融合多模稳控系统与全景前瞻架构&#xff0c;开辟出"千行…...

编程日记 2026/1/19 3:45:28

【Java学习笔记】进制与进制转换

进制与进制转换 一、进制介绍 二进制&#xff1a;0、1&#xff0c;满 2 进 1&#xff0c;以 0b 或 0B 开头。 十进制&#xff1a;0-9&#xff0c;满 10 进 1。 八进制&#xff1a;0-7&#xff0c;满 8 进 1&#xff0c;以数字 0 开头表示。 十六进制&#xff1a;0-9 及 A(10…...

编程日记 2025/12/19 5:36:20

士兵乱斗(贪心)

问题 B: 士兵乱斗 - USCOJ...

编程日记 2026/1/14 23:23:49

【C++面向对象】封装(下)：探索C++运算符重载设计精髓

&#x1f525;个人主页 &#x1f525; &#x1f608;所属专栏&#x1f608; 每文一诗 &#x1f4aa;&#x1f3fc; 年年岁岁花相似&#xff0c;岁岁年年人不同 —— 唐/刘希夷《代悲白头翁》 译文&#xff1a;年年岁岁繁花依旧&#xff0c;岁岁年年看花之人却不相同 目录 C运…...

编程日记 2026/1/18 3:08:07

JVM初探——走进类加载机制|三大特性 | 打破双亲委派SPI机制详解

目录 JVM是什么&#xff1f; 类加载机制 Class装载到JVM的过程 装载&#xff08;load&#xff09;——查找和导入class文件 链接&#xff08;link&#xff09;——验证、准备、解析 验证&#xff08;verify&#xff09;——保证加载类的正确性 准备&#xff08;Prepare&…...

编程日记 2026/1/19 11:15:28

[图论]Kruskal

Kruskal 本质&#xff1a;贪心&#xff0c;对边进行操作。存储结构&#xff1a;边集数组。适用对象&#xff1a;可为负权图&#xff0c;可求最大生成树。核心思想&#xff1a;最短的边一定在最小生成树(MST)上&#xff0c;对最短的边进行贪心。算法流程&#xff1a;对全体边集…...

编程日记 2025/12/16 19:56:07

UML-饮料自助销售系统（无法找零）序列图

一、题目&#xff1a; 在饮料自动销售系统中&#xff0c;顾客选择想要的饮料。系统提示需要投入的金额&#xff0c;顾客从机器的前端钱币口投入钱币&#xff0c;钱币到达钱币记录仪&#xff0c;记录仪更新自己的选择。正常时记录仪通知分配器分发饮料到机器前端&#xff0c;但可…...

编程日记 2026/1/13 10:47:01

Nginx Http配置整理

一、nginx 配置参数&#xff1a; server {#SSL 默认访问端口号为 443listen 443 ssl;#请填写绑定证书的域名server_name cloud.tencent.com; #请填写证书文件的相对路径或绝对路径ssl_certificate cloud.tencent.com_bundle.crt; #请填写私钥文件的相对路径或绝对路径ssl_cer…...

编程日记 2025/12/20 7:17:39

爬虫利器SpiderTools谷歌插件教程v1.0.0！！！web端JavaScript环境检测！！！

SpiderTools谷歌插件教程v1.0.0 一、SpiderTools简介二、下载通道三、插件介绍四、插件使用五、工具函数使用 一、SpiderTools简介 SpiderTools主要用于检测和监控网页的JavaScript运行环境。该插件可以帮助开发者更好地查看网页运行环境&#xff0c;特别是在处理复杂的前端环…...

编程日记 2026/1/17 0:56:44

计算机视觉算法实战——基于YOLOv8的农田智能虫情测报灯害虫种类识别系统开发指南

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​​​​​​​ ​​ 一、智能虫情监测领域概述 1.1 农业虫害防治现状 全球每年因虫害造成的粮食损失达20%-40%&#xff0c;我…...

编程日记 2026/1/16 21:24:09

14-算法打卡-哈希表-基本概念-第十四天

1 基本概念 1.1 哈希表 百度百科解释&#xff1a; 散列表&#xff08;Hash table&#xff0c;也叫哈希表&#xff09;&#xff0c;是根据关键码值(Key value)而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快…...

编程日记 2026/1/19 2:43:16

趣味编程之分布式系统：负载均衡的“雨露均沾“艺术

#此篇文章由Deepseek大力支持&#x1f60b; 凌晨三点&#xff0c;西二旗某火锅店后厨—— “羊肉卷走3号桌&#xff01;” “肥牛卷去7号&#xff01;” “虾滑优先给VIP区&#xff01;” 我蹲在传菜口的监控屏幕前&#xff0c;看着机器人服务生们忙而不乱地穿梭。突然间&am…...

编程日记 2025/12/2 7:45:26