HTML5 入门详解
生活随笔
收集整理的這篇文章主要介紹了
HTML5 入门详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 認識HTML5
HTML5并不僅僅只是作為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將Web做為應用開發平臺的HTML語言。HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一系列Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用，甚至結合Canvas我們可開發網頁版游戲，同時結合CSS3的過渡、轉換、動畫等特性，可以極大的增強用戶體驗，提升開發功能的可應用性。
我們日常討論的H5其實是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。
2. 語法規范
隨著Web技術的更新，HTML也先后經歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時對語法規范也做了一些調整，為了能夠保證瀏覽器可以兼容不同版本語法規范的，我們可以使用<!DOCTYPE>指示瀏覽器應該如何處理我們的HTML。常用的DOCTYPE聲明：
1、HTML5
<!DOCTYPE html>2、HTML 4.01 Strict
4.01的嚴格版本，該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">3、HTML 4.01 Transitional
該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">4、HTML 4.01 Frameset
該DTD等同于HTML 4.01 Transitional，但允許框架集內容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">5、XHTML 1.0 Strict
該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標記。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">6、XHTML 1.0 Transitional
該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標記。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7、XHTML 1.0 Frameset
該DTD等同于XHTML 1.0 Transitional，但允許框架集內容。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">8、XHTML 1.1
該DTD等同于XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的ruby支持）。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">3. 語義化標簽
HTML5提供了新的元素來創建更好的頁面結構：| <article> | 定義頁面獨立的內容區域（文章）。 |
| <aside> | 定義頁面的側邊欄內容（側邊欄）。 |
| <bdi> | 允許您設置一段文本，使其脫離其父元素的文本方向設置。 |
| <command> | 定義命令按鈕，比如單選按鈕、復選框或按鈕 |
| <details> | 用于描述文檔或文檔某個部分的細節 |
| <dialog> | 定義對話框，比如提示框 |
| <summary> | 標簽包含details元素的標題 |
| <figure> | 規定獨立的流內容（圖像、圖表、照片、代碼等等）。 |
| <figcaption> | 定義<figure>元素的標題 |
| <footer> | 定義section或document的頁腳。 |
| <header> | 定義了文檔的頭部區域 |
| <mark> | 定義帶有記號的文本。 |
| <meter> | 定義度量衡。僅用于已知最大和最小值的度量。 |
| <nav> | 定義導航鏈接的部分。 |
| <progress> | 定義任何類型的任務的進度。 |
| <ruby> | 定義ruby注釋（中文注音或字符）。 |
| <rt> | 定義字符（中文注音或字符）的解釋或發音。 |
| <rp> | 在ruby注釋中使用，定義不支持ruby元素的瀏覽器所顯示的內容。 |
| <section> | 定義文檔中的節（section、區段）。 |
| <time> | 定義日期或時間。 |
| <wbr> | 規定在文本中的何處適合添加換行符。 |
本質上新語義標簽與<div>、<span>沒有區別，只是其具有語義性，使用時除了在HTML結構上需要注意外，其它和普通標簽的使用無任何差別，可以理解成<div class="nav">相當于<nav>。不要好奇，它只是一個標簽！
盡量避免全局使用header、footer、aside等語義標簽。
4. HTML5 瀏覽器支持
對于目前主流的瀏覽器來說，都已經支持HTML5了，但是到了Internet Explorer 9，IE才開始支持HTML5，對于之前的舊版本，我們就需要考慮到兼容性問題。1、將 HTML5 元素定義為塊元素
HTML5 新增了幾個具有語義化的標簽，這些標簽都是塊級元素，在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內元素(inline)對待，所以我們只需要在初始化的時候將其轉換成塊元素(block)即可使用。 header, section, footer, aside, nav, main, article, figure {display: block; }2、通過 js 動態創建標簽
在IE9版本以下，并不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創建的自定義標簽，于是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創建一遍，這樣IE低版本也能正常解析HTML5新標簽了。 <style>header,section,nav...{display:block;} </style><script type="text/javascript">document.createElement("header");document.createElement("section");document.createElement("nav");... </script>注意：通過document.createElement創建出來的標簽時行內元素，所以同樣的需要將它們轉換成塊級元素。
3、Shiv 解決方案
在實際開發中我們更多采用的是通過檢測IE瀏覽器的版本來加載第三方的一個JS庫來解決兼容問題，這個庫文件會幫自動通過document.createElement('tagName')創建所有HTML5的新標簽。針對IE瀏覽器html5shiv是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，并且不能應用CSS樣式的問題。引入本地html5shiv.min.js文件：
<!--[if lte IE 8]><script type="text/javascript" src="html5shiv.min.js"></script> <![endif]-->lte：表示小于等于；當瀏覽器版本小于等于IE8的時候，引用html5shiv.min.js文件。
引入遠程靜態資源庫：
<!--[if lte IE 8]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->以上的注釋代碼只有在IE瀏覽器下次才會識別里面的內容，其他瀏覽器直接當注釋識別。
完整示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兼容性處理</title> <!--[if lte IE 8]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head><body><h1>我正在處理兼容性</h1><article>我在IE下也能顯示</article></body> </html>注意：html5shiv.js引用代碼必須放在<head>元素中，因為IE瀏覽器在解析HTML5新元素時需要先加載該文件。
5. 表單
伴隨著互聯網富應用以及移動開發的興起，傳統的Web表單已經越來越不能滿足開發的需求，所以HTML5在Web表單方向也做了很大的改進，如拾色器、日期/時間組件等，使表單處理變的更加高效。5.1 表單控件
html5中新增的一些表單控件，例如email屬性的輸入框，它可以檢測你的輸入內容是否符合一個郵箱的格式，自動進行表單校驗。1、表單域：form
我們都知道<form>標簽用于為用戶輸入創建HTML表單。表單能夠包含input元素，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含menus、textarea、fieldset、legend和label元素。表單用于向服務器傳輸數據。
在html5中<form>表單域添加了兩個新的屬性："autocomplete: no/yes"、"novalidate"：
- autocomplete：規定是否啟用表單的自動完成功能，默認on。（自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。）。
- novalidate：如果使用該屬性，則提交表單時不進行驗證（關閉控件自動校驗功能）。
2、郵箱：email
<form>郵箱：<input type="email" name="email"> </form>效果圖：
3、網址：url
協議、域名都要輸入進去（https://www.baidu.com，如果直接www.baidu.com會提示輸入錯誤的），否則觸發表單校驗。 <form>網址：<input type="url" name="url"> </form>效果圖：
4、數字：number
輸入表單數number屬性的時候，在表單尾部會有一個上下的箭頭，用來選擇數字。另外表單里的step屬性表示：點擊的時候每一次增加或減少的步數；max屬性表示：增加到的最大范圍，min屬性表示減小到的最小范圍。 <form>年齡：<input type="number" name="" step="3" max="120" > </form>效果圖：
5、電話號碼：tel
<form>電話號碼： <input type="tel" name="tel"> </form>6、顏色：color
<form>郵箱：<input type="color" name="color"> </form>效果圖：
7、時間：time
<form>時間：<input type="time" name="time"> </form>效果圖：
8、日期：date
<form>日期： <input type="date" name="date"> </form>效果圖：
9、時間日期：datetime
<form>時間日期： <input type="datetime" name="datetime"> </form>10、周：week
<form>周： <input type="week" name="week"> </form>效果圖：
11、月：month
<form>月： <input type="month" name="month"> </form>效果圖：
12、滑塊：range
max：規定允許的最大值，min：規定允許的最小值。 <form>滑塊： <input type="range" name="range" min="1" max="20"> </form>效果圖：
5.2 表單元素
不是所有瀏覽器都支持HTML5新的表單元素的，但是不影響使用，即使不支持仍然可以顯示常規的表單。1、datalist
在Web設計中,經常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。在以前，如果要實現這樣的功能，必須要求開發者使用一些Javascript的技巧或相關的框架進行ajax調用，需要一定的編程工作量。但隨著HTML5的慢慢普及，開發者可以使用其中的新的DataList標記就能快速開發出十分漂亮的AutoComplete組件的效果。datalist有點類似于select下拉菜單，datalist元素規定輸入域的選項列表。列表是通過datalist內的 option元素創建的。如需把datalist綁定到輸入域，請用輸入域的list屬性引用datalist的id：
<p>瀏覽器版本：<input list="words"> </p><datalist id="words"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"><option value="Sogou"><option value="Maxthon"> </datalist>效果圖：
5.3 表單屬性
在HTML5中， <form>和<input>標簽添加了幾個新屬性。其中<form>標簽的autocomplete、novalidate屬性，我們在上面都講過了，現在我們來看看<input>提供了哪些新的屬性。1、autocomplete 自動完成
autocomplete屬性規定form或input域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。提示：autocomplete屬性有可能在form元素中默認是開啟的，而在input元素中是關閉的。需要手動添加"on"。
示例代碼：
<input type="text" autocomplete="on">2、placeholder 占位符
placeholder屬性提供一種提示（hint），描述輸入域所期待的值。簡短的提示在用戶輸入值前會顯示在輸入域上。示例代碼：
用戶名：<input type="text" placeholder="請輸入用戶名">效果圖：
3、autofocus 自動獲得焦點
autofocus屬性是一個boolean屬性。autofocus屬性規定在頁面加載時，域自動地獲得焦點。示例代碼：
用戶名：<input type="text" name="username" autofocus>4、multiple 多文件上傳
multiple屬性是一個boolean屬性。multiple屬性規定<input>元素中可選擇多個值。示例代碼：
<form action="xxx.php">選擇圖片: <input type="file" name="img" multiple><input type="submit"> </form>此時上傳文件時就可以同時上傳多個文件了。
5、form 綁定輸入域
當一個輸入表單input，不在一個表單域form中的時候。通過form屬性和表單域的id可以將輸入表單綁定到表單域中。示例代碼：
<form action="xxx.php" id="form1">用戶名: <input type="text" name="username"><br><input type="submit" value="提交"> </form>密碼: <input type="text" name="pwd" form="form1">點擊提交按鈕，表單域外部的“密碼”輸入框內容也會提交。
6、required 必填項
required屬性是一個boolean屬性。required屬性規定必須在提交之前填寫輸入域（不能為空）。示例代碼：
用戶名: <input type="text" name="usrname" required>7、pattern 自定義驗證
pattern屬性描述了自定義一個正則表達式用于驗證<input>元素的值。示例代碼：
<form action="">用戶名: <input type="text" name="username" pattern="[A-Za-z]{3}" title="三位英文字母"><input type="submit"> </form>效果圖：
5.4 表單事件
這里給大家介紹兩個表單事件oninput：用戶輸入的時候觸發的事件；oninvalid：表單驗證無法通過時候觸發的事件示例代碼：
<form action="">用戶名：<input type="text" name="username" id="user"><!-- 限定密碼格式只能是數字 -->密 碼： <input type="text" name="pwd" id="pwd" pattern="\d+"><input type="submit"> </form><script type="text/javascript">var user = document.getElementById('user');var pwd = document.getElementById('pwd');// 用戶輸入的時候觸發user.oninput = function(){alert(1);}// 驗證無法通過的時候觸發pwd.oninvalid = function(){alert(2);} </script>效果圖：
當驗證無法通過的時候，可以通過setCustomValidity方法添加或修改提示內容：
pwd.oninvalid = function(){this.setCustomValidity("密碼格式錯誤"); }效果圖：
5.5 表單樣式
這里主要是說下如何修改placeholder的默認樣式。- 火狐： input::-moz-placeholder{}
- 谷歌： input::-webkit-input-placeholder {}
通過雙偽元素選擇器，即可改變placeholder文字的樣式。
6. 多媒體標簽
在HTML5之前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放，但是大多情況下，并非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的非常復雜，并且移動設備的瀏覽器并不支持Flash插件。6.1 音頻
HTML5通過<audio>標簽來解決音頻播放的問題。示例代碼：
<!-- 通過src指定音頻文件路徑即可 --> <audio src="./xxx.mp3"></audio>播放格式
由于版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考：
處理兼容性
在<audio>與</audio>之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。<audio>元素允許使用多個 <source>元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。 <audio><!-- 通過source標簽指定多格式音頻文件 --><source src="xxx.ogg" type="audio/ogg"><source src="xxx.mp3" type="audio/mpeg"><source src="xxx.wav" type="audio/wav">您的瀏覽器不支持 audio 元素。 </audio>音頻控制屬性
通過附加屬性可以更友好控制音頻的播放.- autoplay 自動播放
- controls 是否顯示控制條
- loop 循環播放
6.2 視頻
HTML5通過<video>標簽來解決音頻播放的問題。示例代碼：
<!-- 通過src指定視頻文件路徑即可 --> <video src="./xxx.mp4"></video>播放格式
由于版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考:
處理兼容性
<video width="320" height="240" controls><source src="xxx.mp4" type="video/mp4"><source src="xxx.ogg" type="video/ogg">您的瀏覽器不支持Video標簽。 </video>6.3 音頻/視頻方法
通過附加屬性可以更加友好的控制音頻、視頻的播放。1、autoplay 自動播放
autoplay屬性設置或返回音視頻是否在加載后即開始播放。設置autoplay屬性：
audio|video.autoplay=true|false返回autoplay屬性：
audio|video.autoplay啟用自動播放，并重載視頻：
var video=document.getElementById("video1"); video.autoplay = true; video.load();2、buffered 已緩沖部分
buffered屬性返回TimeRanges對象。TimeRanges對象表示用戶的音視頻緩沖范圍。緩沖范圍指的是已緩沖音視頻的時間范圍。如果用戶在音視頻中跳躍播放，會得到多個緩沖范圍。返回值：
TimeRanges對象，表示音視頻的已緩沖部分。TimeRanges對象屬性：
- length - 獲得音視頻中已緩沖范圍的數量
- start(index) - 獲得某個已緩沖范圍的開始位置
- end(index) - 獲得某個已緩沖范圍的結束位置
注意：首個緩沖范圍的下標是0。
示例代碼：
獲得視頻的第一段緩沖范圍（部分），以秒計：
var video = document.getElementById("video1"); alert("Start: " + video.buffered.start(0) + " End: " + video.buffered.end(0));3、controls 是否顯示控制條
controls屬性設置或返回瀏覽器應當顯示標準的音視頻控件。設置controls屬性：
audio|video.controls=true|false返回controls屬性：
audio|video.controls啟用視頻控件：
var video = document.getElementById("video1"); video.controls = true;4、currentSrc 返回當前資源的URL
currentSrc熟悉返回當前音頻/視頻的URL。如果未設置音頻/視頻，則返回空字符串。獲得當前視頻的URL：
video = document.getElementById("video1"); alert(video.currentSrc);5、currentTime 當前播放位置（時間s）
| autoplay | 資源加載完成后自動播放視頻或音頻 |
| buffered | 返回表示音頻/視頻已緩沖部分的TimeRanges對象 |
| controls | 是否顯示控制條 |
| currentSrc | 返回當前音頻/視頻的URL |
| currentTime | 設置或返回音頻/視頻中的當前播放位置（以秒計） |
| defaultMuted | 設置或返回音頻/視頻默認是否靜音 |
| defaultPlaybackRate | 設置或返回音頻/視頻的默認播放速度 |
| duration | 返回當前音頻/視頻的長度（以秒計） |
| ended | 返回音頻/視頻的播放是否已結束 |
| error | 返回表示音頻/視頻錯誤狀態的MediaError對象 |
| loop | 設置或返回音頻/視頻是否應在結束時重新播放 |
| mediaGroup | 設置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素） |
| muted | 設置或返回音頻/視頻是否靜音 |
| networkState | 返回音頻/視頻的當前網絡狀態 |
| paused | 設置或返回音頻/視頻是否暫停 |
| playbackRate | 設置或返回音頻/視頻播放的速度 |
| played | 返回表示音頻/視頻已播放部分的TimeRanges對象 |
| preload | 設置或返回音頻/視頻是否應該在頁面加載后進行加載 |
| readyState | 返回音頻/視頻當前的就緒狀態 |
| seekable | 返回表示音頻/視頻可尋址部分的TimeRanges對象 |
| seeking | 返回用戶是否正在音頻/視頻中進行查找 |
| src | 設置或返回音頻/視頻元素的當前來源 |
| startDate | 返回表示當前時間偏移的Date對象 |
| textTracks | 返回表示可用文本軌道的TextTrackList對象 |
| videoTracks | 返回表示可用視頻軌道的VideoTrackList對象 |
| volume | 設置或返回音頻/視頻的音量 |
7. DOM 擴展
7.1 獲取元素
html5中新添了兩個查找元素的屬性，分別是：querySelector，querySelectorAll。 <ul><li class="one"><a href="#">文字1</a></li><li class="two"><a href="#">文字2</a></li><li class="three"><a href="#">文字3</a></li> </ul><script type="text/javascript">//獲取元素的方式var a= document.querySelector(".one a");a.style.color="red";//通過該方式可以將所有對應的元素選中 返回的是一個偽數組var a1= document.querySelectorAll("a"); </script>7.2 類名操作
html5中新添加了一個操作類名的對象：classList。我們可以通過它里面的方法對元素的類進行操作。1、添加類（add）
添加類的時候，獲取到元素之后，通過classList的add方法添加一個類名，但是一次只能添加一個類名，否則會報錯。 <style type="text/css">.bgc {width: 300px;height: 300px;background-color: pink;}.fonts{font-size: 26px;} </style><div>文字</div><script type="text/javascript">var div=document.querySelector("div");// 添加樣式 只能單獨添加div.classList.add("bgc"); div.classList.add("fonts"); </script>2、移除類（remove）
移除類的時候，獲取到元素之后，通過classList的remove方法移除一個類名。 <style type="text/css">.bgc {width: 300px;height: 300px;background-color: pink;}.fonts{font-size: 26px;} </style><div class="bgc fonts">文字</div><script type="text/javascript">var div=document.querySelector("div");// 移除樣式 只能單獨移除div.classList.remove("bgc"); div.classList.remove("fonts"); </script>3、切換類（toggle）
當元素上沒有某個類時，它就新增這個類；如果元素已經有了這個類，它就是刪除它，就是切換操作。 <style type="text/css">.bgc {width: 300px;height: 300px;background-color: pink;} </style><div class="bgc">文字</div><script type="text/javascript">var div=document.querySelector("div");// 切換樣式 因為元素已經有“bac”這個類名了，所以這里是移除的功能div.classList.toggle("bgc"); </script>4、是否存在某個類（contains）
判斷獲取的元素中是否存在某個類名，返回值為true或者false。 <style type="text/css">.bgc {width: 300px;height: 300px;background-color: pink;} </style><div class="bgc">文字</div><script type="text/javascript">var div=document.querySelector("div");// 判斷元素是否擁有某個類名div.classList.contains("bgc"); // true </script>7.3 自定義屬性
HTML5規定可以為元素添加非標準的屬性，但要添加前綴data-，目的是為元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭。如：
<p data-info="tags"></p>獲取自定義屬性（dataset['自定義屬性名稱']）
通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。 <p data-info="describe" data-num="123">這是一段描述</p><script>var tag = document.querySelector('p');var data = tag.dataset;console.log(data); // 打印的是一個對象 DOMStringMapconsole.log(data['info']); // "describe"console.log(data['num']); // "123" </script>
Node.dataset是以對象形式存在的，當我們為同一個DOM節點指定了多個自定義屬性時，Node.dataset則以鍵值對的形式存儲了所有的自定義屬性的值。
設置自定義屬性（dataset['自定義屬性名稱']="設定屬性值"）
通過過Node.dataset['info']="值" 我們便可以設置自定義的屬性值。 <p data-info="describe" data-num="123">這是一段描述</p><script>var tag = document.querySelector('p');var data = tag.dataset;data['name'] = "Ryan";console.log(data); // 多了一個name屬性 </script>注意
當自定義屬性中除了data-之外中間出現“-”連接符時，設置和獲取的時候需要將屬性名轉成駝峰的格式才能正常的設置和獲取。 <p data-my-info="information">這是一段描述！</p><script>var tag = document.querySelector('p');var data = tag.dataset;data['myInfo'] = "info";console.log(data); // {myInfo:"info"} </script>8. 網絡狀態
我們可以通過window.navigator.onLine來檢測，用戶當前的網絡狀況，返回一個布爾值通過給window綁定監聽事件，可以監測瀏覽器的一些狀態信息
- 網絡從無到有時觸發“online”方法
- 網絡從有到無時觸發“offline”方法
9. 地理定位
在HTML規范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開發互聯網應用，即基于位置服務 (Location Base Service)9.1 獲取地理信息方式
獲取地理信息的方式一共有三種分別是：- IP地址
-
三維坐標
- GPS（Global Positioning System，全球定位系統）
- Wi-Fi
- 手機信號
- 用戶自定義數據
如下表：
下表對不同獲取方式的優缺點進行了比較，瀏覽器會自動以最優的方式去獲取用戶地理位置| IP 地址 | 任何地方都可以用，在服務器端處理 | 不精確（經常出錯，一般精確到城市級）運算代價大 |
| GPS | 很精確 | 定位時間長，耗電量大；室內效果差；需要額外硬件設備支持 |
| Wi-Fi | 精確，可在室內使用，簡單、快捷 | 在鄉村這些Wi-Fi接入點少的地區無法實現用 |
| 手機信號 | 相當準確，可在室內使用，簡單、快捷 | 需要能夠訪問手機或其 modem 設備 |
| 用戶自定義 | 可獲得比程序定位服務更準確的位置數據，用戶自行輸入可能比自動檢測更快 | 可能很不準確，特別是當用戶位置變更后 |
9.2 隱私
HTML5 Geolocation規范提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。9.3 使用地理定位
有兩個方法都可以獲取到當前的地理定位，只是功能上稍微有點區別。 navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) // 方法：獲取當前地理信息navigator.geolocation.watchPosition(successCallback, errorCallback, options) // 重復獲取當前地理信息當成功獲取地理信息后
會調用succssCallback，并返回一個包含位置信息的對象position。 position.coords.latitude // 緯度 position.coords.longitude // 經度成功對象position：
| coords.latitude | 十進制數的緯度 |
| coords.longitude | 十進制數的經度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米計 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，從正北開始以度計 |
| coords.speed | 速度，以米/每秒計 |
| timestamp | 響應的日期/時間 |
當獲取地理信息失敗后
會調用errorCallback，并返回錯誤信息error返回無符號的、簡短的錯誤碼，詳見下表：
| 1 | PERMISSION_DENIED | 用戶不允許地理定位 |
| 2 | POSITION_UNAVAILABLE | 無法獲取當位置 |
| 3 | TIMEOUT | 超時操作 |
示例代碼：
獲取當前位置的經緯度 window.navigator.geolocation.getCurrentPosition(function(position){// 緯度var lat = position.coords.latitude;// 經度var long = position.coords.longitude;console.log('你當前的緯度為：' + lat + '經度為：' + long)},function(err){ // 錯誤時回調信息if(err.code == 1){alert('沒有權限')}else if(err.code == 2){alert('內部錯誤');}else{alert('超時')} },{// 超時設置timeout: 5000 });9.4 百度地圖的用法
結合百度地圖的API，我們可以使用它上面的一些功能，比如在地圖上定位等等等...進入百度地圖開放平臺官網：
網址：http://lbsyun.baidu.com/找到Web開發 -> javascript API
直接找到示例DEMO，復制源代碼，需要獲取密鑰 （自己申請，需要一到兩個工作日）
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微軟雅黑";}</style><script type="text/javascript" src="你申請的秘鑰"></script><title>地圖展示</title> </head><body><div id="allmap"></div> </body></html> <script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("allmap"); // 創建Map實例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點坐標和地圖級別map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 </script>獲取當前所在位置，設置到地圖上
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微軟雅黑";}</style><script type="text/javascript" src="你申請的秘鑰"></script><title>地圖展示</title> </head><body><div id="allmap"></div> </body></html> <script type="text/javascript">window.navigator.geolocation.getCurrentPosition(function (pos) {// 緯度var lat = pos.coords.latitude;// 經度var long = pos.coords.longitude;console.log('你當前的緯度為：' + lat + '經度為：' + long)// 百度地圖API功能var map = new BMap.Map("allmap"); // 創建Map實例map.centerAndZoom(new BMap.Point(long, lat), 15); // 初始化地圖,設置中心點坐標和地圖級別map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放}, function (err) {if (err.code == 1) {alert('沒有權限')} else if (err.code == 2) {alert('內部錯誤');} else {alert('超時')}}, {// 超時設置timeout: 5000}); </script>效果圖：
10. WEB 存儲
隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，每一次發送請求都會攜帶上cookie，會造成帶寬的浪費，給開發帶來諸多不便，HTML5規范則提出解決方案。web存儲的含義是將數據存儲到用戶的電腦上，這樣可以緩解服務器的壓力，并且提高體驗。10.1 特性
- 設置、讀取方便
- 容量較大，sessionStorage約5M，localStorage約20M
- 只能存儲字符串，可以將對象JSON.stringify()轉成字符串后存儲
10.2 方法詳解
- setItem(key, value)設置存儲內容
- getItem(key)讀取存儲內容
- removeItem(key)刪除鍵值為key的存儲內容
- clear()清空所有存儲內容
- key(n)以索引值來獲取鍵名
- length 存儲的數據的個數
示例代碼：
// 在本地存儲了一個鍵為：username 值為 Ryan's 的這個一個對象 // 在chrome的控制臺的application里面的Storage可以查看 window.localStorage.setItem('username1',"Ryan's"); window.localStorage.setItem('username2',"Levi's");window.sessionStorage.setItem('username1',"Ryan's"); window.sessionStorage.setItem('username2',"Levi's");// 索引鍵的名字 alert(window.localStorage.key(0)); alert(window.sessionStorage.key(0));// 取數據 alert(window.localStorage.getItem('username1')); alert(window.sessionStorage.getItem('username1'));// 獲取本地數據的長度 alert(window.localStorage.length); alert(window.sessionStorage.length);// 刪除數據 window.localStorage.removeItem('username1'); window.sessionStorage.removeItem('username1');// 清空所有的數據 window.localStorage.clear(); window.sessionStorage.clear();10.3 sessionStorage
特點：
- 生命周期為關閉當前頁面窗口
- 不能多窗口下數據共享（同源策略）
- 通過跳轉可以解決，頁面跳轉的時候可以通過session實現數據共享
10.4 localStorage
特點：
- 生命周期為永久有效，除非手動刪除或用代碼刪除
- 可以多窗口共享（同源策略）
- 一些不涉及到安全的一些數據（不要太過龐大）都可以存儲到本地
示例代碼：
window.localStorage.setItem('age',18)效果圖：
10.5 差異性
比較cookie，session，local三者之間的相同點和不同點相同點：
- 都是存儲數據，存儲在web端，并且都是同源
不同點：
- （1）cookie只有4K大小 并且每一次請求都會帶上cookie體驗不好，浪費帶寬
- （2）session和local直接存儲在本地，請求不會攜帶，并且容量比cookie要大的多
- （3）session是臨時會話，當窗口被關閉的時候就清除掉 ，而local永久存在，cookie有過期時間
- （4）cookie和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a鏈接跳轉的新窗口
11. 文件讀取
通過FileReader對象我們可以讀取本地存儲的文件，可以使用File對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象，也可以來自由拖放操作生成的DataTransfer。1、FileList 對象
由于HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過<input>上傳文件后得到的是一個FileList對象（偽數組形式）。2、FileReader 對象
HTML5新增內建對象，可以讀取本地文件內容。var reader = new FileReader;可以實例化一個對象。 var data = file.files[0]; // 創建一個讀取對象 var fr = new FileReader(); // 讀取文件fr.readAsDataURL(data);readAsDataURL()以DataURL形式讀取文件
3、事件監聽
onload當文讀取完成時調用 fr.addEventListener('load', function(){//獲取讀取的結果 //result屬性里面存儲的就是讀取文件的結果var result = fr.result; })完整代碼：
<input type="file" multiple name="" id=""> <button>點擊讀取文件</button><script type="text/javascript"> var btn = document.querySelector('button'); var file = document.querySelector('input[type="file"]'); var fr = []; btn.onclick = function(){ // 讀取文件for(var i = 0; i < file.files.length; i++){fr[i] = new FileReader();fr[i].readAsDataURL(file.files[i]);}// fr.readAsDataURL(data);// 讀取文件是一個耗時的操作，所以需要用事件監聽讀取完畢，// load事件是文件讀取完畢之后觸發的事件for(var j = 0; j < fr.length; j++){fr[j].addEventListener('load', function(){//獲取讀取的結果 //result屬性里面存儲的就是讀取文件的結果console.log(fr);var result = this.result; // 創建圖片對象var img = document.createElement('img');img.src = result;document.body.appendChild(img); })} }</script>12. 拖拽
在HTML5的規范中，我們可以通過為元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啟的。1、拖拽元素
頁面中設置了draggable="true"屬性的元素，可以被拖拽，其中<img>、<a>標簽默認是可以被拖拽的。2、目標元素
頁面中任何一個元素都可以成為目標元素。3、事件監聽
根據元素類型的不同，需要設置不同的事件監聽：（1）、拖拽元素
- ondrag 應用于拖拽元素，整個拖拽過程都會調用
- ondragstart 應用于拖拽元素，當拖拽開始時調用
- ondragend 應用于拖拽元素，當拖拽結束時調用
（2）、目標元素
- ondragenter 應用于目標元素，當拖拽元素進入時調用
- ondragleav 應用于目標元素，當鼠標離開目標元素時調用
- ondragver 應用于目標元素，當停留在目標元素上時調用
- ondrop 應用于目標元素，當在目標元素上松開鼠標時調用
示例代碼： 將圖片拖拽到瀏覽器內顯示在div內
<style>.info {width: 500px;height: 500px;border: 1px solid #000;position: absolute;left: 50%;top: 50%;line-height: 500px;text-align: center;transform:translate(-50%,-50%);box-shadow: 0 0 10px 2px rgba(0,0,0,.5); border-radius: 5px;}.info img {width: 100%;height: 100%;} </style><!-- 目標元素 --> <div class="info">將圖片拖拽至此</div><script type="text/javascript">var info = document.querySelector('.info');// 獲取html元素var oHtml = document.documentElement;// 問題：瀏覽器默認會將外部拖拽的文件直接打開，我們需要阻止掉// 將外部文件拖拽進瀏覽器里面松開鼠標的時候其實就是在html頁面上觸發了drop事件，我們只需要在drop事件的時候阻止默認事件oHtml.ondrop = function(e){// 阻止默認事件e.preventDefault();}/*drop事件默認是被阻止的，所以還需要在dragover的時候阻止默認事件*/oHtml.ondragover = function(e){e.preventDefault();}info.ondrop = function(e){// 獲取外部拖拽進來的文件// console.log(e);var data = e.dataTransfer.files[0]; var fr = new FileReader();fr.readAsDataURL(data);fr.addEventListener('load',function(){var result = fr.result;var img = document.createElement('img');img.src = result;info.innerHTML = '';info.appendChild(img);})} </script>效果圖
總結
以上是生活随笔為你收集整理的HTML5 入门详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言编程 简单展开扫雷游戏
- 下一篇： 2017年html5行业报告,云适配发布