一、HTML 基本骨架1. 认识 HTML 标签HTML 代码是由 “标签” 构成的.
形如：
代码语言：javascript代码运行次数：0运行复制
hello标签名 (body)放到<>中大部分标签成对出现， 为开始标签，为结束标签少数标签只有开始标签，称为 “单标签”开始标签和结束标签之间，写的是标签的内容(hello)开始标签中可能会带有"属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)代码语言：javascript代码运行次数：0运行复制hello2. 基本结构代码语言：javascript代码运行次数：0运行复制hello world
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写
标签名
定义
说明
HTML 标签
页面中最大的标签 – 根标签
文档头部
注意：在head 标签必须要设置的标签是 title
文档标题
让页面拥有自己的网页标题
文档主体
元素包含文档的所有内容
注意：HTML 文档的后缀名必须是 .html 或者 .htm
浏览器的作用：读取HTML 文档，并以网页形式显示
3. 标签层次结构① 父子关系
② 兄弟关系
代码语言：javascript代码运行次数：0运行复制
hello world
其中:
head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)title 是 head 的子标签，head 是 title 的父标签head 和 body 之间是兄弟关系, 可以使用 chrome 的开发者工具查看页面的结构
F12 或者右键审査元素, 开启开发者工具,切换到 Elements 标签, 就可以看到页面结构细节,
image-20250224191527954上面标签之间的结构关系，构成了一个 DOM 树
DOM 是 Document Object Mode (文档对象模型) 的缩写
image-202502241916283734. 快速生成代码框架在 VS 或者 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架，如下：
image-20241025152326017生成代码如下：
代码语言：javascript代码运行次数：0运行复制
细节解释: (了解即可,不必深究)
称为 DTD (文档类型定义),描述当前的文件是一个 HTML5 的文件
描述页面的字符编码方式,没有这一行可能会导致中文乱码
name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content="width=device-width，initial-scale=1.0” 在设置可视区和设备宽度等宽,并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些).
3. 网页开发工具3.1 文档声明类型 ： 文档类型声明，告诉浏览器用哪种 HTML 版本来显示网页
3.2 lang 语言种类用来定义当前文档显示语言
en 定义语言为 英语zh-CN 定义语言为 中文简单来说，定义为 en 就是英文网页，定义为 zh-CN 就是 中文网页
3.3 字符集字符集（Character set） 是多个字符集合，以便计算机能够识别和存储各种文字
在 标签内，可以通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码
二、HTML 常见标签1. 基本概述标签的主要部分有:
**开始标签(Opening tag)：**包含元素的名称(本例为 p)，被左、右角括号所包围。表示元素从这里开1始或者开始起作用 – 在本例中即段落由此开始。**结東标签(Closing tag)：**与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 – 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。**内容(Content)：**元素的内容，本例中就是所输入的文本本身。补充：注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
代码语言：javascript代码运行次数：0运行复制ctrl + / 快捷键可以快速进行注释/取消注释
注释的原则： 1. 要和代码逻辑一致. 2. 尽量使用中文. 3. 不要传递负能量.
2. 标题标签: h1 - h6代码语言：javascript代码运行次数：0运行复制
标题
标题
标题
标题
标题
标题
h1 标签在一个网页中只能用一次， 一般用来放 新闻标题 和 网页的 logoh2 ~ h6 没有使用次数的限制3. 段落标签: p把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落. 例如以下文本：代码语言：javascript代码运行次数：0运行复制css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章结果如下：
image-20250224192830662p 标签表示一个段落.
代码语言：javascript代码运行次数：0运行复制
这是一个段落
现在我们使用 p 标签来改进上述代码，如下：代码语言：javascript代码运行次数：0运行复制
css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
结果如下：image-20250224193055403段落标签的显示效果
独占一行段落之间会有间隙注意：
p 标签之间存在一个空隙当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)自动根据浏览器宽度来决定排版.html 内容首尾处的换行, 空格均无效.在 html 中文字之间输入的多个空格只相当于一个空格.html 中直接输入换行不会真的换行，而是相当于一个空格4. 换行标签: brbr 是 break 的缩写. 表示换行
br 是一个单标签(不需要结束标签)br 标签不像 p 标签那样带有一个很大的空隙.
是规范写法，不建议写成
【案例】：
代码语言：javascript代码运行次数：0运行复制
在css中我们一般使用px作为单位，
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
结果如下：image-20250224193453123**注意：**在代码中直接敲 Enter，在浏览器中无换行效果，因为浏览器不识别回车键换行
5. 文本格式化标签作用：为文本添加特殊格式，以突出重点，常见的文本格式：**加粗**、*倾斜*、下划线、~~删除线~~ 等
标签名
标签名
效果
strong
b
加粗
em
i
倾斜
ins
u
下划线
del
s
删除线
两边标签名区别：strong、em、ins、del 标签自带 强调含义（语义）代码语言：javascript代码运行次数：0运行复制加粗
加粗
下划线
下划线
倾斜线
倾斜线
删除线
删除线6. 图像标签: srcimg 标签必须带有 src 属性. 表示图片的路径.
代码语言：javascript代码运行次数：0运行复制
注意：此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.img 标签的属性：
属性名
作用
src
用于指定图像的位置和名称，是 的必须属性
alt
替换文本 --图片无法显示的时候就会显示一个替换的文字
title
提示文本 – 鼠标悬停在图片上显示文字
width 和 height
控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片 失衡
border
边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
【案例】：
代码语言：javascript代码运行次数：0运行复制注意:
属性可以有多个，不能写到标签之前属性之间用空格分割，可以是多个空格,也可以是换行属性之间不分先后顺序属性使用"键值对" 的格式来表示,关于目录结构：
对于一个复杂的网站,页面资源很多,这种情况可以使用目录把这些文件整理好.
（1）相对路径：以 html 所在位置为基准,找到图片的位置.
同级路径： 直接写文件名即可(或者 ./ )下一级路径： image/1.jpg上一级路径：../image/1.jpg（2）绝对路径：一个完整的磁盘路径，或者网络路径。如下：
磁盘路径：D:\rose.jpg Windows 电脑从 盘符 出发Mac 电脑从 根目录 (/) 出发网络路径： http://www/cn.hnust【案例】：
① 使用相对路径: 创建一个 image 目录和 html 同级,并放入一个 rose2.jpg
代码语言：javascript代码运行次数：0运行复制
② 使用相对路径2:在 image 目录中创建一个 html,并访问上级目录的 rose.jpg
代码语言：javascript代码运行次数：0运行复制
③ 使用绝对路径1：最好使用/，不要使用\
代码语言：javascript代码运行次数：0运行复制
④ 使用绝对路径2：使用网络路径
代码语言：javascript代码运行次数：0运行复制
7. 超链接标签: a href：必须具备, 表示点击后会跳转到哪个页面.
target：打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
代码语言：javascript代码运行次数：0运行复制百度链接的几种形式，如下：
① 外部链接：href 引用其他网站的地址
代码语言：javascript代码运行次数：0运行复制百度 ② 内部链接：网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html
代码语言：javascript代码运行次数：0运行复制
我是 1.html
我是 2.html
点我跳转到 1.html ③ 空链接：使用 # 在 href 中占位.
代码语言：javascript代码运行次数：0运行复制空链接 ④ 下载链接：href 对应的路径是一个文件. (可以使用 zip 文件)
代码语言：javascript代码运行次数：0运行复制下载文件 ⑤ 网页元素链接：可以给图片等任何元素添加链接(把元素放到 a 标签中)
⑥ 锚点链接：
代码语言：javascript代码运行次数：0运行复制第一集
第一集剧情
第一集剧情
...
第二集剧情
第二集剧情
...
第三集剧情
第三集剧情
...
禁止 a 标签跳转: 或者 :8. 多媒体标签在现代网页中，多媒体元素是提升用户体验的重要组成部分。HTML 提供了一系列多媒体标签，如
image-202502242023206968.4 canvas
代码语言：javascript代码运行次数：0运行复制通过 JavaScript 脚本，你可以获取 Canvas 上下文并在上面绘制图形，创建交互性丰富的图形界面
【案例】：
代码语言：javascript代码运行次数：0运行复制
效果如下：
image-202502242031465279. 列表标签主要使用来布局的，使内容排列整齐好看.
列表分类如下：
无序列表[重要]：ul li有序列表[用的不多] ：ol li自定义列表[重要]： dl (总标签) dt (小标题) dd (围绕标题来说明) ，比如：上面有个小标题, 下面有几个围绕 着标题来展开的. 自定义列表(参考小米官网下方)image-20241031164820330 注意
元素之间是并列关系ul / ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 ddli 中可以放其他标签.列表带有自己的样式，可以使用 CSS 来修改. (例如前面的小圆点都会去掉)8.1 无序列表布局排列整齐的 不需要规定顺序的区域
标签：ul 嵌套 li，ul 是 无序列表，li 是 列表条目
ul无序列表整体 ul标签中只允许包含li标签，列表中的每一项前默认显示圆点标记【案例】：
代码语言：javascript代码运行次数：0运行复制
- 榴莲
- 香蕉
- 苹果
榴莲香蕉苹果8.2 有序列表布局排列整齐的 需要规定顺序的区域
标签：ol 嵌套 li，ol 是 无序列表，li 是 列表条目
ol表示有序列表整体 ol标签中只允许包含li标签,列表中的每一项前默认显示序号标记【案例】：
代码语言：javascript代码运行次数：0运行复制
- 掌声
- 迷惑
掌声迷惑补充 ： li表示列表中的每一项，可以包含任意内容
8.3 定义列表布局排列整齐的 不需要规定顺序的区域
标签：**dl 嵌套 dt 和 dd，dl 是 定义列表，dd 是定义列表标题，dd 是定义列表的描述 **
【案例】：
代码语言：javascript代码运行次数：0运行复制
- 帮助中心
- 账号管理
- 购物指南
帮助中心 账号管理 购物指南
注意：
dl表示自定义列表整体，只允许包含dt和dd标签dt表示自定义列表的主题dd表示自定义列表分针对主题的每一项内容 而且 dd会默认显示缩进效果10. 表格标签10.1 表格结构标签：table 嵌套 tr， tr 嵌套 td / th
标签名
说明
table
表格
tr
行
th
表头单元格
td
内容单元格
thead
表格的头部区域(注意和 th 区分, 范围是比 th 要大的
tbody
表格得到主体区域.
案例如下：
在网页中以行 + 列的单元格的方式整齐展示数据table 要包含tr（tr会自动换行），tr包含 td / th ，td包含内容表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中
align ： 是表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)border ：表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.cellpadding： 内容距离边框的距离, 默认 1 像素cellspacing：单元格之间的距离. 默认为 2 像素width / height：设置尺寸.注意：这几个属性，vscode 都提示不出来.
【案例】：
代码语言：javascript代码运行次数：0运行复制
| 姓名 | 成绩 | 评语 |
| 帅哥 | 100分 | 真棒 |
| 小明 | 150分 | 真牛 |
姓名
成绩
评语
帅哥
100分
真棒
郭德纲
150分
真牛
10.2 合并表格将水平或者垂直单元格合成一个单元格
rowspan 跨行合并（把多行合并为一行)colspan 跨列合并（把多列合成一行）属性值均为数字，代表合成单元格的个数合并单元格步骤：
明确合并哪些单元格通过左上原则 ，上下合并（只保留最上的），左右合并（只保留最左边的）删除多余单元格注意；只有同一个结构标签的单元格可以合并，不能跨结构标签合并（不能跨tfoot tbody tfoot）
代码语言：javascript代码运行次数：0运行复制
| 姓名 | 成绩 | 评语 |
| 帅哥 | 100分 | 真棒 |
| 郭德纲 | 真牛 | |
| 总结 | 郎才女貌 | |
姓名
成绩
评语
帅哥
100分
真棒
郭德纲
真牛
总结
郎才女貌
注意事项：
cellpadding 属性规定单元边沿与其内容之间的空白。**注释：**请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。
从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加 内边距
代码语言：javascript代码运行次数：0运行复制