?1. 新增標簽

• 音頻

<audio><source src=""/> </audio>

• 視頻

<video><source src=""/> </video>

• 畫板

<canvas id="myCanvas">您的瀏覽器不支持canvas標簽 </canvas> <script>//先拿到canvas標簽var cvs = document.getElementById("myCanvas");//準備上下文環境var cxt = cvs.getContext("2d");//繪畫矩形 cxt.fillStyle = "red";cxt.fillRect(0,0,200,200); </script>

• 下拉菜單

<!--以前--> <select name="" id=""><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option> </select> <!--新標簽--> <input type="text" list="data"/> <datalist id="data"><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option> </datalist>

• 包含媒介資源的標題

<figure><figcaption>媒介的標題</figcaption><img src="" alt=""/><p></p> </figure>

• 標題組

<hgroup><h2></h2><h3></h3> </hgroup>

• 表示標記文字

<p>我是一段文本<mark>標記</mark></p>

• 拖動條

<input type="range"/>

• 度量條

<meter min="0" max="100" value="30">30%</meter>

• 進度條

<progress min="0" max="100" value="30"></progress>

2. 音頻與視頻

• 音頻格式（audio元素支持三種音頻格式）

?	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	?	√	√	√	?
MP3	√	?	?	√	√
Wav	?	√	√	?	√

• 視頻格式（video元素支持三種視頻格式）

?	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

• audio 與 video 都有的三個屬性

autoplay	autoplay	如果出現該屬性，則視頻在就緒后馬上播放
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕
height	pixels	設置視頻播放器的高度
loop	loop	如果出現該屬性，則當媒介文件完成播放后再次開始播放

• <video>的方法、屬性及事件

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause?
load()	videoWidth	progress
canPlayType()	videoHeight	error
?	duration	timeupdate?
?	ended	ended?
?	error	about?
?	paused	empty?
?	muted	emptied?
?	seeking	waiting?
?	volume	loadedmetadata?
?	height	?
?	width	?

3. 本地存儲

注：cookie大概4k，本地存儲大概5M

• localStorage
  • 　　儲存的值是永久保存，若用戶不手動刪除將長久存在

//設置本地數據localStorage.setItem("name","David");localStorage.setItem("age",20);//刪除一條數據localStorage.removeItem("age");//刪除所有數據 localStorage.clear();//獲取本地數據var result = localStorage.getItem("name");console.log(result);

• sessionStorage
  • 　　生命周期只存在瀏覽器打開時，關閉則失效

//設置本地數據sessionStorage.setItem("name","David");sessionStorage.setItem("age",20);//刪除一條數據sessionStorage.removeItem("age");//刪除所有數據 sessionStorage.clear();//獲取本地數據var result = sessionStorage.getItem("name");console.log(result);

4. 地理位置

<input type="button" id="btn"/> <div id="box"></div> <script>var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function () {if(navigator.geolocation){navigator.geolocation.getCurrentPosition(success,error,options);}else{document.write("您的瀏覽器版本太低");}}function success(position){var weidu = position.coords.latitude;var jingdu = position.coords.longitude;box.innerHTML = "經度：" + jingdu + "緯度：" +weidu;}function error(error){switch (error.code){case error.PERMISSION_DENIED:box.innerHTML = "User denied the request for Geolocation."break;case error.POSITION_UNAVAILABLE:box.innerHTML = "Location information is unavailable."break;case error.TIMEOUT:box.innerHTML = "請求超時."break;case error.UNKNOWN_ERR:box.innerHTML = "An unknown error occurred."break;}} </script>

?

轉載于:https://www.cnblogs.com/writerW/p/8982109.html

總結

以上是生活随笔為你收集整理的HTML5 新增内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。