[TOC=2,3]
没有 `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](https://wenku.baidu.com/view/0a8d3774f242336c1eb95ea9.html)。