「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

前情回归

• 语义化标签的使用可以很好的组织我们的页面，使页面代码更加优雅，且易于维护
• 并且使用语义化标签所构建的页面，在一些特殊的无障碍阅读应用中可以被更好的被解析
• 在上一篇文章中，我们有提到一些语义化标签在 wiki 页面中的使用
• 由于篇幅的限制，我们现在继续介绍余下的常用语义化标签

如何使用语义化标签

figure && figcaption

• 单词意思：
  • figure：图形、插图
  • figcation：字幕、（图片、漫画等的）说明文字
• 标签意思：
  • figure：它通常表示的是一段独立的引用单元，可以是图片、表哥、代码块等
  • figcation：它通常和 figure 一起搭配使用，表示其引用图片的说明信息等

nav && ul && ol

• 单词意思：nav 一看就是导航的意思
• 标签意思：
  • nav: 通常用来包含导航链接，与之一起搭配使用的还有我们常用的 ul、ol
  • ul: 可以包含多个 li 标签，表示的是无序列表
  • ol: 同样可以包含多个 li 标签，表示的是有序列表，就如下图所示，列表是有编号的
• 让我们来看它在 wiki 页面中的用法，如下面图中红框所示：

pre

• 单词意思：预先、之前
• 标签意思：该标签表示包裹的内容的样式是已经编排好的，不需要浏览器再次编排。如果该标签包裹的内容，中包含大量空格或换行符，也都会显示出来。
• 我们知道，正常情况下，浏览器渲染页面是会合并多个空格，如果我们如果不想要浏览器的这个操作，就可以使用这个标签了
• 让我们来看它在 wiki 页面中的用法，如下面图中红框所示：

sub && sup

• sub 表示下标，sup 表示上标
• 让我们来看它在 wiki 页面中的用法，如下面图中红框所示：

mark

• 单词意思：标记、记号、符号
• 标签意思：这个标签通常是用来表示内容的突出，但是与前面提到的 strong 标签有区别，mark 标签常用来突出语浏览器或者搜索引擎搜索到的结果中的关键字，而页面中的内容突出应当使用 strong 标签
• 下图是我在 wiki 页面中搜索某个关键字时的场景，相信大家不陌生

footer && header

• 单词意思：
  • footer: 底部、页脚
  • header: 头部
• 标签意思：
  • footer：通常用来表示一个文档内容的页脚信息，如版权信息，文档相关的应用信息等
  • header：通常用来表示页面中需要放在顶部的一些信息，如搜索框，用户信息甚至是 Logo
• 让我们来看它在 wiki 页面中的用法，如下面图中红框所示：

section

• 单词意思：小节，部分，段
• 标签意思：相对来说，它包含的内容也是一段独立的内容，它的语义化相对弱一些，通常可以搭配一个标题来结合使用
• 让我们来看它在 wiki 页面中的用法，如下面图中红框所示：

小结

• HTML5 中新增的语义化标签肯定不是这两篇文章就能完全罗列的

• 这两片文章是笔者认为较为常用常见的一些语义化标签，笔者也是一边学习一边理解记录，这篇文章会一直保持更新

• 如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰