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 adipiscingelit. Vivamus at est eros, vel frinailla urna.</p><p>Per inceptos himenaeos. Quisque feugiat, justo at vehiculapellentesque, 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 adipiscingelit. Vivamus at est eros, vel frinailla urna.</p><p>Per inceptos himenaeos. Quisque feugiat, justo at vehiculapellentesque, turpis lorem dictum nunc.</p></aside><footer><h2>Copyright:Caijinping</h2></footer></div></body></html>
效果示範：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
