HTML5第二节 - 追梦-dream-HTML Tutorial-php.cn

第二回合：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代码如下：

Copy after login

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; } }/*定义动画*/
效果图如下图所示