传统的div+css的页面布局方式
image
HTML5布局方式： 是不是精简了很多呢
image
结构标签：(块状元素) 有意义的div
article:标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等
header: 标记定义一个页面或一个区域的头部
nav :标记定义导航链接
section :标记定义一个区域
aside: 标记定义页面内容部分的侧边栏
hgroup: 标记定义文件中一个区块的相关信息
figure: 标记定义一组媒体内容以及它们的标题
figcaption: 标签定义 figure 元素的标题。
footer: 标记定义一个页面或一个区域的底部
dialog: 标记定义一个对话框(会话框)类似微信
常用语义标签：
header:页眉
footer:页脚
nav:导航
main:文档主要内容
article:文章
aside:侧边栏。
例子：
<!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> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flash
网友评论