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