【CSS 学习总结】第一篇 - HTML 的语义化

一，前言

本篇，主要介绍与 CSS 相关的 HTML 语义化知识；

选用更加符合语义的 HTML 标签，能够使网站在各方面效果得到提升；

二，什么是 HTML

• HTML：HyperText Markup Language 超文本标记语言；

• HTML 是一种用于创建网页的标准标记语言（标记语言：用来对"树"进行标记）

三，HTML 常用标签汇总

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；

• 实体: &lt、&gt、&copy、&nbsp ...；

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 等；