传统布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.header {
width: 1000px;
height: 120px;
background-color: pink;
margin: 0 auto;
} .nav {
width: 1000px;
height: 60px;
background-color: #daa520;
margin: 0 auto;
} .section {
width: 1000px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
} .section .aside {
float: left;
height: 400px;
background-color: red;
width: 400px;
} .section .article {
float: right;
height: 400px;
background-color: green;
width: 600px;
} .footer {
width: 1000px;
height: 90px;
background-color: #333;
margin: 0 auto;
}
</style>
</head>
<body>
<!--网页经典布局-->
<!--头部-->
<div class="header"></div>
<!--导航-->
<div class="nav"></div>
<!--主体-->
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<!-- 底部-->
<div class="footer"></div>
</body>
</html>
html5布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
header {
width: 1000px;
height: 120px;
background-color: pink;
margin: 0 auto;
} nav {
width: 1000px;
height: 60px;
background-color: #daa520;
margin: 0 auto;
} section {
width: 1000px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
} section aside {
float: left;
height: 400px;
background-color: red;
width: 400px;
} section article {
float: right;
height: 400px;
background-color: green;
width: 600px;
} footer {
width: 1000px;
height: 90px;
background-color: #333;
margin: 0 auto;
}
</style> <!-- 注意：ie8以下的浏览器不支持h5标签-->
<!--解决办法： 引入html5shiv.js文件-->
<!--条件注释只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<!--
l:less 更小
t：than 比
e:equal等于
g：great 更大
-->
</head>
<body>
<!-- 新增的h5有语义的标签 -->
<header>header</header>
<nav>nav</nav>
<section>
<aside>侧边栏</aside>
<article>文章</article>
</section>
<footer>底部</footer>
</body>
</html>
兼容问题
<!-- 注意：ie8以下的浏览器不支持h5标签-->
<!--解决办法： 引入html5shiv.js文件-->
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<!--
l:less 更小
t：than 比
e:equal等于
g：great 更大
-->
常用新语义标签
<nav> //表示导航
<header> //表示页眉
<footer> //表示页脚
<section> //表示区块
<article> //表示文章 如文章、评论、帖子、博客
<aside> //表示侧边栏 如文章的侧栏
<figure> //表示媒介内容分组 与 ul > li 做个比较
<mark> //表示标记 (带用“UI”，不怎么用)
<progress> // 表示进度 (带用“UI”，不怎么用)
<time> //表示日期