2.2 语义化
最后更新于:2022-04-01 03:31:32
# 语义化
没有 `CSS` 的 `HTML` 是一个语义系统而不是 UI 系统。
通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套, 裤子,裙子,内裤等,各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝
此外语义化的 `HTML` 结构,有助于机器(搜索引擎)理解,另一方面多人协作时,能迅速了解开发者意图。
## 常见标签语义
| 标签 | 语义 |
| --- | --- |
| `<p>` | 段落 |
| `<h1> <h2> <h3> ...` | 标题 |
| `<ul>` | 无序列表 |
| `<ol>` | 有序列表 |
| `<blockquote>` | 大段引用 |
| `<cite>` | 一般引用 |
| `<b>` | 为样式加粗而加粗 |
| `<storng>` | 为强调内容而加粗 |
| `<i>` | 为样式倾斜而倾斜 |
| `<em>` | 为强调内容而倾斜 |
| `code` | 代码标识 |
| `abbr` | 缩写 |
## 示例
将你构建的页面当作一本书,将标签的语义对应的其功能和含义;
* 书的名称:`<h1>`
* 书的每个章节标题: `<h2>`
* 章节内的文章标题: `<h3>`
* 小标题/副标题: `<h4> <h5> <h6>`
* 章节的段落: `<p>`
更多语义化的内容,参考 sofish 写的文章 [这样去写你的 HTML](http://wenku.baidu.com/view/0a8d3774f242336c1eb95ea9.html)。