1衔瓮，常用語(yǔ)義化標(biāo)簽
Header 頭部挥萌，定義標(biāo)題
Nav 導(dǎo)航欄
Section 主要內(nèi)容
Aside 邊欄
Footer 腳部
Article 內(nèi)容部分悍引，寫(xiě)在section中家肯，在article中可以定義各種標(biāo)題倦挂，h1,h2~h6畸颅，這些標(biāo)題可以用hgroup來(lái)包含，然后寫(xiě)內(nèi)容方援，
Figure 寫(xiě)在article中然后包含img
Figcaption 圖片描述
注：在section中寫(xiě)相同或者不相同結(jié)構(gòu)的內(nèi)容都要使用article來(lái)包含没炒，可以包含視頻video或者音頻audio
Mark 突出顯示重要文字
Small 附屬細(xì)則，小字犯戏，可用在footer中的版權(quán)信息中
Cite 顯示作品名
Address 顯示地址
Time 時(shí)間戳
Dialog 定義一個(gè)對(duì)話框
Source 媒體資源
Progress 定義任務(wù)的過(guò)程
2送火，一些API用途
2-1，Canvas API 是基礎(chǔ)繪圖API
2-2先匪，拖放API 包含圖形种吸，還包含文字，鏈接呀非，文件或者數(shù)據(jù)
2-3骨稿，地理位置API 返回信息包括經(jīng)度緯度
2-4，存儲(chǔ)API （WEB存儲(chǔ)和索引數(shù)據(jù)庫(kù)）web存儲(chǔ)包含sessionStorage用來(lái)保存臨時(shí)信息如淘寶登錄密碼，只要瀏覽器不關(guān)閉坦冠，在限定時(shí)間內(nèi)打開(kāi)別的窗口都默認(rèn)自動(dòng)登錄形耗，不用再繼續(xù)輸入密碼。和localstorage用來(lái)保存大文件辙浑，保存的信息是持久化的激涤，永遠(yuǎn)不會(huì)過(guò)期
2-5，文件API 讀取處理創(chuàng)建文件
2-6判呕，通信API 主要是web sockets 作用時(shí)提供實(shí)時(shí)的應(yīng)用程序所需工具倦踢，如聊天室
2-7，web workers API 是特殊的API 擴(kuò)展了JS 的應(yīng)用范圍侠草，JS不支持多線程辱挥，有了這個(gè)API ，JS能執(zhí)行多任務(wù)操作
2-8边涕，歷史API
2-9晤碘，離線API
2-10，外部庫(kù)
2-11功蜓，jQuery
2-12园爷，Google maps
3，視頻video標(biāo)簽
基本語(yǔ)法：
<code><video width=”720”height=”400”controls><source src=””></video></code>
Controls式撼，表示直接將控制視頻播放的控制面板童社，除了可以直接添加這個(gè)屬性以外，還有：
Autoplay 表示視頻加載后自動(dòng)播放
Loop 表示循環(huán)播放
Poster 可以指定一個(gè)URL著隆，在視頻等待播放的時(shí)候顯示該圖像
格式為poster=“http：//扰楼。。美浦∶鹨郑”
Preload（預(yù)加載）設(shè)定三個(gè)值：none（不緩存），metadata（推薦瀏覽器抓取一些信息）抵代，auto（默認(rèn)值腾节，要求瀏覽器盡快下載視頻）
但是這個(gè)控制面板不能修改，也不好看荤牍，另外就是功能也不全案腺，所以一般需要自己做視頻控制面板】党常控制面板如下：
<section id="player">
<video id="media" width="720" height="400" >
<source src="videos/WTA.mp4">
</video>
<nav>
<div>
<button type="button" id="play">播放</button>
</div>
<div id="bar">
<div id="progress"></div>
</div>
</nav>
</section>
接下來(lái)要對(duì)控制面板做函數(shù)處理劈榨，先獲取，再添加監(jiān)聽(tīng)：
function initiate(){
max=600;
mymedia=document.getElementById("media");
myplay=document.getElementById("play");
mybar=document.getElementById("bar");
myprogress=document.getElementById("progress");
myplay.addEventListener('click',push,false);
mybar.addEventListener('click',move,false);
}
上述是初始化函數(shù)：
經(jīng)常用到的事件函數(shù)API：
Progress：周期性觸發(fā)晦嵌，用于更新媒體的下載速度同辣，
Canplaythrough當(dāng)整個(gè)媒體可以順利播放時(shí)候拷姿，就會(huì)觸發(fā)這個(gè)時(shí)間，
Ended 當(dāng)媒體到達(dá)末尾的時(shí)候觸發(fā)
Pause 當(dāng)重播暫停時(shí)觸發(fā)
Play當(dāng)媒體開(kāi)始播放時(shí)觸發(fā)
Error出錯(cuò)時(shí)觸發(fā)
function push(){
if(!mymedia.paused&&!mymedia.ended){
mymedia.pause();
myplay.innerHTML='播放';
window.clearInterval(loop);
}else{
mymedia.play();
myplay.innerHTML='暫停';
loop=setInterval(status,1000);
}
}
function status(){
if(!mymedia.ended){
console.log("當(dāng)前播放進(jìn)度:"+mymedia.currentTime);
var size=parseInt(mymedia.currentTime*max/mymedia.duration);
myprogress.style.width=size+'px';
}else{
myprogress.style.width='0px';
myplay.innerHTML='播放';
window.clearInterval(loop);
}
}
function move(e){
console.log(e.pageX);
if(!mymedia.paused&&!mymedia.ended){
var mouse1= e.pageX;
console.log(mouse1);
mymedia.currentTime=mouse1*mymedia.duration/max;
console.log("點(diǎn)擊時(shí)播放進(jìn)度:"+mymedia.currentTime);
myprogress.style.width=mouse1+'px';
}
}
window.addEventListener('load',initiate,false);
4,基于HTML5的移動(dòng)web應(yīng)用
4-1旱函，canvas繪圖
4-2响巢，多媒體
4-3本地存儲(chǔ)
4-4，離線應(yīng)用
4-5棒妨，使用地理位置
4-6踪古，移動(dòng)web框架（基于jQuery的jQuery mobile，基于extjs的sencha touch券腔，能打通web和native兩者之間通道的phonegap框架）
目前有兩種開(kāi)發(fā)模式伏穆，基于傳統(tǒng)的web開(kāi)發(fā)模式（對(duì)應(yīng)jQuery mobile）和基于組件式的web開(kāi)發(fā)（對(duì)應(yīng)Sencha touch）
5，表單屬性
5-1纷纫，form屬性
<form id=”testform”>
<input type=”text”>
<form>
<input form=testform>
在H4中枕扫，提交表單的時(shí)候，表單之外的數(shù)據(jù)并不能被提交辱魁，但是在 H5中烟瞧，只要設(shè)置form屬性為某個(gè)表單的id號(hào)即可將內(nèi)容歸屬于該表單
未完待續(xù)。商叹。。
