HTML5与CSS3基础教程:用section定义区块 它与div不同

摘要:一般的,section定义成“通用的”区块,但不要将它与div元素混淆。从语义上讲,section标记的是页面中的特定区域,而div则不传达任何语义。

作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉
第六节:标记导航 通过nav指向任意页面内容

3.9 定义区块

另一个HTML5的新元素是section,参见图3.9.1至图3.9.3。HTML5对该元素的部分定义如下:

section元素代表文档或应用的一个一般的区块。在这里,section是具有相似主题的一组内容,通常包含一个标题。

section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。

尽管我们将section定义成“通用的”区块,但不要将它与div元素(参见3.12节)混淆。从语义上讲,section标记的是页面中的特定区域,而div则不传达任何语义。

1.jpg

图3.9.1

几乎任何新闻网站都会对新闻进行分类。每个类别都可以标记为一个section

2.jpg

图3.9.2 这个例子是在HTML5规范中一个例子的基础上修改而成的,其中,section元素用于标记一次毕业活动安排中的不同部分

3.jpg

图3.9.3 跟本章很多其他的元素一样,section并不影响页面的显示。这里用数字编号展示各个条目是因为图3.9.2中使用了有序列表(ol)。关于列表,参见第15章

定义区块的步骤

(1) 输入<section>。

(2) 输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。

(3) 输入</section>。

* 如果只是出于添加样式的原因要对内容添加一个容器,应使用div而不是section。

* 可以将section嵌套在article里,从而显式地标出报告、故事、手册等文章的不同部分或不同章节。例如,可以在本章所示Antoni Gaudí的例子中使用section元素,即使用一个section包围La Sagrada Família这个h2及相关的段落,用另一个section包围Park Guell这个h2及相关的段落。

4.jpg