HTML常用标签

一.排版标签

1.标题标签

➢ 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
➢ 代码： h系列标签

➢ 语义:1~6级标题，重要程度依次递减
➢ 特点：
①文字都有加粗
②文字都有变大，并且从h1 → h6文字逐渐减小
③独占一行
➢ 注意点:h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.段落标签

➢ 场景：在新闻和文章的页面中，用于分段显示
➢ 代码：<p>我是一段文字</p>
➢ 语义：段落
➢ 特点：
① 段落之间存在间隙
② 独占一行

3.换行标签

➢ 场景：让文字强制换行显示
➢ 代码：<br>
➢ 语义：换行
➢ 特点：
①单标签
②让文字强制换行

4.水平线标签

➢ 场景：分割不同主题内容的水平线
➢ 代码：<hr>
➢ 语义：主题的分割转换
➢ 特点：
• 单标签
• 在页面中显示一条水平线

二.文本格式化标签

➢ 场景：需要让文字加粗、 下划线、 倾斜、 删除线等效果
➢ 代码：

➢ 语义：突出重要性的强调语境
➢ 推荐：
• strong、 ins、 em、 del，表示的强调语义更强烈！

三.媒体标签

1.图片标签

➢ 场景：在网页中显示图片
➢ 代码：

➢ 特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！
➢ 属性注意点：
（1）标签的属性写在开始标签内部
（2）标签上可以同时存在多个属性
（3）属性之间以空格隔开
（4）标签名与属性之间必须以空格隔开
（5）属性之间没有顺序之分
①➢ 属性名： src
➢ 属性值：目标图片的路径

②➢ 属性名： alt
➢ 属性值：替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本

③➢ 属性名： title
➢ 属性值：提示文本
• 当鼠标悬停时，才显示的文本
➢ 注意点： title属性不仅仅可以用于图片标签，还可以用于其他标签

④➢ 属性名： width和height
➢ 属性值：宽度和高度（数字）
➢ 注意点：
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形
➢路径
（1）路径的介绍
➢ 场景：页面需要加载图片，需要先找到对应的图片
➢ 类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！
➢ 同理：页面需要找到图片，也是需要通过路径才能找到
➢ 路径可分为：
① 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
➢ 例如:（绝对路径了解即可）
• 盘符开头：D:\day01\images\1.jpg
• 完整的网络地址：http://localhost:8080/images/index/user.jpg
② 相对路径（常用）:从当前文件开始出发找目标文件的过程
相对路径有以下三种情况：
• 同级目录：直接写：目标文件名字
• 下级目录：直接写：文件夹名/目标文件名字
• 上级目录：直接下： …/目标文件名字
➢ VSCode中路径的快捷操作？
• 同级和下级目录： ./ 之后选择即可
• 上级目录： …/ 之后选择即可

3.音频标签

➢ 场景：在页面中插入音频
➢ 代码: <audio src=" " controls></audio>
➢ 常见属性：

➢ 注意点：
• 音频标签目前支持三种格式： MP3、 Wav、 Ogg

4.视频标签

➢ 场景：在页面中插入视频
➢ 代码: <video src="" controls></video>
➢ 常见属性：

➢ 注意点：
• 视频标签目前支持三种格式： MP4 、 WebM 、 Ogg

四.链接标签

1.链接标签的介绍
➢ 场景：点击之后，从一个页面跳转到另一个页面
➢ 称呼： a标签、超链接、锚链接
➢ 代码：<a href="login.html">
➢ 特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
2. 链接标签的href属性
➢ 属性名： href
➢ 属性值：点击之后跳转去哪一个网页（目标网页的路径）
• 外部链接<a href="https://www.baidu.com"></a>
• 内部链接：<a href="login.html">
3. 链接标签的显示特点(了解)
➢ 显示特点：
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
4. 链接标签的target属性
➢ 属性名： target
➢ 属性值：目标网页的打开形式

5.空链接（拓展补充）
➢ 代码：<a href="#">空链接</a>
➢ 功能：
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置

五.列表标签

列表的应用场景
（1）场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
（2）特点：按照行的方式，整齐显示内容
（3）种类：无序列表、有序列表、自定义列表

1.无序列表

（1）场景：在网页中表示一组无顺序之分的列表，如：新闻列表、排行榜、账单等
（2） 标签组成：

（3）显示特点：
• 列表的每一项前默认显示圆点标识

（4）注意点：
①ul标签中只允许包含li标签
②li标签可以包含任意内容

2.有序列表

（1）场景：在网页中表示一组有顺序之分的列表，如：排行榜。
（2）标签组成：

（3）显示特点：
• 列表的每一项前默认显示序号标识

（4）注意点：
①ol标签中只允许包含li标签
②li标签可以包含任意内容

3.自定义列表

（1）场景：在网页的底部导航中通常会使用自定义列表实现。
（2） 标签组成：

（3） 显示特点：
• dd前会默认显示缩进效果

（4）注意点：
①dl标签中只允许包含dt/dd标签
②dt/dd标签可以包含任意内容

六.表格标签

1.表格的基本标签
（1） 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
（2） 基本标签：

（3） 注意点：
• 标签的嵌套关系：table > tr > td

2.表格的相关属性
（1）场景：设置表格基本展示效果
（2） 常见相关属性：

（3） 注意点：
• 实际开发时针对于样式效果推荐用CSS设置
3.表格标题和表头单元格标签
（1） 场景：在表格中表示整体大标题和一列小标题

（2） 其他标签：

（3） 注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）
4.表格的结构标签
（1） 场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
（2） 结构标签：


（3）注意点：
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略
5.合并单元格
（1）合并单元格步骤：
① 明确合并哪几个单元格
② 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
③ 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

注意点：
• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

七.表单标签

1.input标签

（1）场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
（2）标签名：input
• input标签可以通过type属性值的不同，展示不同效果
（3） type属性值：

1）input系列标签-文本框
（1）场景：在网页中显示输入单行文本的表单控件
（2）type属性值：text
（3）常用属性：

（拓展）value属性和name属性作用介绍
（1）value属性：用户输入的内容，提交之后会发送给后端服务器
（2）name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
（3）后端接收到数据的格式是：name的属性值 = value的属性值
2）input系列标签-密码框
（1）场景：在网页中显示输入密码的表单控件
（2）type属性值：password
（3）常用属性（同文本框）：

注意点：
• type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
3）input系列标签-单选框
（1）场景：在网页中显示多选一的单选表单控件
（2）type属性值：radio
（3）常用属性

注意点：
• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
4）input系列标签-复选框
（1）场景：在网页中显示多选多的多选表单控件
（2）type属性值：checkbox
（3）常用属性（同单选框）

5）input系列标签-文件选择
（1）场景：在网页中显示文件选择的表单控件
（2）type属性值：file
（3）常用属性：

6）input系列标签-按钮
（1）场景：在网页中显示不同功能的按钮表单控件
（2）type属性值：

（3）注意点：
• 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可

2.button按钮标签

（1）场景：在网页中显示用户点击的按钮
（2）标签名：button
（3）type属性值（同input的按钮系列）：

注意点：
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等

3.select下拉菜单标签

（1）场景：在网页中提供多个选择项的下拉菜单表单控件
（2）标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项
（3）常见属性：
• selected：下拉菜单的默认选中

4.textarea文本域标签

（1）场景：在网页中提供可输入多行文本的表单控件
（1）标签名：textarea
（2）常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
（4）注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置

5.label标签

（1）场景：常用于绑定内容与表单标签的关系
（2）标签名：label
（3）使用方法①：
1）使用label标签把内容（如：文本）包裹起来
2）在表单标签上添加id属性
3）在label标签的for属性中设置对应的id属性值
Ø 使用方法②：
1）直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2）需要把label标签的for属性删除即可

八.语义化标签

1.没有语义的布局标签-div和span
（1）场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
（2）div标签：一行只显示一个（独占一行）
（3）span标签：一行可以显示多个
2.有语义的布局标签（了解）
（1）场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
（2）标签：

（3）注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义