早在 2013 年,<main> 元素就被正式添加到 W3C HTML 规范中,到目前位置,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么,下面就开始吧。
<main> 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C 规范将 <main> 描述为 :
文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。
自从 <main> 元素包含在 HTML 规定里之后,<body> 元素就还原成了它在 HTML4 中的定义。
The body element represents the content of the document.
使用 <main> 元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。
按照规格,如果你在一个文档中试图使用多个 <main> 标签,那么 W3C validator 会抛出错误。
<main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。
就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。
main {display:block;}
有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。
<script type="text/javascript">document.createElement('main');</script>
当然了,你还可以使用 html5shiv.
使用 <main> 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 <p> 元素。
所以,在实践中它应该是什么样子呢?下面是使用 <main> 元素之前的文档结构。
<header>Header</header> <p id="content">Main Content</p> <footer>Footer</footer>
下面使用 <main> 元素改写文档。
<header>Header</header> <main id="content">Main Content</main> <footer>Footer</footer>
好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。
正如你所见的,使用 <main> 元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将 <main> 带入到网站开发的过程中了。
作者:零下一度
一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上html manifes...
本篇文章给大家介绍一下CSS中的计数函数:counter()、counters()。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所...
css让文字成排显示的方法:1、使用【writing-mode】属性,语法为【writing-mode:lr-tb或writing-mode:tb-rl】;2、对文字对象宽...
jquery字符串转数字的方法:1、使用parseInt()函数解析字符串返回一个整数,语法为“parseInt(字符串)”;2、使用parseFloat()函...
jquery中能够实现元素高度变化的函数:1、height(),可设置匹配元素的高度,语法“$(selector).height(高度值)”;2、css(),语...