?
This document uses PHP Chinese website manual Release
HTML Main元素(<main>)呈現(xiàn)了文檔<body>或應(yīng)用的主體部分。主要內(nèi)容區(qū)域 由 和文檔核心主題或應(yīng)用程序中心功能直接相關(guān)與擴(kuò)展的內(nèi)容組成。
您可以<main>在同一頁(yè)面內(nèi)使用多個(gè)元素，這樣做是有道理的。例如，如果您有一個(gè)頁(yè)面呈現(xiàn)多個(gè)文章（每個(gè)文章都包含在一個(gè)<article>元素中，每個(gè)文章都包含一些額外的內(nèi)容（例如用于編輯的工具欄，廣告等等），那么<main>在每篇文章中包含一個(gè)元素以確定該特定文章的主要內(nèi)容。
內(nèi)容類別 | Flow content, palpable content. |
|---|---|
允許的內(nèi)容 | Flow content. |
標(biāo)記遺漏 | 沒(méi)有; 起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父級(jí) | 任何接受流內(nèi)容的元素（WHATWG）。但是，W3C規(guī)范不允許將<main>用作<article>，<aside>，<footer>，<header>或<nav>的后代。 |
允許ARIA角色 | 主要角色默認(rèn)應(yīng)用于<main>，并且演示角色也是允許的。 |
DOM界面 | HTML元素 |
屬性
這個(gè)元素只包含全局屬性。
使用說(shuō)明
<main>元素的內(nèi)容應(yīng)該對(duì)元素包含的文檔或部分是唯一的。除非搜索表單是頁(yè)面的主要功能，否則不應(yīng)包含在一組文檔或文檔部分（如側(cè)邊欄，導(dǎo)航鏈接，版權(quán)信息，站點(diǎn)徽標(biāo)和搜索表單）中重復(fù)的內(nèi)容。
<main>對(duì)文件大綱沒(méi)有貢獻(xiàn); 也就是說(shuō)，不像像元素這樣的<body>標(biāo)題<h2>，<main>并不會(huì)影響DOM的頁(yè)面結(jié)構(gòu)的概念。這是嚴(yán)格的信息。
WHATWG和W3C規(guī)范之間的差異
WHATWG的現(xiàn)行標(biāo)準(zhǔn)（MDN規(guī)范中使用的規(guī)范）和W3C規(guī)范<main>之間的元素定義有很大不同。與上面給出的描述相比，這里是兩個(gè)規(guī)格之間的差異：
盡管HTML的WHATWG現(xiàn)行標(biāo)準(zhǔn)允許
<main>在一個(gè)頁(yè)面中使用多個(gè)元素，但W3C版本的規(guī)范并不包含這些元素，除非其中一個(gè)元素使用該hidden屬性隱藏。
WHATWG規(guī)范允許
<main>在任何允許流量?jī)?nèi)容的地方使用。在另一方面，HTML規(guī)范的W3C版本不允許<main>是的后裔<article>，<aside>，<footer>，<header>，或<nav>。
這似乎是一個(gè)短小的差異，但是這個(gè)<main>元素在功能層面上是相當(dāng)簡(jiǎn)單的，所以如果你不記住這些差異的話，那么這些差異的存在會(huì)產(chǎn)生重大的后果。
例子
<!-- other content --> <main> <h1>Apples</h1> <p>The apple is the pomaceous fruit of the apple tree.</p> <article> <h2>Red Delicious</h2> <p>These bright red apples are the most common found in many supermarkets.</p> <p>... </p> <p>... </p> </article> <article> <h2>Granny Smith</h2> <p>These juicy, green apples make a great filling for apple pies.</p> <p>... </p> <p>... </p> </article> </main><!-- other content -->
規(guī)范
Specification | Status | Comment |
|---|---|---|
HTML Living StandardThe definition of '<main>' in that specification. | Living Standard | Removed the restriction about using <main> multiple times in a document, or as a descendent of an <article> element. |
HTML 5.1The definition of '<main>' in that specification. | Recommendation | No change from HTML5. |
HTML5The definition of '<main>' in that specification. | Recommendation | Initial definition. |
瀏覽器兼容性
The <main> element is widely supported. For Internet Explorer 11 and below, it is suggested that an ARIA role of "main" be added to the <main> element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, will be able to understand the semantic meaning of the <main> element once this role attribute is included).
<main role="main"> ...</main>
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 26 | 12 | 21 | No | 16 | 7 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 12 | 21 | No | (Yes) | 7.1 |