HTML5 之 简单汇总
參考：
HTML5的十大新特性
前端面試必備之html5的新特性
HTML5
主要內容：語義化、增強型表單、多媒體標簽、Canvas、SVG、地理定位、拖放API、Web Worker、Web Storage、WebSocket、HTML 5 應用程序緩存
1.語義化元素
1.1結構元素
| article | 表示與上下文不相關的獨立內容區域 |
| aside | 定義頁面的側邊欄區域 |
| header | 定義頁面頭部區域 |
| hgroup | 用于對頁面中一個區域或整個頁面的標題進行組合 |
| footer | 定義頁面的底部區域 |
| section | 定義文檔中的節段 |
| nav | 定義頁面導航 |
| dialog |
<!--表單--> <form action=""><!--表單元素--><input type="text"><input type="password"><input type="button"><input type="submit"><input type="file"><input type="checkbox"><input type="radio"><input type="reset"><!--新增--><input type="search"><input type="number"><input type="email"><input type="url"><input type="tel"><!--在移動端使用的時候才會看到區別--><!--體現：調用的虛擬鍵盤不一樣--><input type="date"><input type="week"><input type="time"><input type="color"><input type="range"> </form>form 屬性：action： 用來指定當前表單控件中的數據要交給哪個后臺文件去處理method： 用來指定一種數據提交方式： get | post1. 輸入框：<input type="text">屬性：name: 設置當前控件的名稱value：設置當前控件的默認值placeholder： 占位符【當前控件的一個提示信息】readonly： 設置當前控件為只讀模式disabled： 設置當前控件不能輸入 maxlength： 設置當前控件最多能輸入多少個字符autofocus: 自動獲取焦點2. 密碼輸入框：<input type="password">屬性： 與文本輸入框的屬性一致。3. 單選控件：<input type="radio">注意：? 默認單選控件不能實現單選效果? 只要給單選空件設置相同的name值即可。<input type="radio" name="gender" checked>男<input type="radio" name="gender">女4. 多選控件：<input type="checkbox" checked> 5. 下拉列表框：<select multiple><option>河南</option><option selected>山西</option><option>北京</option></select>屬性：selected: 設置下拉列表框中的默認選中項multiple：可以實現多選效果或者如下寫法：<select><optgroup label="河北省"><option>張家口</option><option>石家莊</option><option>保定</option></optgroup></select>6. 多行文本框（域）：<textarea></textarea> < resize: none> 禁止文本域拖拽7. 上傳控件：<input type="file">8. 按鈕系列：? <input type="submit"> 就是用來提交表單數據的? <input type="image" src="按鈕.jpg"> 用來提交表單數據? <input type="button" value="按鈕"> 不能提交表單數據，和js配合使用? <input type="reset"> 將控件中的值恢復到默認值<fieldset><legend>個人信息采集</legend> </fieldset>H5新屬性： ? <input type="number" step="5" pattern="">： 該控件只能用來輸入數字屬性： step="值"； 設置當前控件累加的值或減少的值。pattern="正則表達式" 通過正則表達式可以實現靈活的控制輸入框中能輸入哪些數據類型? <input type="url">： 只能輸入合法的網址? <input type="email">: 設置用戶只能輸入合法的郵箱地址? <input type="date">： 在網頁中顯示日期控件? <input type="week" name=""> 顯示一年中的第幾周? <input type="time"> 顯示24小時內的時間? <input type="month" name=""> 顯示第幾個月? <input type="range"> ： 通過用戶拖動控件實現選中值的大小屬性：min: 規定允許的最小值max: 規定允許的最大值value: 規定默認值step: 每多拽一次滑塊，里面值要累加多少或者減少多少? <datalist></datalist>使用：-----搜索下拉列表<input type="text" name="" list="myList"><datalist id="myList"><option value="IT程序入門" label="大約有20個空位"></option><option value="挖掘機入門" label="大約有2臺機器"></option><option value="美容美發入門" label="大約每有假頭"></option></datalist>
?
? required： 實現讓表單空鍵的值不能為空【必須填】例如：<input type="text" name="" placeholder="請輸入用戶名" required>? autocomplete： 將用戶提交過的數據進行緩存注意：1. 該屬性可以給form標簽設置2. 瀏覽器中該屬性的默認值： on | off<form action="1.php" autocomplete="on"></form>? novalidate： 取消驗證注意：1. 該屬性要給form標簽設置 <form action="1.php" autocomplete="on" novalidate><input type="email" name=""> ---加上novalidate屬性后，該郵箱地址不會進行是否合法驗證</form>? placeholder： 占位符 【輸入框的提示信息】? autofocus： 自動獲取焦點?
? <video></video>： 在網頁中用來展示視頻例如：<video src="ds.mp4" controls autoplay loop></video>controls： 顯示控制欄autoplay： 多媒體自動播放loop ： 設置循環播放1. 關于瀏覽器支持多種視頻格式文件播放的兼容寫法：<video controls><source src="ds.mp4"><source src="ds.ogg"><source src="ds.webm">瀏覽器不支持video標簽</video>? <audio></audio>： 在網頁中展示音頻總結： audio標簽的屬性與video標簽的屬性一樣。 兼容寫法：<audio><source src="a.mp3" type=""><source src="a.ogg" type=""><source src="a.wav" type="">瀏覽器不支持audio標簽</audio>
HTML5 Canvas——折線圖
?
HTML5 可縮放矢量圖形（2）—SVG基礎
HTML5 SVG應用（1）——loading效果
?
SVG 與 Canvas兩者間的區別
SVG 是一種使用 XML 描述 2D 圖形的語言。
Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
HTML5 Geolocation API地理定位整理（一）
HTML5 Geolocation API地理定位整理（二）
[HTML5 Geolocation API工作原理轉載]
?
<script>console.log(navigator.geolocation);if (navigator.geolocation) {//獲取地理位置需要等比較長的一段時間//尤其是在PC段，根據IP獲取的 navigator.geolocation.getCurrentPosition(successCB, errorCB);} else {console.log('你的瀏覽器不支持地理定位');}//獲取地理位置成功function successCB(position) {console.info(position);console.log('位置精度:' + position.coords.accuracy);console.log('維度：' + position.coords.latitude);console.log('經度：' + position.coords.longitude);}//獲取地理位置失敗function errorCB(error) {console.error(error);var msg = '';switch (error.code) {case error.PERMISSION_DENIED:msg = "用戶拒絕對獲取地理位置的請求。"break;case error.POSITION_UNAVAILABLE:msg = "位置信息是不可用的。"break;case error.TIMEOUT:msg = "請求用戶地理位置超時。"break;case error.UNKNOWN_ERROR:msg = "未知錯誤。"break;}console.error(msg);}</script>?
?
demo2
<div id="container"></div> <!-- 引入百度javascript版 API --> <script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script> <script>var geolocation = new BMap.Geolocation;geolocation.getCurrentPosition(function(position){console.log(position);// 這些都是寫死var map = new BMap.Map("container"); // container表示顯示的容器// 把經度緯度傳給百度/*40.1691162668,116.6348530780*/var point = new BMap.Point(position.point.lng,position.point.lat);//默認的比例 map.centerAndZoom(point, 20);//添加鼠標滾動縮放 map.enableScrollWheelZoom();// 只寫上面三行就可出現地圖了，并且會定位// 定義好了一個圖片標記var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));// 創建標注var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);});</script>??
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
注意：drop事件的默認行為是以鏈接形式打開的，這時要阻止默認行為。
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
-
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
-
拖放的過程分為源對象和目標對象，源對象指的是即將拖動的對象，而目標對象則是指拖動之后要放置的目標對象
拖動過程會觸發很多事件，主要有下面這些：
dragstart：網頁元素開始拖動時觸發。
drag：被拖動的元素在拖動過程中持續觸發。
dragenter：被拖動的元素進入目標元素時觸發，應在目標元素監聽該事件。
dragleave：被拖動的元素離開目標元素時觸發，應在目標元素監聽該事件。
dragover：被拖動元素停留在目標元素之中時持續觸發，應在目標元素監聽該事件。
drap：被拖動元素或從文件系統選中的文件，拖放落下時觸發。
dragend：網頁元素拖動結束時觸發。
拖放的源對象（可能移動）可以出發三個事件
-
dragstart
-
drag
-
dragend
整個拖動過程的組成： dragstart*1 + drag*n + dragend*1
拖放的目標對象（不會發生移動）可以觸發的事件——4個：
dragenter：拖動著進入
dragover：拖動著懸停
dragleave：拖動著離開
drop：釋放
整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1
整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1
dataTransfer：用于數據傳遞的“拖拉機”對象；
在拖動源對象事件中使用e.dataTransfer屬性保存數據：
e.dataTransfer.setData( k, v )
在拖動目標對象事件中使用e.dataTransfer屬性讀取數據：
var value = e.dataTransfer.getData( k )
demo1：
<!DOCTYPE HTML> <html> <head><style type="text/css">#div1 {width: 1000px;height: 250px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {console.log(ev);ev.preventDefault();}function drag(ev) {console.log(ev);ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {console.log(ev);ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script> </head><body><p>請把圖片拖放到矩形中：</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><img id="drag1" src="./01.jpg" draggable="true" ondragstart="drag(event)" /></body> </html>說明：
<!-- 1. 首先，為了使元素可拖動，把 draggable 屬性設置為 true ： --> <img draggable="true" /> <!-- 2. 拖動什么 - ondragstart 和 setData() 然后，規定當元素被拖動時，會發生什么。 在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。 dataTransfer.setData() 方法設置被拖數據的數據類型和值： --> function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } <!-- 在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。 --><!-- 3.放到何處 - ondragover --> <!-- ondragover 事件規定在何處放置被拖動的數據。 默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 這要通過調用 ondragover 事件的 event.preventDefault() 方法： --> event.preventDefault()<!-- 4.進行放置 - ondrop 當放置被拖數據時，會發生 drop 事件。 在上面的例子中，ondrop 屬性調用了一個函數，drop(event)： --> function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }/* 代碼解釋： 調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開） 通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。 被拖數據是被拖元素的 id ("drag1") 把被拖元素追加到放置元素（目標元素）中 */?
<!DOCTYPE HTML> <html> <head><style type="text/css">#div1,#div2 {float: left;width: 1000px;height: 250px;margin: 10px;padding: 10px;border: 1px solid #aaaaaa;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script> </head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="./01.jpg" draggable="true" ondragstart="drag(event)" id="drag1" /></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body></html>
?
web worker 是運行在后臺的 JavaScript，不會影響頁面的性能。
-
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
-
web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能?？梢岳^續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行。
-
Javascript是單線程的。因此，持續時間較長的計算，回阻塞UI線程，進而導致無法在文本框中填入文本，單擊按鈕等，并且在大多數瀏覽器中，除非控制權返回，否則無法打開新的標簽頁。該問題的解決方案是Web Workers，可以讓Web應用程序具備后臺處理能力，對多線程的支持性非常好。
-
但是在Web Workers中執行的腳本不能訪問該頁面的window對象，也就是Web Workers不能直接訪問Web頁面和DOM API。雖然Web Workers不會導致瀏覽器UI停止響應，但是仍然會消耗CPU周期，導致系統反應速度變慢。
-
所有主流瀏覽器均支持 web worker，除了 Internet Explorer。
demo
Web Workers 和 DOM
由于 web worker 位于外部文件中，它們無法訪問下例 JavaScript 對象：
-
window 對象
-
document 對象
-
parent 對象
認識本地存儲
會話控制
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。
兩者之間就直接可以數據互相傳送。瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。
當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。
9.HTML 5 應用程序緩存
使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
什么是應用程序緩存（Application Cache）？
HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，并可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
-
離線瀏覽 - 用戶可在應用離線時使用它們
-
速度 - 已緩存資源加載得更快
-
?
轉載于:https://www.cnblogs.com/houfee/p/10382148.html
總結
以上是生活随笔為你收集整理的HTML5 之 简单汇总的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leetcode 648.单词替换
- 下一篇： 前端实现视频加速