HTML5第二节
| 第二回合：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>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的应用
|
