HTML5与CSS3基础教程：标记页面主要区域_html/css_WEB-ITnose

摘要：大多数网页都有一些不同的区块，如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接，等等。不过，一个页面只有一个部分代表其主要内容。可以将这样的内容包在main元素中，该元素在一个页面仅使用一次。

作者：图灵教育来源：《HTML5与CSS3基础教程》（第八版）

第三章全部章节：

第一节： “基本HTML结构 开始编写网页”

第二节：创建页面标题

第三节：创建分级标题

第四、五节： 普通页面构成和创建页眉

第六节： 标记导航 通过nav指向任意页面内容

3.7 标记页面的主要区域

大多数网页都有一些不同的区块，如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接，等等。不过，一个页面只有一个部分代表其主要内容。可以将这样的内容包在main元素中，该元素在一个页面仅使用一次（参见图3.7.1和图3.7.2）。

图3.7.1

这是本章反复使用的页面的完整代码的主体结构。你可能还不熟悉其中某些元素，不过随后就会讲到。main元素包围着代表页面主题的内容。最好在main开始标签中加上role="main"（参见最后一条提示）

main元素是HTML5新添加的元素。记住，在一个页面里仅使用一次。

图3.7.2

同p、header、footer等元素一样，main元素的内容显示在新的一行，除此之外不会影响页面的任何样式。（这里显示的布局并不是由main产生的，而是由CSS控制的。）这里为了方便你在应用了样式的完整页面中识别出main，特意为其添加了蓝色的边框

如果创建的是Web应用，则使用main包围其主要的功能。

不能将main放置在article、aside、footer、header或nav元素中。

如图3.7.1所示，role="main"可以帮助屏幕阅读器定位页面的主要区域。要进一步了解这样的ARIA地标，参见3.13节。

原文链接

文章来源于网络，如果有侵犯到您的权益，请及时联系QQ：123464386，将会在第一时间进行处理！