HTML5 语义化 - main

　早在 2013 年，

元素就被正式添加到 W3C HTML规范中，到目前位置，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用

元素了。那么，下面就开始吧。

　　W3C 规范

　　

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

描述为 ：

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

　　自从

元素包含在 HTML 规定里之后， 元素就还原成了它在 HTML4 中的定义。

The body element represents the content of the document.

　　细节

　　使用

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

　　按照规格，如果你在一个文档中试图使用多个

标签，那么 W3C validator 会抛出错误。

　　

元素的另外一个规定是，它不能作为

,

,

,

,

的子元素节点。

　　使用

　　就像其它的 HTML5 新元素一样，并不是所有的浏览器都能够识别出

，并且给它加上预设的样式，你可能需要在自己的 CSS文件中将它设置为块级元素。

   main {display:block;}

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

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

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

　　使用

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

元素。

　　所以，在实践中它应该是什么样子呢？下面是使用

元素之前的文档结构。

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

　　下面使用

元素改写文档。

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

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

　　总结

　　正如你所见的，使用

元素是超级简单的，只需要话费几分钟的时间，所以现在真的到了将

带入到网站开发的过程中了。

以上就是HTML5 语义化 - main的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关标签：

HTML5 ，语义化，main

来源：php.cn

上一篇：使用HMTL5 API监控前端性能 下一篇：关于HTML5和CSS3的几个“新增”

本站声明

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

作者最新文章

• 从零开始打造自己的PHP框架的视频资料
  2023-03-15 16:54:01
• PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析
  2023-03-15 12:26:02
• php中关于IMAP如何收取邮件的方法介绍
  2023-03-14 18:58:01
• php如何快速实现数组去重的实例
  2023-03-14 11:30:01
• html中关于<a>标签的全部属性的使用总结
  1970-01-01 08:00:00
• php基础知识总结（新手入门必备）
  2023-03-16 15:20:01
• JavaScript中typeof的使用方法介绍
  1970-01-01 08:00:00
• JavaScript中confirm()方法的使用介绍
  1970-01-01 08:00:00
• HTML5 Placeholder属性的详情介绍
  1970-01-01 08:00:00
• ReactJS中表单的单选多选与反选的实现方法
  1970-01-01 08:00:00

最新问题

使用 <math> 标签编写化学方程式在语义上正确吗？ 我一直在使用元素在HTML文件中编写化学方程式。例如，要显示MnSO4，我会输入：<math><mi>M</mi><mi>n<...

来自于 2023-09-03 22:02:28

0

1

266

为什么选择HTML5语义化标签而非div标签？ 为什么要使用HTML5语义化标签，如headers、section、nav和article，而不是简单地使用div并将其设置为首选的css？我创建了一个网页并使用了这些标签，但它们...

来自于 2023-08-22 23:00:37

0

2

220

只需粘出关键代码并加以描述即可 　　在提问的时候，适当使用一些小技巧，会让老师快速get到你的问题在哪里，这样会使问题更快被解答喔~　　提问技巧　　标题：简洁、易懂，完整表达主题；避免无意义、模糊、口语化标题；　...

来自于 2017-09-08 01:12:15

0

1

1743

mysql - 数据库设计( scheme 设计 ), 应该极力避免 NULL 吗? 实际现象 了解到: NULL 语义不清晰 query 时不好优化 如果表示空值, 可以有其他的替代方式( 逻辑上 ) VARCHAR(100) NOT NULL DEFAULT '...

来自于 2017-05-18 10:54:25

0

2

493

java - 未实例化的静态对象也能调用类中的非静态方法吗？ 有一个很常见的代码：System.out.println，这是再常见不过的输出语句，但是学了一段时间突然想起去看了下源码，下面是源码： {代码...} out是在System类下定...

来自于 2017-05-17 10:07:52

0

5

455

相关专题

更多>

• html5动画制作有哪些制作方法
• HTML与HTML5的区别
• math.random函数用法
• ipv4和ipv6的区别
• usb2.0和3.0的速度区别
• 惠普笔记本声卡驱动
• printf用法大全
• pm是什么意思