h5中main元素的实例详解_html5

html5

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了h5中main元素的实例详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

　早在 2013 年，<;m ain> 元素就被正式添加到 W3C HTML 规范中，到目前位置，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么，下面就开始吧。

h5中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(&#39;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> 带入到网站开发的过程中了。

以上就是h5中main元素的实例详解的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的h5中main元素的实例详解全部内容，希望文章能够帮你解决h5中main元素的实例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：h5

猜你在找的html5相关文章

全站导航更多

最新html5教程

热门html5教程