欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-09 22:09:57
...
摘要:大多数网页都有一些不同的区块,如页眉、页脚、包含额外信息的附注栏、指向其他网站的链接,等等。不过,一个页面只有一个部分代表其主要内容。可以将这样的内容包在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,将会在第一时间进行处理!