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,将会在第一时间进行处理!
推荐阅读
-
HTML5与CSS3基础教程:标记页面主要区域_html/css_WEB-ITnose
-
HTML5与CSS3基础教程:标记页面主要区域_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose
-
HTML5与CSS3基础教程第八版学习笔记11~15章_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Four Day_html/css_WEB-ITnose
-
HTML5与CSS3基础教程第八版学习笔记16-21章_html/css_WEB-ITnose
-
HTML5与CSS3基础教程第八版学习笔记11~15章_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Four Day_html/css_WEB-ITnose
-
HTML5与CSS3基础教程第八版学习笔记7~10章_html/css_WEB-ITnose
-
HTML5与CSS3基础教程:普通页面构成和创建页眉_html/css_WEB-ITnose