首页 >web前端 >H5教程 >h5中main元素的实例详解

h5中main元素的实例详解

零下一度
零下一度原创
2017-05-31 15:41:423497浏览

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

  W3C 规范

  61b85035edf2b42260fdb5632dc5728a 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C 规范将 61b85035edf2b42260fdb5632dc5728a 描述为 :

文档或应用程序的主要内容。主内容区域由与文档的中心主题或应用的核心功能的直接相关或扩展的内容组成。

  自从 61b85035edf2b42260fdb5632dc5728a 元素包含在 HTML 规定里之后,6c04bd5ca3fcae76e30b72ad730ca86d 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

  细节

  使用 61b85035edf2b42260fdb5632dc5728a 元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。

  按照规格,如果你在一个文档中试图使用多个 61b85035edf2b42260fdb5632dc5728a 标签,那么 W3C validator 会抛出错误。

  61b85035edf2b42260fdb5632dc5728a 元素的另外一个规定是,它不能作为 23c3de37f2f9ebcb477c4a90aac6fffd, 1aa9e5d373740b65a0cc8f0a02150c53, 15221ee8cba27fc1d7a26c47a001eb9b, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9 的子元素节点。

  使用

  就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 61b85035edf2b42260fdb5632dc5728a ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

    main {display:block;}

  有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。

<script type="text/javascript">document.createElement(&#39;main&#39;);</script>

  当然了,你还可以使用 html5shiv.

  使用 61b85035edf2b42260fdb5632dc5728a 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 e388a4556c0f65e1904146cc1a846bee 元素。

  所以,在实践中它应该是什么样子呢?下面是使用 61b85035edf2b42260fdb5632dc5728a 元素之前的文档结构。

    <header>Header</header>
    <p id="content">Main Content</p>
    <footer>Footer</footer>

  下面使用 61b85035edf2b42260fdb5632dc5728a 元素改写文档。

    <header>Header</header>
    <main id="content">Main Content</main>
    <footer>Footer</footer>

  好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

  总结

  正如你所见的,使用 61b85035edf2b42260fdb5632dc5728a 元素是超级简单的,只需要话费几分钟的时间,所以现在真的到了将 61b85035edf2b42260fdb5632dc5728a 带入到网站开发的过程中了。

以上是h5中main元素的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn