第二回合：html5的新特性
与之前的html4.01相比，html5增加了非常多的改变：
① 新的语义元素：、、、、、、、和等等
② 新的元素特性：增加新的元素属性、表单元素、验证功能等内容。
③ 多媒体：增加音频、视频元素等内容。
④ 2d/3d 绘图：增加绘图元素。
⑤ 存储：增加在线、离线存储功能。
⑥ 连通性：增加客户端与服务器交互的两个内容：web sockets(客户端与服务器持久连接)和server-sent events(服务器推送数据)等。
⑦ 集成：提供web workers、history api、requestanimationframe、地理位置等强大的功能。
⑧ 设备访问：提供对摄像头、移动设备的支持。
⑨ css3样式：提供了新的背景样式特性、动画、边框等样式。
下面我们用实例来说明下各个标签的使用以及h5与c3的配合。
html代码如下：
doctype html>html>head> meta charset=utf-8 /> title>html5title> link rel=stylesheet href=html5.css>head>body> header class=show> h1>headerh1> h2>subtitleh2> header> div id=container> nav> h3>navh3> a href=>html5a> a href=>css3a> a href=>javascripta> nav> section> article> header> h1>article headerh1> header> p>lorem ipsum dolor html5 nunc aut nunquam sit amet, consectetur adipiscing elit. vivamus at est eros, vel fringilla urna.p> p>per inceptos himenaeos. quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.p> footer> h2>article footerh2> footer> article> article> header> h1>article headerh1> header> p>html5: lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. vivamus at est eros, vel fringilla urna. pellentesque odiop> footer> h2>article footerh2> footer> article> section> aside> h3>asideh3> p>do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.p> img src=lian.jpg alt= width=220 height=250> aside> footer> h2>footerh2> footer> div>body>html>
css代码如下：

body { background-color:#cccccc; font-family:geneva,arial,helvetica,sans-serif; margin: 0px auto; max-width:900px; border:solid; border-color:#ffffff;}header { background-color: #f47d31; display:block; color:#ffffff; text-align:center;}header h2 { margin: 0px;}h1 { font-size: 72px; margin: 0px;}h2 { font-size: 24px; margin: 0px; text-align:center; color: #f47d31;}h3 { font-size: 18px; margin: 0px; text-align:center; color: #f47d31;}h4 { color: #f47d31; background-color: #fff; -webkit-box-shadow: 2px 2px 20px #888; -webkit-transform: rotate(-45deg); -moz-box-shadow: 2px 2px 20px #888; -moz-transform: rotate(-45deg); position: absolute; padding: 0px 150px; top: 50px; left: -120px; text-align:center; }nav { display:block; width:25%; float:left;}nav a:link, nav a:visited { display: block; border-bottom: 3px solid #fff; padding: 10px; text-decoration: none; font-weight: bold; margin: 5px;}nav a:hover { color: white; background-color: #f47d31;}nav h3 { margin: 15px; color: white;}#container { background-color: #888;}section { display:block; width:50%; float:left;}article { background-color: #eee; display:block; margin: 10px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}article header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px;}article h1 { font-size: 18px;} aside { display:block; width:25%; float:left;}aside h3 { margin: 15px; color: white;}aside p { margin: 15px; color: white; font-weight: bold; font-style: italic;} footer { clear: both; display: block; background-color: #f47d31; color:#ffffff; text-align:center; padding: 15px;}footer h2 { font-size: 14px; color: white;}/* links */a { color: #f47d31;}a:hover { text-decoration: underline;}.show { -webkit-animation: show 25s ease-out infinite; -moz-animation: show 25s ease-out infinite; -o-animation: show 25s ease-out infinite; animation: show 25s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }/*调用动画*/ @-webkit-keyframes show { 0% { background: #f47d31; color: white; } 50% { background: #e0a014; color: #a3d9ff; } 100% { background: purple; color: pink; } }/*定义动画*/
效果图如下图所示

我相信 现在大家对h5已经产生了浓厚的兴趣，那么现在可以自己动手去撸代码，用h5开发页面，在下一节里我将继续为大家讲解h5的应用