HTML5語義化元素
阿新 • • 發佈：2017-11-20
eight 放置 footer viewport order 上下文 人員 頁眉 cti
語義化元素：有意義的元素。
對語義化的理解：
- 正確的標簽做正確的事情；
- HTML5語義化元素讓頁面內容結構化清晰；
- 便於開發人員閱讀，理解，維護；
- 搜索引擎爬蟲可以依賴語義化元素來確定上下文和每個關鍵字權重，利於SEO。
支持情況：IE9以上，現代瀏覽器！
原先我們都是用這樣的代碼進行布局：
1 <div class="nav"></div> 2 <div class="header"></div> 3 <div class="footer"></div>
而現在，我們可以使用語義化元素：
- <header>文檔頭部區域</header>
- <nav>導航鏈接區域</nav>
- <section>文檔節區域(可以包含內容，標題，頁眉，頁腳等)</section>
- <article>定義文章區域</article>
- <aside>定義頁面主區域內容之外的內容(比如側邊欄)</aside>
- <footer>定義底部區域</footer>
- <figure>定義獨立的流內容(比如圖像，代碼等);與主內容相關，但刪除後不會對主內容造成影響</figure>
- <figcaption>定義figure標題</figcaption>：放置在<figure></figure>之間！
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>html5</title> 8<link rel="shortcut icon" href="test.jpg" type="image/x-icon"> 9 <style> 10 header,nav,section,article,aside,footer{ 11 border: 3px solid gray; 12 } 13 .bgSection{ 14 width: 300px; 15 border: 0px; 16 position: relative; 17 text-align: center; 18 margin: 0 auto; 19 } 20 header,nav,footer{ 21 width: 300px; 22 height: 50px; 23 24 } 25 section,article{ 26 width: 200px; 27 height: 100px; 28 } 29 aside{ 30 width: 93px; 31 height: 206px; 32 position:absolute; 33 left: 206px; 34 top:112px; 35 } 36 nav p, ul{ 37 display: inline; 38 } 39 ul li{ 40 display: inline; 41 } 42 p{ 43 font-weight: bold; 44 color: goldenrod; 45 } 46 </style> 47 </head> 48 <body> 49 <section class="bgSection"> 50 <header> <p><header></p></header> 51 <nav> 52 <p><nav></p> 53 <ul> 54 <li><a href="">first</a></li>| 55 <li><a href="">second</a></li>| 56 <li><a href="">last</a></li> 57 </ul> 58 </nav> 59 <section class="section1"> 60 <p><section></p> 61 </section> 62 <article> 63 <p><article></p> 64 </article> 65 <aside> 66 <p><aside></p> 67 </aside> 68 <footer> 69 <p><footer></p> 70 </footer> 71 </section> 72 </body> 73 </html>
運行結果：
HTML5語義化元素