傳統(tǒng)的div+css的頁面布局方式
image
HTML5布局方式： 是不是精簡了很多呢
image
結(jié)構(gòu)標簽：(塊狀元素) 有意義的div
article:標簽裝載顯示一個獨立的文章內(nèi)容。例如一篇完整的論壇帖子，一則網(wǎng)站新聞，一篇博客文章等等，一個用戶評論等等
header: 標記定義一個頁面或一個區(qū)域的頭部
nav :標記定義導航鏈接
section :標記定義一個區(qū)域
aside: 標記定義頁面內(nèi)容部分的側(cè)邊欄
hgroup: 標記定義文件中一個區(qū)塊的相關(guān)信息
figure: 標記定義一組媒體內(nèi)容以及它們的標題
figcaption: 標簽定義 figure 元素的標題。
footer: 標記定義一個頁面或一個區(qū)域的底部
dialog: 標記定義一個對話框(會話框)類似微信
常用語義標簽：
header:頁眉
footer:頁腳
nav:導航
main:文檔主要內(nèi)容
article:文章
aside:側(cè)邊欄。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
header{
width: 100%;
height: 100px;
background-color: azure;
}
nav{
width: 100%;
height: 36px;
background-color: greenyellow;
}
main{
width:100%;
height:500px;
background-color: deepskyblue;
}
main aside{
width:30%;
height: 100%;
height:500px;
float: left;
}
main article{
width:70%;
height: 100%;
height:500px;
float: right;
}
footer{
width: 100%;
height: 80px;
background-color: blue;
}
</style>
</head>
<body>
<header>head</header>
<nav>nav</nav>
<main>
<aside>aside</aside>
<article>article</article>
</main>
<footer>foot</footer>
</body>
</html>
兼容性問題：
chrome firefox沒問題
ie9下高度失效，因為解析為行級元素，改為塊級即可display: block;
ie9：選擇支持了一部分
ie8以下: 詳見視屏
main{
display: block;
width:100%;
height:500px;
background-color: deepskyblue;
}
多媒體交互標簽
<video> 標記定義一個視頻
<audio> 標記定義音頻內(nèi)容
<source> 標記定義媒體資源
<canvas> 標記定義圖片
<embed> 標記定義外部的可交互的內(nèi)容或插件 比如flash
