目录
- HTML（Hyper Text Markup Language）中文译为：超文本标记语言
- 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
1.排版标签
1.1.标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码： h系列标签
//<h1>1级标题</h1>
//<h2>2级标题</h2>
//<h3>3级标题</h3>
//<h4>4级标题</h4>
//<h5>5级标题</h5>
//<h6>6级标题</h6>
语义：1~6级标题，重要程度依次递减
特点：
- 文字都有加粗
- 文字都有变大，并且从h1 --> h6文字逐渐减小
- 独占一行
1.2.段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：
- 段落之间存在间隙
- 独占一行
1.3.换行标签
场景：让文字强制换行显示
代码：
语义：换行
特点：
- 单标签
- 让文字强制换行
1.4.水平线标签
场景：分割不同主题的内容
代码：<hr>
语义：主题的分割转换
特点：
- 单标签
- 在页面中显示一条水平线
2.文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除等效果
代码：
标签 说明 标签 说明
b 加粗 strong 加粗
u 下划线 ins 下划线
i 倾斜 em 倾斜
s 删除线 del 删除线
语义：突出重要性的强调语境（用右边的）
特点：
3.媒体标签
3.1.图片标签
场景：在网页中显示图片
代码：<img src="" alt="">
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
3.1.1图片标签的src属性：
属性名： src
属性值：目标图片的路径
注意点：
- 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 路径情况有很多，分绝对路径和相对路径
- 相对路径：从当前文件（当前HTML网页）开始出发找目标文件的过程
同级目录： ./
下级目录：先找到在哪个文件夹里，进入这个文件夹-->/，再直接写目标文件的名字
上级目录：先出当前文件夹，到上一级目录-->../，再直接写目标文件
3.1.2图片标签的alt属性
属性名： alt
属性值：替换文本
注意点：
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
3.1.3图片标签的title属性
属性名： title
属性值：提示文本
注意点：
- 当鼠标悬停时，才显示title的文本
- title属性不仅仅可以用于图片标签，还可以用于其他标签
3.1.4图片标签的width和height属性
属性名： width和height
属性值：宽度和高度（数字）
注意点：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.2.音频标签
场景：在页面中插入音频
代码：<audio src="./music.mp3" controls></audio>
常见属性：
属性名 功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放
loop 循环播放
注意点：
- 音频标签目前支持三种格式：MP3、Wav、Ogg
3.3.视频标签
场景：在页面中插入视频
代码：<video src="./video.mp4" controls></video>
常见属性：
属性名 功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
loop 循环播放
注意点：
- 视频标签目前支持三种格式：MP4、WebM、Ogg
4.链接标签
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：超链接
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href（跳转地址）属性
- 当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空连接）
##链接标签的target属性
属性名： target
属性值：目标网页的打开形式
取值 效果
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）
5.列表标签
5.1.无序列表
场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：
标签名 说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容
显示特点：
- 列表的每一项前默认显示圆点标识
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
5.2.有序列表
场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：
标签名 说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容
显示特点：
- 列表的每一项前默认显示序号标识
注意点：
- ol标签中只允许包含li标签
- li标签可以包含任意内容
5.3.自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现
标签组成：
标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
显示特点：
- dd前会默认显示缩进效果
注意点：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
6.表格标签
6.1.表格的基本标签
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，用于包裹td
td 表格单元格，可用于包裹内容
注意点：
- 标签的嵌套关系：table > tr > td
6.2.表格的相关属性
场景：设置表格基本展示效果
常见相关属性：
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
注意点：
- 实际开发时针对于样式效果推荐用CSS设置
6.3.表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
其他标签：
标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意点：
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
6.4.表格的结构标签（了解）
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
注意点：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
6.5.合并单元格
场景：将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
上下合并-->只保留最上的，删除其他
左右合并-->只保留最左的，删除其他
- 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并
注意点：
- 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
7.表单标签
7.1.input系列标签
7.1.1.input系列标签的基本介绍
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名： input
- input标签可以通过type属性值的不同，展示不同效果
type属性值：
7.1.2.input系列标签-文本框
场景：在网页中显示输入单行文本的表单控件
type属性值： text
常用属性：
（拓展）value属性和name属性作用介绍
value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是： name的属性值 = value的属性
7.1.3.input系列标签-密码框
场景：在网页中显示输入密码的表单控件
type属性值：password
常用属性（同文本框）：
注意点：
- type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
7.1.4.input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
注意点：
- name属性对于单选框有分组功能
- 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
7.1.5.input系列标签-复选框
场景：在网页中显示多选多的多选表单控件
type属性值：checkbox
常用属性（同单选框）：
7.1.6.input系列标签-文件选择
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
7.1.7.input系列标签-按钮
场景：在网页中显示不同功能的按钮表单控件
type属性值：
注意点：
- 如果需要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来即可
7.2.button按钮标签
场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）： 
注意点：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
7.3.select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中
7.4.textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置
7.5.label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法①：
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法②：
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即
8.语义化标签
8.1.没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
8.2.有语义的布局标签（了解）
场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签： 
注意点：
- 以上标签显示特点和div一致，但是比div多了不同的语义
9.字符实体
9.1.HTML的空格合并现象
场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
9.2.常见字符实体
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构： &英文;
常见字符实体：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
