与之前的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的应用
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论