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）！

Label berkaitan：

HTML5 ，语义化，main

sumber：php.cn

Artikel sebelumnya：使用HMTL5 API监控前端性能 Artikel seterusnya：关于HTML5和CSS3的几个“新增”

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• 从零开始打造自己的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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2309

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2443

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

2058

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1943

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

2008

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• Bagaimana untuk menetapkan nombor halaman ppt
• Sistem oa mana yang lebih baik?
• Perbezaan antara MATE60 dan MATE60PRO
• Bagaimana untuk menangani aksara Cina yang kacau dalam Linux
• Bagaimana untuk menukar fail html kepada fail pdf
• Perbezaan antara timbunan dan timbunan