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

HTML

HTML5 入门详解

發(fā)布時間：2025/3/15 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 入门详解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 認識HTML5

HTML5并不僅僅只是作為HTML標記語言的一個最新版本，更重要的是它制定了Web應(yīng)用開發(fā)的一系列標準，成為第一個將Web做為應(yīng)用開發(fā)平臺的HTML語言。

HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發(fā)者創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用，還提供了一系列Javascript API，如地理定位、重力感應(yīng)、硬件訪問等，可以在瀏覽器內(nèi)實現(xiàn)類原生應(yīng)用，甚至結(jié)合Canvas我們可開發(fā)網(wǎng)頁版游戲，同時結(jié)合CSS3的過渡、轉(zhuǎn)換、動畫等特性，可以極大的增強用戶體驗，提升開發(fā)功能的可應(yīng)用性。

我們?nèi)粘Ｓ懻摰腍5其實是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術(shù)組合而成的一個應(yīng)用開發(fā)平臺。

2. 語法規(guī)范

隨著Web技術(shù)的更新，HTML也先后經(jīng)歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時對語法規(guī)范也做了一些調(diào)整，為了能夠保證瀏覽器可以兼容不同版本語法規(guī)范的，我們可以使用<!DOCTYPE>指示瀏覽器應(yīng)該如何處理我們的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，但允許框架集內(nèi)容。 <!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，但允許框架集內(nèi)容。 <!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提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)：標簽描述

<article>	定義頁面獨立的內(nèi)容區(qū)域（文章）。
<aside>	定義頁面的側(cè)邊欄內(nèi)容（側(cè)邊欄）。
<bdi>	允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。
<command>	定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕
<details>	用于描述文檔或文檔某個部分的細節(jié)
<dialog>	定義對話框，比如提示框
<summary>	標簽包含details元素的標題
<figure>	規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義<figure>元素的標題
<footer>	定義section或document的頁腳。
<header>	定義了文檔的頭部區(qū)域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導(dǎo)航鏈接的部分。
<progress>	定義任何類型的任務(wù)的進度。
<ruby>	定義ruby注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發(fā)音。
<rp>	在ruby注釋中使用，定義不支持ruby元素的瀏覽器所顯示的內(nèi)容。
<section>	定義文檔中的節(jié)（section、區(qū)段）。
<time>	定義日期或時間。
<wbr>	規(guī)定在文本中的何處適合添加換行符。

本質(zhì)上新語義標簽與<div>、<span>沒有區(qū)別，只是其具有語義性，使用時除了在HTML結(jié)構(gòu)上需要注意外，其它和普通標簽的使用無任何差別，可以理解成<div class="nav">相當于<nav>。不要好奇，它只是一個標簽！

盡量避免全局使用header、footer、aside等語義標簽。

4. HTML5 瀏覽器支持

對于目前主流的瀏覽器來說，都已經(jīng)支持HTML5了，但是到了Internet Explorer 9，IE才開始支持HTML5，對于之前的舊版本，我們就需要考慮到兼容性問題。

1、將 HTML5 元素定義為塊元素

HTML5 新增了幾個具有語義化的標簽，這些標簽都是塊級元素，在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內(nèi)元素(inline)對待，所以我們只需要在初始化的時候?qū)⑵滢D(zhuǎn)換成塊元素(block)即可使用。 header, section, footer, aside, nav, main, article, figure {display: block; }

2、通過 js 動態(tài)創(chuàng)建標簽

在IE9版本以下，并不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創(chuàng)建的自定義標簽，于是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創(chuàng)建一遍，這樣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創(chuàng)建出來的標簽時行內(nèi)元素，所以同樣的需要將它們轉(zhuǎn)換成塊級元素。

3、Shiv 解決方案

在實際開發(fā)中我們更多采用的是通過檢測IE瀏覽器的版本來加載第三方的一個JS庫來解決兼容問題，這個庫文件會幫自動通過document.createElement('tagName')創(chuàng)建所有HTML5的新標簽。針對IE瀏覽器html5shiv是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節(jié)點包裹子元素，并且不能應(yīng)用CSS樣式的問題。

引入本地html5shiv.min.js文件：

lte：表示小于等于；當瀏覽器版本小于等于IE8的時候，引用html5shiv.min.js文件。

引入遠程靜態(tài)資源庫：

以上的注釋代碼只有在IE瀏覽器下次才會識別里面的內(nèi)容，其他瀏覽器直接當注釋識別。

完整示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兼容性處理</title>  </head><body><h1>我正在處理兼容性</h1><article>我在IE下也能顯示</article></body> </html>

注意：html5shiv.js引用代碼必須放在<head>元素中，因為IE瀏覽器在解析HTML5新元素時需要先加載該文件。

5. 表單

伴隨著互聯(lián)網(wǎng)富應(yīng)用以及移動開發(fā)的興起，傳統(tǒng)的Web表單已經(jīng)越來越不能滿足開發(fā)的需求，所以HTML5在Web表單方向也做了很大的改進，如拾色器、日期/時間組件等，使表單處理變的更加高效。

5.1 表單控件

html5中新增的一些表單控件，例如email屬性的輸入框，它可以檢測你的輸入內(nèi)容是否符合一個郵箱的格式，自動進行表單校驗。

1、表單域：form

我們都知道<form>標簽用于為用戶輸入創(chuàng)建HTML表單。表單能夠包含input元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含menus、textarea、fieldset、legend和label元素。

表單用于向服務(wù)器傳輸數(shù)據(jù)。

在html5中<form>表單域添加了兩個新的屬性："autocomplete: no/yes"、"novalidate"：

autocomplete：規(guī)定是否啟用表單的自動完成功能，默認on。（自動完成允許瀏覽器預(yù)測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。）。
novalidate：如果使用該屬性，則提交表單時不進行驗證（關(guān)閉控件自動校驗功能）。

2、郵箱：email

效果圖：

3、網(wǎng)址：url

協(xié)議、域名都要輸入進去（https://www.baidu.com，如果直接www.baidu.com會提示輸入錯誤的），否則觸發(fā)表單校驗。 <form>網(wǎng)址：<input type="url" name="url"> </form>

效果圖：

4、數(shù)字：number

輸入表單數(shù)number屬性的時候，在表單尾部會有一個上下的箭頭，用來選擇數(shù)字。另外表單里的step屬性表示：點擊的時候每一次增加或減少的步數(shù)；max屬性表示：增加到的最大范圍，min屬性表示減小到的最小范圍。 <form>年齡：<input type="number" name="" step="3" max="120" > </form>

效果圖：

5、電話號碼：tel

6、顏色：color

效果圖：

7、時間：time

效果圖：

8、日期：date

效果圖：

9、時間日期：datetime

10、周：week

效果圖：

11、月：month

效果圖：

12、滑塊：range

max：規(guī)定允許的最大值，min：規(guī)定允許的最小值。 <form>滑塊： <input type="range" name="range" min="1" max="20"> </form>

效果圖：

5.2 表單元素

不是所有瀏覽器都支持HTML5新的表單元素的，但是不影響使用，即使不支持仍然可以顯示常規(guī)的表單。

1、datalist

在Web設(shè)計中,經(jīng)常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。在以前，如果要實現(xiàn)這樣的功能，必須要求開發(fā)者使用一些Javascript的技巧或相關(guān)的框架進行ajax調(diào)用，需要一定的編程工作量。但隨著HTML5的慢慢普及，開發(fā)者可以使用其中的新的DataList標記就能快速開發(fā)出十分漂亮的AutoComplete組件的效果。

datalist有點類似于select下拉菜單，datalist元素規(guī)定輸入域的選項列表。列表是通過datalist內(nèi)的 option元素創(chuàng)建的。如需把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屬性，我們在上面都講過了，現(xiàn)在我們來看看<input>提供了哪些新的屬性。

1、autocomplete 自動完成

autocomplete屬性規(guī)定form或input域應(yīng)該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應(yīng)該在該域中顯示填寫的選項。

提示：autocomplete屬性有可能在form元素中默認是開啟的，而在input元素中是關(guān)閉的。需要手動添加"on"。

示例代碼：

2、placeholder 占位符

placeholder屬性提供一種提示（hint），描述輸入域所期待的值。簡短的提示在用戶輸入值前會顯示在輸入域上。

示例代碼：

用戶名：<input type="text" placeholder="請輸入用戶名">

效果圖：

3、autofocus 自動獲得焦點

autofocus屬性是一個boolean屬性。autofocus屬性規(guī)定在頁面加載時，域自動地獲得焦點。

示例代碼：

用戶名：<input type="text" name="username" autofocus>

4、multiple 多文件上傳

multiple屬性是一個boolean屬性。multiple屬性規(guī)定<input>元素中可選擇多個值。

示例代碼：

此時上傳文件時就可以同時上傳多個文件了。

5、form 綁定輸入域

當一個輸入表單input，不在一個表單域form中的時候。通過form屬性和表單域的id可以將輸入表單綁定到表單域中。

示例代碼：

點擊提交按鈕，表單域外部的“密碼”輸入框內(nèi)容也會提交。

6、required 必填項

required屬性是一個boolean屬性。required屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。

示例代碼：

用戶名: <input type="text" name="usrname" required>

7、pattern 自定義驗證

pattern屬性描述了自定義一個正則表達式用于驗證<input>元素的值。

示例代碼：

效果圖：

5.4 表單事件

這里給大家介紹兩個表單事件oninput：用戶輸入的時候觸發(fā)的事件；oninvalid：表單驗證無法通過時候觸發(fā)的事件

示例代碼：

<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');// 用戶輸入的時候觸發(fā)user.oninput = function(){alert(1);}// 驗證無法通過的時候觸發(fā)pwd.oninvalid = function(){alert(2);} </script>

效果圖：

當驗證無法通過的時候，可以通過setCustomValidity方法添加或修改提示內(nèi)容：

pwd.oninvalid = function(){this.setCustomValidity("密碼格式錯誤"); }

效果圖：

5.5 表單樣式

這里主要是說下如何修改placeholder的默認樣式。

火狐： input::-moz-placeholder{}
谷歌： input::-webkit-input-placeholder {}

通過雙偽元素選擇器，即可改變placeholder文字的樣式。

6. 多媒體標簽

在HTML5之前，在網(wǎng)頁上播放音頻/視頻的通用方法是利用Flash來播放，但是大多情況下，并非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的非常復(fù)雜，并且移動設(shè)備的瀏覽器并不支持Flash插件。

6.1 音頻

HTML5通過<audio>標簽來解決音頻播放的問題。

示例代碼：

<audio src="./xxx.mp3"></audio>

播放格式

由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考：

處理兼容性

在<audio>與</audio>之間你需要插入瀏覽器不支持的<audio>元素的提示文本。<audio>元素允許使用多個 <source>元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。 <audio><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 循環(huán)播放

6.2 視頻

HTML5通過<video>標簽來解決音頻播放的問題。

示例代碼：

<video src="./xxx.mp4"></video>

播放格式

由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考:

處理兼容性

<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屬性設(shè)置或返回音視頻是否在加載后即開始播放。

設(shè)置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 - 獲得音視頻中已緩沖范圍的數(shù)量
start(index) - 獲得某個已緩沖范圍的開始位置
end(index) - 獲得某個已緩沖范圍的結(jié)束位置

注意：首個緩沖范圍的下標是0。

示例代碼：

獲得視頻的第一段緩沖范圍（部分），以秒計：

var video = document.getElementById("video1"); alert("Start: " + video.buffered.start(0) + " End: " + video.buffered.end(0));

3、controls 是否顯示控制條

controls屬性設(shè)置或返回瀏覽器應(yīng)當顯示標準的音視頻控件。

設(shè)置controls屬性：

audio|video.controls=true|false

返回controls屬性：

audio|video.controls

啟用視頻控件：

var video = document.getElementById("video1"); video.controls = true;

4、currentSrc 返回當前資源的URL

currentSrc熟悉返回當前音頻/視頻的URL。如果未設(shè)置音頻/視頻，則返回空字符串。

獲得當前視頻的URL：

video = document.getElementById("video1"); alert(video.currentSrc);

5、currentTime 當前播放位置（時間s）

屬性描述

autoplay	資源加載完成后自動播放視頻或音頻
buffered	返回表示音頻/視頻已緩沖部分的TimeRanges對象
controls	是否顯示控制條
currentSrc	返回當前音頻/視頻的URL
currentTime	設(shè)置或返回音頻/視頻中的當前播放位置（以秒計）
defaultMuted	設(shè)置或返回音頻/視頻默認是否靜音
defaultPlaybackRate	設(shè)置或返回音頻/視頻的默認播放速度
duration	返回當前音頻/視頻的長度（以秒計）
ended	返回音頻/視頻的播放是否已結(jié)束
error	返回表示音頻/視頻錯誤狀態(tài)的MediaError對象
loop	設(shè)置或返回音頻/視頻是否應(yīng)在結(jié)束時重新播放
mediaGroup	設(shè)置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素）
muted	設(shè)置或返回音頻/視頻是否靜音
networkState	返回音頻/視頻的當前網(wǎng)絡(luò)狀態(tài)
paused	設(shè)置或返回音頻/視頻是否暫停
playbackRate	設(shè)置或返回音頻/視頻播放的速度
played	返回表示音頻/視頻已播放部分的TimeRanges對象
preload	設(shè)置或返回音頻/視頻是否應(yīng)該在頁面加載后進行加載
readyState	返回音頻/視頻當前的就緒狀態(tài)
seekable	返回表示音頻/視頻可尋址部分的TimeRanges對象
seeking	返回用戶是否正在音頻/視頻中進行查找
src	設(shè)置或返回音頻/視頻元素的當前來源
startDate	返回表示當前時間偏移的Date對象
textTracks	返回表示可用文本軌道的TextTrackList對象
videoTracks	返回表示可用視頻軌道的VideoTrackList對象
volume	設(shè)置或返回音頻/視頻的音量

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";//通過該方式可以將所有對應(yīng)的元素選中返回的是一個偽數(shù)組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）

當元素上沒有某個類時，它就新增這個類；如果元素已經(jīng)有了這個類，它就是刪除它，就是切換操作。 <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");// 切換樣式因為元素已經(jīng)有“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規(guī)定可以為元素添加非標準的屬性，但要添加前綴data-，目的是為元素提供與渲染無關(guān)的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭。

如：

獲取自定義屬性（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是以對象形式存在的，當我們?yōu)橥粋€DOM節(jié)點指定了多個自定義屬性時，Node.dataset則以鍵值對的形式存儲了所有的自定義屬性的值。

設(shè)置自定義屬性（dataset['自定義屬性名稱']="設(shè)定屬性值"）

通過過Node.dataset['info']="值" 我們便可以設(shè)置自定義的屬性值。 <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-之外中間出現(xiàn)“-”連接符時，設(shè)置和獲取的時候需要將屬性名轉(zhuǎn)成駝峰的格式才能正常的設(shè)置和獲取。 <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. 網(wǎng)絡(luò)狀態(tài)

我們可以通過window.navigator.onLine來檢測，用戶當前的網(wǎng)絡(luò)狀況，返回一個布爾值

通過給window綁定監(jiān)聽事件，可以監(jiān)測瀏覽器的一些狀態(tài)信息

網(wǎng)絡(luò)從無到有時觸發(fā)“online”方法

window.addEventListener('online', function(){// online是網(wǎng)絡(luò)從無網(wǎng)到有網(wǎng)的時候觸發(fā) })

網(wǎng)絡(luò)從有到無時觸發(fā)“offline”方法

window.addEventListener('offline', function(){// online是網(wǎng)絡(luò)從有網(wǎng)到無網(wǎng)的時候觸發(fā) })

9. 地理定位

在HTML規(guī)范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開發(fā)互聯(lián)網(wǎng)應(yīng)用，即基于位置服務(wù) (Location Base Service)

9.1 獲取地理信息方式

獲取地理信息的方式一共有三種分別是：

IP地址
三維坐標
- GPS（Global Positioning System，全球定位系統(tǒng)）
- Wi-Fi
- 手機信號
用戶自定義數(shù)據(jù)

如下表：

下表對不同獲取方式的優(yōu)缺點進行了比較，瀏覽器會自動以最優(yōu)的方式去獲取用戶地理位置數(shù)據(jù)源優(yōu)點缺點

IP 地址	任何地方都可以用，在服務(wù)器端處理	不精確（經(jīng)常出錯，一般精確到城市級）運算代價大
GPS	很精確	定位時間長，耗電量大；室內(nèi)效果差；需要額外硬件設(shè)備支持
Wi-Fi	精確，可在室內(nèi)使用，簡單、快捷	在鄉(xiāng)村這些Wi-Fi接入點少的地區(qū)無法實現(xiàn)用
手機信號	相當準確，可在室內(nèi)使用，簡單、快捷	需要能夠訪問手機或其 modem 設(shè)備
用戶自定義	可獲得比程序定位服務(wù)更準確的位置數(shù)據(jù)，用戶自行輸入可能比自動檢測更快	可能很不準確，特別是當用戶位置變更后

9.2 隱私

HTML5 Geolocation規(guī)范提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。

9.3 使用地理定位

有兩個方法都可以獲取到當前的地理定位，只是功能上稍微有點區(qū)別。 navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) // 方法：獲取當前地理信息navigator.geolocation.watchPosition(successCallback, errorCallback, options) // 重復(fù)獲取當前地理信息

當成功獲取地理信息后

會調(diào)用succssCallback，并返回一個包含位置信息的對象position。 position.coords.latitude // 緯度 position.coords.longitude // 經(jīng)度

成功對象position：

屬性描述

coords.latitude	十進制數(shù)的緯度
coords.longitude	十進制數(shù)的經(jīng)度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	響應(yīng)的日期/時間

當獲取地理信息失敗后

會調(diào)用errorCallback，并返回錯誤信息error

返回無符號的、簡短的錯誤碼，詳見下表：

值相關(guān)聯(lián)的常量描述

1	PERMISSION_DENIED	用戶不允許地理定位
2	POSITION_UNAVAILABLE	無法獲取當位置
3	TIMEOUT	超時操作

示例代碼：

獲取當前位置的經(jīng)緯度 window.navigator.geolocation.getCurrentPosition(function(position){// 緯度var lat = position.coords.latitude;// 經(jīng)度var long = position.coords.longitude;console.log('你當前的緯度為：' + lat + '經(jīng)度為：' + long)},function(err){ // 錯誤時回調(diào)信息if(err.code == 1){alert('沒有權(quán)限')}else if(err.code == 2){alert('內(nèi)部錯誤');}else{alert('超時')} },{// 超時設(shè)置timeout: 5000 });

9.4 百度地圖的用法

結(jié)合百度地圖的API，我們可以使用它上面的一些功能，比如在地圖上定位等等等...

進入百度地圖開放平臺官網(wǎng)：

網(wǎng)址：http://lbsyun.baidu.com/

找到Web開發(fā) -> javascript API

直接找到示例DEMO，復(fù)制源代碼，需要獲取密鑰（自己申請，需要一到兩個工作日）

獲取當前所在位置，設(shè)置到地圖上

<!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;// 經(jīng)度var long = pos.coords.longitude;console.log('你當前的緯度為：' + lat + '經(jīng)度為：' + long)// 百度地圖API功能var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例map.centerAndZoom(new BMap.Point(long, lat), 15); // 初始化地圖,設(shè)置中心點坐標和地圖級別map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件map.setCurrentCity("北京"); // 設(shè)置地圖顯示的城市此項是必須設(shè)置的map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放}, function (err) {if (err.code == 1) {alert('沒有權(quán)限')} else if (err.code == 2) {alert('內(nèi)部錯誤');} else {alert('超時')}}, {// 超時設(shè)置timeout: 5000}); </script>

效果圖：

10. WEB 存儲

隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時也變的越來越復(fù)雜，為了滿足各種各樣的需求，會經(jīng)常性在本地存儲大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當?shù)膹?fù)雜，每一次發(fā)送請求都會攜帶上cookie，會造成帶寬的浪費，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案。web存儲的含義是將數(shù)據(jù)存儲到用戶的電腦上，這樣可以緩解服務(wù)器的壓力，并且提高體驗。

10.1 特性

設(shè)置、讀取方便
容量較大，sessionStorage約5M，localStorage約20M
只能存儲字符串，可以將對象JSON.stringify()轉(zhuǎn)成字符串后存儲

10.2 方法詳解

setItem(key, value)設(shè)置存儲內(nèi)容
getItem(key)讀取存儲內(nèi)容
removeItem(key)刪除鍵值為key的存儲內(nèi)容
clear()清空所有存儲內(nèi)容
key(n)以索引值來獲取鍵名
length 存儲的數(shù)據(jù)的個數(shù)

示例代碼：

// 在本地存儲了一個鍵為：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));// 取數(shù)據(jù) alert(window.localStorage.getItem('username1')); alert(window.sessionStorage.getItem('username1'));// 獲取本地數(shù)據(jù)的長度 alert(window.localStorage.length); alert(window.sessionStorage.length);// 刪除數(shù)據(jù) window.localStorage.removeItem('username1'); window.sessionStorage.removeItem('username1');// 清空所有的數(shù)據(jù) window.localStorage.clear(); window.sessionStorage.clear();

10.3 sessionStorage

特點：

生命周期為關(guān)閉當前頁面窗口
不能多窗口下數(shù)據(jù)共享（同源策略）
通過跳轉(zhuǎn)可以解決，頁面跳轉(zhuǎn)的時候可以通過session實現(xiàn)數(shù)據(jù)共享

10.4 localStorage

特點：

生命周期為永久有效，除非手動刪除或用代碼刪除
可以多窗口共享（同源策略）
一些不涉及到安全的一些數(shù)據(jù)（不要太過龐大）都可以存儲到本地

示例代碼：

window.localStorage.setItem('age',18)

效果圖：

10.5 差異性

比較cookie，session，local三者之間的相同點和不同點

相同點：

都是存儲數(shù)據(jù)，存儲在web端，并且都是同源

不同點：

（1）cookie只有4K大小并且每一次請求都會帶上cookie體驗不好，浪費帶寬
（2）session和local直接存儲在本地，請求不會攜帶，并且容量比cookie要大的多
（3）session是臨時會話，當窗口被關(guān)閉的時候就清除掉，而local永久存在，cookie有過期時間
（4）cookie和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a鏈接跳轉(zhuǎn)的新窗口

11. 文件讀取

通過FileReader對象我們可以讀取本地存儲的文件，可以使用File對象來指定所要讀取的文件或數(shù)據(jù)。其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象，也可以來自由拖放操作生成的DataTransfer。

1、FileList 對象

由于HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過<input>上傳文件后得到的是一個FileList對象（偽數(shù)組形式）。

2、FileReader 對象

HTML5新增內(nèi)建對象，可以讀取本地文件內(nèi)容。var reader = new FileReader;可以實例化一個對象。 var data = file.files[0]; // 創(chuàng)建一個讀取對象 var fr = new FileReader(); // 讀取文件fr.readAsDataURL(data);

readAsDataURL()以DataURL形式讀取文件

3、事件監(jiān)聽

onload當文讀取完成時調(diào)用 fr.addEventListener('load', function(){//獲取讀取的結(jié)果 //result屬性里面存儲的就是讀取文件的結(jié)果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);// 讀取文件是一個耗時的操作，所以需要用事件監(jiān)聽讀取完畢，// load事件是文件讀取完畢之后觸發(fā)的事件for(var j = 0; j < fr.length; j++){fr[j].addEventListener('load', function(){//獲取讀取的結(jié)果 //result屬性里面存儲的就是讀取文件的結(jié)果console.log(fr);var result = this.result; // 創(chuàng)建圖片對象var img = document.createElement('img');img.src = result;document.body.appendChild(img); })} }</script>

12. 拖拽

在HTML5的規(guī)范中，我們可以通過為元素增加draggable="true"來設(shè)置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啟的。

1、拖拽元素

頁面中設(shè)置了draggable="true"屬性的元素，可以被拖拽，其中<img>、<a>標簽?zāi)J是可以被拖拽的。

2、目標元素

頁面中任何一個元素都可以成為目標元素。

3、事件監(jiān)聽

根據(jù)元素類型的不同，需要設(shè)置不同的事件監(jiān)聽：

（1）、拖拽元素

ondrag 應(yīng)用于拖拽元素，整個拖拽過程都會調(diào)用
ondragstart 應(yīng)用于拖拽元素，當拖拽開始時調(diào)用
ondragend 應(yīng)用于拖拽元素，當拖拽結(jié)束時調(diào)用

（2）、目標元素

ondragenter 應(yīng)用于目標元素，當拖拽元素進入時調(diào)用
ondragleav 應(yīng)用于目標元素，當鼠標離開目標元素時調(diào)用
ondragver 應(yīng)用于目標元素，當停留在目標元素上時調(diào)用
ondrop 應(yīng)用于目標元素，當在目標元素上松開鼠標時調(diào)用

示例代碼： 將圖片拖拽到瀏覽器內(nèi)顯示在div內(nèi)

效果圖

總結(jié)

以上是生活随笔為你收集整理的HTML5 入门详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： C语言编程简单展开扫雷游戏
下一篇： ASP.NET -- WebForm -