HTML5与CSS3基础教程:标题在不同浏览器中显示相同大小

摘要:HTML5的另一个新元素便是article,在不同的浏览器中,article中标题的字号可能不同。可以应用CSS使它们在不同的浏览器中显示相同的大小。

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

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

3.8 创建文章

HTML5的另一个新元素便是article,如图3.8.1和图3.8.2所示。你已经见过一些用到该元素的示例。现在,让我们深入了解一下它的作用。

1.jpg

图3.8.1为了精简,我对文章内容进行了缩写,略去了与上一节相同的nav代码。可以在本书网站查看完整的代码(www.htmlcssvqs.com/8ed/structure-final)。尽管在这个例子里只有段落和图像,但article可以包含各种类型的内容

2.jpg

图3.8.2现在,页面有了header、nav、main和article元素,以及它们各自的内容。在不同的浏览器中,article中标题的字号可能不同。可以应用CSS使它们在不同的浏览器中显示相同的大小(参见第10章)


根据其称,你大概会猜想article用于包含像报纸文章一样的内容。不过,article并不局限于此。在HTML5中,“文章”(article)并非这个词本来的意思。

HTML5对该元素的定义如下:

article元素表示文档、页面、应用或网站中一个独立的容器,原则上是可独立分配或可再用的,就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小工具,或者任何其他独立的内容项。

其他article的例子包括电影或音乐评论、案例研究、产品描述,等等。你或许惊讶于它还可以是交互式的小部件或小工具,不过这些确实是独立的、可再分配的内容项。

创建文章的步骤

(1) 输入<article>。

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

(3) 输入</article>。

可以将article嵌套在另一个article中,只要里面的article与外面的article是部分与整体的关系。下文提供了这样的一个例子。

* 一个页面可以有多个article元素(也可以没有)。例如,博客的主页通常包括几篇最新的文章,其中每一篇都是其自身的article。

* 一个article可以包含一个或多个section元素(下一节会介绍该元素)。在article里包含独立的h1~h6也是很好的做法,就像示例代码那样。

3.jpg