2-語義化結構元素 · 前端教學筆記[更新中...]

# 語義化結構元素 html5 中, 標簽語義化是最大的亮點 ## 1. 語義化結構元素 | 序號 | 標簽 | 描述 | | ---- | ----------- | --------------------------------------------------------------- | | 1 | `<h1>-<h6>` | 標題: 通常用來劃分或標注內容中的文本段落 | | 2 | `<header>` | 頁眉: 一般是由導航, logo 等元素組成 | | 3 | `<footer>` | 頁腳: 一般是由友情鏈接, 聯系方式, 備案號,版權等信息組成 | | 4 | `<nav>` | 導航: 導航通常是由一個或多個鏈接標簽`<a>`標簽組成 | | 5 | `<main>` | 主體: 做為頁面主要內容的容器使用,建議一個頁面, 只出現一次 | | 6 | `<article>` | 文檔: 本義是文檔, 實際上可以充當其它內容的容器 | | 7 | `<aside>` | 邊欄: 與主體無關的信息,例如: 廣告位, 相關推薦, 閱讀排行等 | | 8 | `<section>` | 文檔或主體中的通用小組件 | | 9 | `<div>` | 區塊: 也叫通用容器,本身無任何語義, 功能主要是通過它的屬性來描述 | 下面以傳統標簽與語義化結構標簽二種方式實現以下布局 ![布局效果圖](https://img.kancloud.cn/b5/63/b5630da75234d3294c53d1e6495c405f_1072x872.jpg) ### 1.1 傳統非語義結構 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>傳統非語義結構</title> </head> <body>  <div class="header"> <div class="nav"> <a href="">Menu1</a> <a href="">Menu2</a> <a href="">Menu3</a> </div> </div>  <div class="content">  <div class="aside"> <div class="ads">廣告位</div> </div>  <div class="main"> <div class="article"> <h3>php中文網</h3> <p>web開發者家園, php愛好的陣地</p> </div> </div> </div>  <div class="footer"> <div class="links"> <a href="">Links1</a> <a href="">Links2</a> <a href="">Links3</a> </div> </div> </body> </html> ``` ### 3. 語義化結構元素 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>語義化結構元素</title> </head> <body>  <header> <nav> <a href="">Menu1</a> <a href="">Menu2</a> <a href="">Menu3</a> </nav> </header>  <div class="content">  <aside> <div class="ads">廣告位</div> </aside>  <main> <article> <h3>php中文網</h3> <p>web開發者家園, php愛好的陣地</p> </article> </main> </div>  <footer> <section class="links"> <a href="">Links1</a> <a href="">Links2</a> <a href="">Links3</a> </section> </footer> </body> </html> ``` > SVG: 使用 XML 語言編寫的可縮放的矢量圖形,可直接在瀏覽器中顯示,體積小無限放大不失真