目录
前言
HTML5 概述
HTML5 的八个特性
HTML5 的优势
HTML5 新增结构元素及页面元素
HTML5 废除的元素与属性
浏览器支持与选择
<head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>课后练习
html5页面布局设计
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5页面布局设计</title>
<link rel="stylesheet" href="CSS/style1.css">
</head>
<body>
<header></header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#" >JavaScript</a></li>
<li><a href="#">DOM</a></li>
<li><a href="#">BOM</a></li>
</ul>
</nav>
<div id="main">
<article>
<section><img src="images/html5_logo.png"></section>
<section><img src="images/css3_logo.png"></section>
<section><img src="images/javascript_logo.png"/></section>
</article>
<aside>
<figure>
<img src="images/html5.png">
<figcaption>HTML5结构元素侧边aside</figcaption>
</figure>
</aside>
</div>
<footer>
<p>Copyright © 2017-2020 Web前端开发工作室 - 业务开发部 - 网站建设</p>
</footer>
</body>
</html>
style1.css
@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
header {background:url(../images/logo.png) #4B5B6B no-repeat top left;
width: 100%;
height: 60px;
}
nav {/*background: #D9D9D9;*/
width: 100%;
height: 80px;
}
ul {list-style-type: none;
width: 100%;
height: 80px;
background: #D0C0B0;
text-align: center;
margin:0 auto;
}
li {font-size: 28px;
padding:20px 10px;
display:inline-block;
width:160px;
height:40px;
}
a:link,a:visited{text-decoration: none;}
a:hover{background: #CCFF99;
height: 80px;
width: 160px;
padding: 20px 10px;
}
a:active{text-decoration: none;}
#main {
width: 100%;
height: 500px;
background:#fefefe;
}
article {
width:75%;
height:500px;
background: #DBDACA;
float: left;
}
section {
width: 30%;
height: 420px;
float: left;
border: 1px dashed #006600;
text-align: center;
vertical-align: middle;
margin: 35px 10px;
}
img {width: 95%;
height: 400px;
margin: 10px;
}
aside {width: 25%;
height: 500px;
background: #9F9F9A;
float: right;
text-align: center;
vertical-align: middle;
}
figure{
margin:20px auto;
}
footer {clear: both;
width: 100%;
height: 80px;
background: #EAEADA;
padding: 20px auto;
text-align: center;
}
footer p {font-size: 20px;
padding-top: 25px;
height: 26px;
}