06_组织内容

本章介绍的是用来组织相关内容的HTML元素, 它们基于文档内容更多的结构和含义

为什么要对内容分组

HTML要求浏览器将连在一起的几个空白字符折算为一个空格, 一般而言, 这种做法是有道理的, 因为可以把HTML文档的布局与文档内容在浏览器窗口中的布局分开

建立段落

p元素代表段落, 段落包含一个或者多个相关句子, 这些句子围绕的是一个观点或者论点, 组成一个段落也可以涉及多个论点, 但它们都有一些共同的主题

使用div元素

div元素没有具体的含义, 找不到其他恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含义, 它的含义是有全局属性提供的, 通常用的是class或者id属性

警告: 不再万不得已的情况下最好不要使用div元素, 你应该优先考虑那些语义重要的元素, 使用div元素之前, 应该先想想HTML5新增的那些元素

div元素相当于文本元素中的span, 他们有具体的含义, 因此可以用来在文档中添加自定义结构, 建立自定义结构的缺点在于其含义只限于设计者的网页或者web应用系统, 别人并不了解, 具有自定义结构的HTML文档由第三方那个处理或者涉及样式时可能会遇到麻烦

使用预先编排好格式的内容

pre元素可以改变浏览器处理内容的方式, 阻止合并空白字符, 让源文档中的格式得以保留, 这在文档中有一部分内容的原始格式意义重大时可以排上用场, 除此之外最好不要使用这个元素, 这是因为它削弱了通过使用元素和样式来控制呈现结果这一机制的灵活性

pre元素元素根code元素搭配在一起的时候尤为有用, 编程语言中的的格式通常都很重要, 不宜用元素重新编排其格式

引用它处内容

blockquote元素表示引自它处的一片内容, 该元素的用途与q元素有些类似, 但是通常要在引用的内容加多的情况下使用

该元素的cite属性可以用来指定所引用的内容的来源

浏览器会忽略blockquote元素中内容的格式, 要在引用内容中建立结构, 可以使用一些其他的标签

添加主题分隔

hr元素代表段落级别的主题分隔, 这又是一个在语义和呈现分离要求下冒出来的奇特术语, 在HTML4中hr元素代表一条水平线, 在HTML5中hr元素代表着向另一个相关主题的转换

将内容组织为列表

HTML定义了几个用来生成内容项目列表的元素, 列表的类型有有序列表, 无序列表和说明列表

ol元素

ol元素表示有序列表, 列表项目用li元素表示,

列表元素项目可以通过ol元素定义的属性加以控制, start属性设定列表的列表首项的编号值

type属性用来设定像是在各列表项旁的编号的类型

如果使用reversed属性, 那么列表编号采用降序,

ul元素

ul元素表示无序列表, 与ol元素一致, ul元素中的列表项用li元素表示

无序列表的每个项目前都会显示一个项目符号, 这个符号的样式可以用CSS属性list-style-type控制

li元素

li元素表示列表中的项目, 它可以与ul, ol, menu元素搭配使用

li元素非常简单, 它表示父元素中的一个列表项, 其value属性可以用来生成不连续的有序列表

当浏览器遇到带value的li元素的时候, 会把列表项计数器调为该属性的value值

生成说明列表

说明列表中包含着一系列的术语/说明组合, 定义说明列表要用到三个元素, dl, dt, dd元素, 这些元素没有定义局部属性

注意一下一个dt元素可以搭配多个dd元素

生成定义列表

HTML对列表的支持不像看上去那么简单, 实际上要灵活很多, 结合CSS中counter特性和:before选择器,

这个HTML文档中的列表都是用ul元素生成的无序列表, 因此才可以禁用标准的项目符号并依靠用:before选择器生成的内容

外层列表的编号开始于7, 以2的步长迭增, 用标准的ol元素无法做到, CSS的counter特性用起来有些别扭, 但是非常灵活

使用插图

HTML5是这样定义插图(figure)的: "一个独立的内容单元, 可带标题, 通常作为一个整体被文档的主体引用, 用它从文档主体中删除也不会影响文档", 这个定义相当笼统, 外延不限于传统意义上的插图-某种图表或者图示, 插图用figure元素定义

figure元素可以包含一个figcaption元素, 后者表示插图的标题

此例子用figure元素生成一个将code元素包裹在其中的插图, 还用figcaption元素为其添加一个标题, 注意figcaption元素必须是figure元素的第一个或者最后一个元素