Question

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}