1、新的DOCTYPE和字符集
HTML5的一项准则就是化繁为简，Web页面的DOCTYPE被极大的简化。
<!DOCTYPE html>同时字符集声明也被简化了：
<meta charset="utf-8">
2、新元素和旧元素
HTML5引入了很多新的标签，根据内容和类型的不同，被分为7大类。
3、语义化标签
语义化标签可以简化HTML页面设计，并且将来搜索引擎在抓取和索引网页的时候，也会利用这些元素的优势。
HTML5的宗旨之一就是存在即合理。Google分析了上百万的页面，发现DIV标签的通用ID名称重复量很大。例如，很多开发人员喜欢使用DIV id="footer"来标记页脚内容，
所以HTML5 引入了一组新的片段类元素。
4、HTML5代码样例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5</title><link rel="stylesheet" href="html5.css"></head><body><header><h1>My first web</h1><h2>learn html5</h2><h4>HTML5 Rocks!</h4></header><div id="container"><nav><h3>导 航 链 接</h3><a href="http://www.baidu.com">百 度</a><a href="http://www.google.com">谷 歌</a><a href="http://www.sina.com">新 浪</a></nav><section><article><header><h1>什么是 HTML5</h1></header><p> HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p><p> HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p><p> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p><footer><h2>what is html5</h2></footer></article><article><header><h1>HTML5 新特性</h1></header><ul><li>用于绘画的 canvas 元素 <li>用于媒介回放的 video 和 audio 元素 <li>对本地离线存储的更好的支持 <li>新的特殊内容元素，比如 article、footer、header、nav、section <li>新的表单控件，比如 calendar、date、time、email、url、search </ul><footer><h2>new feature of html5</h2></footer></article></section><aside><div> SEARCH:<input type="text"></input><button>Go</button></div><p>HTML5:Lorem ipsum dolor HTML5 nunc ant nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel frinailla urna.</p><p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p></aside><footer><h2>Copyright:Caijinping</h2></footer></div></body></html>效果演示：
5、CSS设置内容样式
<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5</title><link rel="stylesheet" href="html5.css"><style>
body{
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin:0px auto;
border:solid;
border-color:#FFFFFF;
}
header{
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2{
margin:0px;
color:white;
}
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 120px;
top:40px;
left:-110px;
text-align:center;
}
nav{
display:block;
width:10%;
float:left;
text-align:center;
}
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:65%;
float:left;
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #aaa;
-webkit-transform:rotate(0deg);
-moz-box-shadow:2px 2px 20px #aaa;
-moz-transform:rotate(0deg);
}
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 div{
margin:15px;
color:white;
float:left;
}
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;
float:bottom;
}
footer h2{
font-size:14px;
color:white;
}
a{
color:#F47D31;
}
a:hover{
text-decoration:underline;
}
li{
padding:10px;
}</style></head><body><header><h1>My first web</h1><h2>learn html5</h2><h4>HTML5 Rocks!</h4></header><div id="container"><nav><h3>导 航 链 接</h3><a href="http://www.baidu.com">百 度</a><a href="http://www.google.com">谷 歌</a><a href="http://www.sina.com">新 浪</a></nav><section><article><header><h1>什么是 HTML5</h1></header><p> HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。</p><p> HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。</p><p> HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p><footer><h2>what is html5</h2></footer></article><article><header><h1>HTML5 新特性</h1></header><ul><li>用于绘画的 canvas 元素
<li>用于媒介回放的 video 和 audio 元素
<li>对本地离线存储的更好的支持
<li>新的特殊内容元素，比如 article、footer、header、nav、section
<li>新的表单控件，比如 calendar、date、time、email、url、search
</ul><footer><h2>new feature of html5</h2></footer></article></section><aside><div>
SEARCH:<input type="text"></input><button>Go</button></div><p>HTML5:Lorem ipsum dolor HTML5 nunc ant nunquam sit amet, consectetur adipiscing
elit. Vivamus at est eros, vel frinailla urna.</p><p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula
pellentesque, turpis lorem dictum nunc.</p></aside><footer><h2>Copyright:Caijinping</h2></footer></div></body></html>效果演示：作者：xsc_c 发表于2013-8-22 23:45:06 原文链接
阅读：92 评论：0 查看评论
