當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 新增内容

發布時間：2025/4/14 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 新增内容小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?1. 新增標簽

音頻

視頻

畫板

<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>

標題組

表示標記文字

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

拖動條

度量條

進度條

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 新增内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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

内容