html5 main標(biāo)簽有什么用

發(fā)布時(shí)間：2020-10-15 19:04:59 來(lái)源：億速云閱讀：236 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹html5 main標(biāo)簽有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

首先，我們來(lái)了解一下html main是什么意思：

html5 main標(biāo)簽的定義和作用：

<main> 標(biāo)簽規(guī)定文檔的主要內(nèi)容。

<main> 元素中的內(nèi)容對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。

注釋：在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

<main> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。

早在 2013 年，<main> 元素就被正式添加到 W3C HTML 規(guī)范中，到目前為止，關(guān)于該元素的定義已經(jīng)很完善了，所以現(xiàn)在是時(shí)候深入了解什么時(shí)候適合使用 <main> 元素了。那么，下面就開(kāi)始吧。

W3C 規(guī)范

<main> 的主要目的是將 ARIA 的地標(biāo)性作用 main 映射到 HTML 中的元素。這可以幫助那些屏幕閱讀設(shè)備和輔助設(shè)備知道頁(yè)面的主要內(nèi)容是從哪里開(kāi)始的。

W3C 規(guī)范將 <main> 描述為：

文檔或應(yīng)用程序的主要內(nèi)容。主內(nèi)容區(qū)域由與文檔的中心主題或應(yīng)用的核心功能的直接相關(guān)或擴(kuò)展的內(nèi)容組成。

自從 <main> 元素包含在 HTML 規(guī)定里之后，<body> 元素就還原成了它在 HTML4 中的定義。

The body element represents the content of the document.

html5 main標(biāo)簽具體使用的作用：

使用 <main> 元素值得注意的一點(diǎn)是，它在每個(gè)頁(yè)面中只能使用一次。為什么要規(guī)定一個(gè)頁(yè)面只能使用一次呢？雖然我對(duì)具體的細(xì)節(jié)并不感興趣，但是有些觀點(diǎn)看起來(lái)還是比較有意義的。

按照規(guī)格，如果你在一個(gè)文檔中試圖使用多個(gè) <main> 標(biāo)簽，那么 W3C validator 會(huì)拋出錯(cuò)誤。

<main> 元素的另外一個(gè)規(guī)定是，它不能作為 <article>, <header>, <aside>, <footer>, <nav> 的子元素節(jié)點(diǎn)。

html5 main標(biāo)簽的具體使用：

就像其它的 HTML5 新元素一樣，并不是所有的瀏覽器都能夠識(shí)別出 <main> ，并且給它加上預(yù)設(shè)的樣式，你可能需要在自己的 CSS 文件中將它設(shè)置為塊級(jí)元素。

main {display:block;}

有的時(shí)候，為了支持一些較低版本的 IE 瀏覽器，你可能還需要使用 JavaScript 創(chuàng)建該元素。

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

當(dāng)然了，你還可以使用 html5shiv.

使用 <main> 元素最簡(jiǎn)單的方式就是去替換那些 ID 或者 Class 值為 main 或者 content 之類的 <div> 元素。

所以，在實(shí)踐中它應(yīng)該是什么樣子呢？下面是使用 <main> 元素之前的文檔結(jié)構(gòu)。

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

下面使用 <main> 元素改寫文檔。

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

好了，這是如此的簡(jiǎn)單，以至于一分鐘不到我們就可以將文檔改寫成新潮的 HTML5 樣式。

以上是html5 main標(biāo)簽有什么用的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡