HTML5語義化-main

來源：懂視網責編：小采時間：2020-11-27 15:13:01

HTML5語義化-main:早在 2013 年，<main> 元素就被正式添加到 W3C HTML規范中，到目前位置，關于該元素的定義已經很完善了，所以現在是時候深入了解什么時候適合使用 <main> 元素了。那么，下面就開始吧。 W3C 規范 <main> 的主要目的是將 A

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5語義化-main:早在 2013 年，<main> 元素就被正式添加到 W3C HTML規范中，到目前位置，關于該元素的定義已經很完善了，所以現在是時候深入了解什么時候適合使用 <main> 元素了。那么，下面就開始吧。 W3C 規范 <main> 的主要目的是將 A

　早在 2013 年，<main> 元素就被正式添加到 W3C HTML規范中，到目前位置，關于該元素的定義已經很完善了，所以現在是時候深入了解什么時候適合使用 <main> 元素了。那么，下面就開始吧。

　　W3C 規范

　　<main> 的主要目的是將 ARIA 的地標性作用 main 映射到 HTML中的元素。這可以幫助那些屏幕閱讀設備和輔助設備知道頁面的主要內容是從哪里開始的。W3C 規范將 <main> 描述為：

文檔或應用程序的主要內容。主內容區域由與文檔的中心主題或應用的核心功能的直接相關或擴展的內容組成。

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

The body element represents the content of the document.

　　細節

　　使用 <main>元素值得注意的一點是，它在每個頁面中只能使用一次。為什么要規定一個頁面只能使用一次呢？雖然我對具體的細節并不感興趣，但是有些觀點看起來還是比較有意義的。

　　按照規格，如果你在一個文檔中試圖使用多個 <main> 標簽，那么 W3C validator 會拋出錯誤。

　　<main> 元素的另外一個規定是，它不能作為 <article>, <header>, <aside>, <footer>, <nav> 的子元素節點。

　　使用

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

main {display:block;}

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

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

　　當然了，你還可以使用 html5shiv.

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

　　所以，在實踐中它應該是什么樣子呢？下面是使用 <main> 元素之前的文檔結構。

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

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

　　總結

　　正如你所見的，使用 <main> 元素是超級簡單的，只需要話費幾分鐘的時間，所以現在真的到了將 <main>帶入到網站開發的過程中了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

推薦度：

點擊下載本文 文檔為doc格式

標簽： html5 html main