⚡️ HTML5 语义化标签
HTML 中的大部分标签都有自身的语义，例如 <p> 标签表示 paragraph 一个段落， <h1> 标签表示 header1 最高级的标题。
而在实际开发中，如果使用成千上万的 <div> 或者 <span> 来代替语义化标签，会给后期维护增加难度。使用语义结构良好的编码在实际开发中十分重要，利于开发调试和后期维护；利于搜索引擎的优化。
# 标题语义化
h1 ~ h6 是分级标题标签， h 表示「header」。h1~ h6 在 HTML 语义化中占有极其重要的地位。 h1 为最高级的标题，以此往下类推。相对于其他语义化标签，分级标题在搜索引擎优化（即 SEO）中占有相当重要的地位。 在一个页面中，6 个分级标题不需要全部都用上，都是根据需要才用的。
使用标题的分级，需要注意以下方面：
- 一个页面只有一个
h1标签； h1~h6之间不要断层；- 不要使用分级标题的标签来定义样式；
# 图片语义化
<img> 标签中的 alt 属性和 title 属性：
alt属性用于图片描述。并且当图片无法显示时，页面会显示alt中的文字。alt对搜索引擎识别网页中的图片内容起到作用。是<img>标签的必须属性。title属性也用于图片描述，当鼠标指针移到图片上时，会显示title中的内容。是可选属性。
<figure> 和 <figcaption> 元素：用于实现图片加标注的效果，使得页面的语义更加良好，如下🌰：
# 表格语义化
表格常用的三个标签为 <table> 、 <tr> 、 <td> ，为了加强语义化添加了 5 个标签：
| 标签名 | 说明 |
|---|---|
thead | 表头的语义划分标签 |
tbody | 表身 |
tfoot | 表脚 |
caption | 表格标题 |
th | 表头单元格 |
tr | 行 |
td | 表格单元格 |
例子 🌰 ：
# 表单语义化
<label> 标签：用于显示在输入控件旁边的说明文字，即将表单元素与某段说明文字关联起来。例如：
没使用语义化标签前，只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。使用语义化标签 <label> 后，可以点击单选框来选中单选框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。
这就是 label 标签 for 属性的作用。 for 属性使得鼠标单击的范围扩大到 label 元素 上，极大地提高了用户单击的可操作性。使用 name 和 id 两种方式都可以通过 label 中的 for 关联。
fieldset 与 legend 标签：
使实现表单如下效果 🌰 ：
# 其他语义化
换行符语义化：HTML 5 中，W3C 标准规定，
<br/>换行符仅用于在段落标签中的换行，不能用于随便实现换行效果。无序列表：对于列表型的数据的展示，建议使用有序列表或者无序列表，而不是直接使用
<div>标签加上<span>实现。如下：（常用无序列表实现数字外观样式，而不使用有序列表的固定数字样式）
加粗文本和斜体文本效果：通常用于对 SEO 中想要突出某些关键字被识别，可以使用
<strong>标签和<em>标签加强语义化，搜索引擎对这两个标签赋予一定的权重，识别为强调的、重要的文本。*（一般情况下会去除
<strong>和<em>标签的默认样式，重新定义这两个标签的样式，但是不会影响这两个标签的语义）<del>和<ins>标签：在 HTML 中，这两个标签配合使用，如下例子。（一般情况会重新定义这两个标签的默认样式）图片的语义化： 要在页面显示一张图片，使用两种方法，一种是使用
<img>标签，另一种是通过 CSS 添加背景图片属性。对于实际开发，要想要进行 SEO，要被搜索引擎识别的图片最好使用<img>标签插入；如果仅仅是作为页面的修饰作用，则可直接使用背景图片属性实现即可
# 总结
对于 HMTL 5 中的语义化，应该注意：
应该舍弃仅仅为了定义样式而存在的 HTML 标签，要改变样式应该通过 CSS 样式实现，而不要使用 HTML 标签。
在不同的页面部分，优先使用正确的语义化标签，如果没有语义标签可用，才去考虑
<div>和<span>等无语义标签。