綜述
這段時間，一直在溫故前端的東西，發現了很多不足（更應該說不會吧）。前端的學習方法，更多的是記憶和經驗。html5相對於html4而言。主要有以下幾點改進。
- 語義化標籤增多,結構更清晰
- 方便性、功能性增強，對程序員更友好
- 很多東西，還沒有得到瀏覽器的完全支持，注意兼容性
新增的重要標籤
audio
處理音頻，因爲有些瀏覽器不支持某些音頻格式。需要轉化或者準備多個
詳細介紹：w3c
<audio controls>你的瀏覽器不支持audio
<source src="test.mp3" type="audio/mp3">
<source src="test.ogg" type="audio/ogg">
</audio>video
播放視頻，注意兼容性。轉化工具：Miro Video Converter
<video controls width="640px" height="320px" poster="test.png">你的瀏覽器不支持video
<source src="test.mp4" type="video/mp4">
<source src="test.webm" type="video/webm">
</video>js處理視頻及相關屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
<script type="text/javascript">
var video;
function init(){
video = document.getElementById('video1');
//監聽結束事件，第三個參數爲在捕獲過程中執行
video.addEventListener("ended", function(){
alert("播放結束");
},true);
//監聽錯誤事件，第三個參數爲在冒泡過程中執行
video.addEventListener("error",function(){
switch (video.error.code){
default:alert("發生未知錯誤");break;
}
},false);
}
function play(){
video.play();
}
function pause(){
video.pause();
}
</script>
</head>
<body onload="init()">
<video controls width="640px" height="320px" poster="test.png" id="video1">你的瀏覽器不支持video
<source src="test.mp4" type="video/mp4">
<source src="test.webm" type="video/webm">
</video>
<p>
<button onclick="play()">播放</button>
<button onclick="pause()">暫停</button>
</p>
</body>
</html>article
代表的是一塊獨立的內容(模塊)，例如一篇文章，帖子。類似於html4中的div元素，是div的細分。
<article>
<header>
<h1>呆萌的來歷</h1>
</header>
<p>呆萌來源於一個同學的名字，他就叫呆萌。。。</p>
<footer>
<p>發表日期:2015:3:29</p>
</footer>
</article>section
翻譯爲“部分”，比如頁眉頁腳或者文章中的區塊(覺得還是div方便吧，但是這個和上面的都是爲了語義化好點)
- 當沒有標題時，不要使用section。
- 當article,aside,nav元素更適合時，不要使用section元素。
- 不要講其當做設置樣式的容器，那是div做的
<section>
<header>
<h1>呆萌的來歷</h1>
</header>
<p>呆萌來源於一個同學的名字，他就叫呆萌。。。</p>
<footer>
<p>發表日期:2015:3:29</p>
</footer>
</section>nav
導航欄的語義化標籤，類似於div
<nav>
<ul>
<li>聯繫信息</li>
<li>個人經驗</li>
<li>求職意向</li>
</ul>
</nav>aside：旁白。用來表示文章或者頁面的附屬信息
<header>
<h1>F#入門</h1>
</header>
<article>
<h1>第四節 詞法閉包</h1>
<p>lambda表達式可以創建詞法閉包...(文章正文）</p>
<aside>
<!-- 因爲這個aside元素被放置在一個article元素內部，
所以分析器將這個aside元素的內容理解成是和article元素的內容相關聯的。 -->
<h1>名詞解釋</h1>
<dl>
<dt>F#</dt>
<dd>F#爲.Net2010中引入的新型函數型編程語言</dd>
</dl>
<dl>
<dt>詞法閉包</dt>
<dd>詞法閉包是指，將創建lambda表達式時的環境保存起來...(詳細解釋）</dd>
</dl>
</aside>
</article>header：區塊的頭部部分，一個網頁內可以擁有多個header
<header>
<h1>網頁標題</h1>
</header>
<article>
<header>
<h1>文章標題</h1>
</header>
<p>文章正文</p>
</article>footer：區塊的底部部分，通常包括腳註信息.類似於header，可以放在section，article，div，body等元素中。
hgroup：將標題進行分組，適用於含有多個h系列標籤
<article>
<header>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
address：顯示聯繫信息，不僅僅是地址或者郵箱
time：用來語義化顯示時間
figure/figcation:實現帶標題的插圖
mark:高亮顯示，類似於strong
新增的全局屬性
contentEditable：是否可被重新編輯
hidden：是否被隱藏
spellcheck：對輸入內容進行拼寫和語法檢查（input(type=text)）,textarea
跨瀏覽器支持
增加標籤識別
<style>
article,asiede,audio,canvas,datalist,details,fication,figure,footer,header,hgroup,menu,nav,section,video{
display:block;
}
</style>
<script type="text/javascript">
document.ctreatElement('article');
document.ctreatElement('aside');
document.ctreatElement('audio');
document.ctreatElement('abbr');
....
</script>