「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」。
一，前言
本篇，主要介绍与 CSS 相关的 HTML 语义化知识；
选用更加符合语义的 HTML 标签，能够使网站在各方面效果得到提升；
二，什么是 HTML
HTML：HyperText Markup Language 超文本标记语言；
HTML 是一种用于创建网页的标准标记语言（标记语言：用来对"树"进行标记）
三，HTML 常用标签汇总
1，HTML4 常用标签汇总
- 基本文档：
html、head、body ...； - 基本标签:
h1 ~ h6、p、br、hr ...； - 文本格式化：
strong、b、em、i、small、strong、del、sub、sup ...； - 链接:
a、link； - 区块:
div、span； - 图片:
img、map、area； - 列表:
ul、li；ol、li；dl、dt、dd； - 表格：
table、caption、th、tr、td、thead、tbody、tfoot； - 表单:
form、input、select option、textarea、button、label； - 框架：
iframe； - 实体:
<、>、©、  ...；
2，HTML5 常用标签汇总
- 图形新元素：
canvas； - 新多媒体元素:
audio、video、source、embed、track； - 新表单元素:
deatalist、keygen、output； - 新的语义和结构元素:
article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr；
四，什么是语义化
- 对文本内容的结构化（内容语义化）；
- 使用更符合语义的标签（代码语义化）；
- 便于开发者之间的协作：阅读、维护，写出更优雅的代码；
- 同时，让浏览器爬虫、其他辅助技术能够更好的进行解析；
一句话总结：用正确的标签做正确的事；
案例：
strong和b标签均为加粗，在样式效果上是一样的；但是，加粗需要选用表示"强调"的 strong；
五，语义化的好处
通过使用语义恰当的 HTML 标签，让页面具有良好的结构与含义，能够有效提高以下效果：
- 可访问性：能够帮助辅助技术更好的阅读和转译网页，利于无障碍阅读；
- 可检索性：良好的代码结构和语义，有利于 SEO 优化，能够提高搜索引擎的有效爬取，提高网站流量；
- 国际化：选用语义化标签，能够让各国开发者更容易理解网页的结构；
- 团队协作：减少网页开发的差异性，使其他开发者更快地了解网页的结构，便于网站开发、维护效率；
语义化的好处:
- 1，有利于 SEO 优化；
- 2，在样式丢失的情况下，能够更好的呈现页面效果；
- 3，能够更好的支持各类终端，如：无障碍阅读、有声小说等；
- 4，团队遵循 W3C 统一开发标准，有效降低编码差异，提升团队协作效率；
案例：网站 logo 使用 div 和 h1 标签效果差异不大，但更推荐适应 h1 标签；
六，结尾
本篇，简单介绍了 html 标签和使用语义化的好处；
下一篇，继续介绍 HTML 的文档声明、meta 元信息、Entity 等；
更新日志
- 20230507：格式化文档，添加标签改善可读性；
