Organization Content
[TOC]
对相关内容进行有效的组织，能够使文档更加结构化和具有含义。本章中的元素大多数是流元素，只有一个例外：a 元素。改元素的特殊之处在于其所属元素类型取决于其包含的内容。
为什么要对文章内容进行分组
HTML要求将连在一起的几个空白字符折算为一个空格。一般而言，这种做法是有道理的，因为可以吧 HTML 文档的布局与文档内容在浏览器窗口中的布局分开。这样的话，想要是文当的内容具有结构和条理，就需要使用 HTML 进行组织。
元素一览
| 元素 | 说明 | 类型 | 新增或有无变化 |
|---|---|---|---|
| div | 一个没有任何既定语义的通用元素，是span元素在流元素中的对应物。 | 流 | 无变化 |
| p | 段落 | 流 | 有变化 |
| hr | 表示段落级别的主题转换 | 流 | 有变化 |
| blockquote | 表示引自它处的大段内容 | 流 | 无变化 |
| dl | 表示包含一系列术语和定义的说明列表 | 流 | 无变化 |
| dt | 用在 dl 之中，表示术语 | 无 | 无变化 |
| dd | 用在 dl 之中，表示定义 | 无 | 无变化 |
| figure | 表示图片 | 流 | 新增 |
| figcaption | 表示figure元素的标题 | 无 | 新增 |
| ul | 无序列表 | 流 | 有变化 |
| ol | 有序列表 | 流 | 有变化 |
| li | 用在 ul、ol、menu元素中，表示列表项 | 无 | 有变化 |
| pre | 表示其格式应被保留的内容 | 流 | 无变化 |
p 建立段落
p 元素代表段落。p 元素内部的连续多个空白符会被显示成一个空格。
| 元素 | p |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流的元素 |
| 局部属性 | 短语内容 |
| 内容 | 短语内容。 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 废弃align属性 |
| 默认样式 | p {display: block; margin: 1em 0; } |
div 找不到对应含义元素时使用
div 没有任何含义，找不到合适的元素时可以使用使用这个元素建立结构并赋予其含义，它的含义是有全局属性提供的，通常是class或id属性。
不在万不得已的情况下最好不要使用div元素，你应该优先考虑那些具有语义的元素。div本身没有任何问题，不过任何情况下，我们在编写HTML5文档时都应该牢记语义问题。
| 元素 | div |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | 无 |
| 内容 | 流内容 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 无。不过在使用该标签之前，应先考虑一下HTML5中新增的article和section等元素。 |
| 默认样式 | div {display: block; } |
div 元素相当于流元素中的span，它没有任何含义，因此可以在文档中建立自定义的结构。建立自定义结构的缺点在于其含义只限于网页的设计者，别人并不了解。具有自定义结构的HTML文档由第三方处理或设计样式时可能会遇到麻烦。
pre 保留文档的编辑格式
pre 元素可以改变浏览器处理内容的方式，组织合并空白字符，让源文档助攻的格式得以保留。这在文档中有一部分内容的原始格式意义重大时可以派上用场。除此之外，最好不要使用这个元素，这是因为它消弱了使用元素和样式来控制呈现结果的灵活性。
pre 元素和 code 元素搭配起来尤其有用
| 元素 | pre |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | 无 |
| 内容 | 短语内容 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 无。 |
| 默认样式 | pre {display: block; font-family: monespace; white-space: pre; margin: 1em 0; } |
blockquote 引用它处内容
该元素与标记文字的 q 元素类似，但通常用在引用的内容更多的情况下。
| 元素 | blockquote |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | cite 用于指定所引用内容的来源 |
| 内容 | 流内容 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | 无。 |
| 默认样式 | blockquote {display: block; margin: 1em 40px; } |
hr 添加主题分割
hr 元素代表段落级别的主题分隔（paragraph-level thematic break），这又是一个在语义和呈现分离要求驱使下冒出来的奇特术语。在HTML4中，hr元素代表一条水平线。在HTML5中，hr代表着向另一个相关主题的转换，它在HTML5中的默认样式是一条贯穿页面的直线。
| 元素 | hr |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | 无 |
| 内容 | 无 |
| 标签用法 | 虚元素 |
| html新增 | H4中hr值具有呈现性质，H5中，其呈现已被降格为默认样式。此外，align、width、noshade、size、color等属性被废弃。 |
| HTML5中变化 | 无。 |
| 默认样式 | hr {display: block; margin: o,5em auto; border-style:inset; border-with: 1px; } |
- 故事中地点的改变
- 工具书中主题的改变
ul ol li 将内容组织为列表。
ol 有序列表 ul 无序列表
| 元素 | ol, ul |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | ol: start、reverset、type; ul 无属性 |
| 内容 | 零个或多个li元素 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| ol HTML5中变化 | everset属性是H5中新增的，H4不赞成使用的start和type属性在H5中恢复，但却有了语义方面的含义。compact属性不再使用 |
| ul HTML5中变化 | type 和 compact 属性被废弃 |
| 默认样式 | ol { display: block; list-style-type: decimal; margin: 1em 0; padding-start: 40px; } |
| 默认样式 | ul { display: block; list-style-type: disc; margin: 1em 0; padding-start: 40px; } |
start 可以设置列表首项的编号值。如果不设置这个属性，那么首项的编号为1。type属性用来设定显示在各列表项旁的编号的类型。
type 类型
- 1: 十进制数（默认）
- a: 小写拉丁字母
- A: 大写拉丁字母
- i: 小写罗马字母
- I: 大写罗马字母
如果使用了 reversed 属性，那么列表编号将采用降序。
列表也可以嵌套，以显示目录的效果。
li 列表项
| 元素 | li |
|---|---|
| 元素类型 | 无 |
| 父元素 | ul、ol、menu |
| 局部属性 | value（仅用于父元素为ol元素时），用于生成不连续的有序列表 |
| 内容 | 流内容 |
| 标签用法 | 双标签 |
| html新增 | 否 |
| HTML5中变化 | HTML4 中不赞成使用的value属性在HTML5中恢复 |
| 默认样式 | blockquote {display: list-item; } |
dl、dt、dd 说明列表
用于显示一系列术语/说明集合。
| 元素 | 说明 | 默认样式 |
|---|---|---|
| dl | 说明列表 | dl { display: block; margin: 1em 0; } |
| dt | 说明列表中的术语 | dt { display: block; } |
| dd | 说明列表中的定义 | dd { display: block; margin-start: 40px; } |
一个dt可以搭配多个dd，这样就能为一个术语提供多个定义。
figure 插图
一个独立的内容单元，可带标题。通常作为一个整体被文档主题引用，把它从从文档主题中删除也不会影响文档的意思。插图不限于传统意义上的图片——某种图表或图示。
| 元素 | figure |
|---|---|
| 元素类型 | 流 |
| 父元素 | 任何可以包含流元素的元素 |
| 局部属性 | 无 |
| 内容 | 流内容，还可以包含一个figcaption元素 |
| 标签用法 | 双标签 |
| html新增 | 是 |
| 默认样式 | figure {display: block; margin: 1em 40px} |
| 元素 | figcaption |
|---|---|
| 元素类型 | 无 |
| 父元素 | figure。 必须是figure的第一个或最后一个子元素。 |
| 局部属性 | 无 |
| 内容 | 流内容 |
| 标签用法 | 双标签 |
| html新增 | 是 |
| 默认样式 | figcaption {display: block; margin: 1em 40px} |