一、什么是语义化
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。
为什么我们需要语义化？
- 能让页面呈现清晰的结构，易于用户阅读
- 搜索引擎能根据标签来确定上下文和各个关键字的权重，有利于SEO
- 方便如阅读器等其他设备根据语义渲染网页
- 语义化使代码更具可读性，有利于代码的开发与维护。
二、一些基础的语义化标签
标题和段落
在HTML中，我们通常使用<p></p>标签来划分段落
<p>这是一个段落</p>`
通过<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标题标签，
我们可以为文档从主标题到子标题共设定六个等级的标题
示例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题标签为块级元素，会导致文本换行
输出：
列表
有序列表
为了创建无序列表，我们需要
- 用
<ul>标签包裹整个列表 - 用
<li>标签包裹列表中每个元素
示例：
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
</ul>
输出：
- 元素1
- 元素2
- 元素3
- 元素4
有序列表
将无序列表的ul标签改为ol，我们就可以得到有序列表
示例：
<ol>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
输出：
- 元素1
- 元素2
- 元素3
- 元素4
嵌套列表
有序列表和无序列表可以相互嵌套
示例：
<ul>
<li>无序列表
<ol>
<li>有序列表</li>
</ol>
</li>
</ul>
输出：
- 无序列表
- 有序列表
重点与强调
标记文本的语义元素
利用用<em>、<strong>、<mark>等元素，我们可以将内容标记为斜体、粗体和高亮
<em>斜体示例</em><strong>粗体</strong><mark>高亮</mark>
输出：
斜体示例 粗体高亮
这些语义元素都含有特定语义如
- 使用
<em>表示强调或重读。 - 使用
<strong>表示重要性。 - 使用
<mark>表示相关性。 - 使用
<cite>标记著作名，如一本书、剧本或是一首歌。 - 使用
<dfn>标记术语的定义实例。
表象元素
在HTML发展早期，一些标记文本内容的元素并不包含语义，这些无语义元素又被称为表象元素
表象元素仅仅影响文本呈现形式，不包含任何语义
利用<b>,<i>和<u>元素，我们可以将内容标记为粗体、斜体和下划线
<b>粗体示例</b><i>斜体示例</i><u>下划线</u>
输出：
粗体示例斜体示例
<u>元素需结合CSS属性使用
上述元素在HTML5中获得了新的语义，但由于有更优的替代选项，它们仍然应该被避免使用。
小结
通过学习一些基础的语义化标签，我们能够为文本内容附加上一定的语义，来便于机器识别文本内容的类型并加一分类，极大的便利了搜索引擎检索或者阅读器排版内容。恰当地使用这些标签，不仅能够使得页面层次清晰美观，也能够增加代码的可读性，便于代码的开发与维护。
