html5 ---頁面布局的標簽 · 前端速查手冊

>[success] # 用html5 布局 ~~~ 1.下面的標簽本質的化是，一個個div標簽只不過是，轉譯成更標準的表達，去w3c 去看有詳細的用的位置的解釋，下面新增的標簽更多的是增加了語義化，可以直接給標簽寫css，不用在class使用 ~~~ ~~~ <header> 語義 :定義頁面的頭部頁眉</header> <nav> 語義 :定義導航欄 </nav> <footer> 定義頁面底部頁腳</footer> <article> 語義: 定義文章</article> <section> 語義：定義區域</section> <aside> 語義：定義其所處內容之外的內容側邊</aside> ~~~ | 標簽|描述 | | --- | --- | | header | 定義了文檔的頭部區域 | | nav | 定義導航連接的 | | main | 主體內容 | | article | 定義文本內容主要右側區域 | | aside | 定義頁面內容之外的內容主要左側區域東西 | | footer | 定義頂部頁面下部的 | ![](https://box.kancloud.cn/82df7dfc45a5ccac76c817eff122da63_1376x489.png) >[danger] ##### html5 布局 ~~~ 1.可以直接個標簽賦值屬性 ~~~ ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } header{ width: 100%; height: 100px; background-color: red; } nav{ width: 100%; height: 36px; background-color: green; } main{ width: 100%; height: 500px; background-color: #ccc; } main > article{ width: 80%; height: 100%; background-color: purple; float: left; } main > aside{ width: 20%; height: 100%; background-color: pink; float: right; } footer{ width: 100%; height: 80px; background-color: skyblue; } </style> </head> <body> <header>頭部</header> <nav>導航</nav> <main> <article>左邊</article> <aside>右邊</aside> </main> <footer>底部</footer> </body> </html> ~~~