HTML5 入門詳解

hqman 發(fā)布于2019-08-26 13:25 / 2021人閱讀

摘要：定義字符中文注音或字符的解釋或發(fā)音。表單域我們都知道標(biāo)簽用于為用戶輸入創(chuàng)建表單。在中表單域添加了兩個(gè)新的屬性規(guī)定是否啟用表單的自動(dòng)完成功能，默認(rèn)。通過屬性和表單域的可以將輸入表單綁定到表單域中。

1. 認(rèn)識(shí)HTML5

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

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

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

2. 語法規(guī)范

隨著Web技術(shù)的更新，HTML也先后經(jīng)歷了HTML4.01、XHTML1.0、HTML5幾個(gè)重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時(shí)對(duì)語法規(guī)范也做了一些調(diào)整，為了能夠保證瀏覽器可以兼容不同版本語法規(guī)范的，我們可以使用指示瀏覽器應(yīng)該如何處理我們的HTML。

常用的DOCTYPE聲明：

1、HTML5

2、HTML 4.01 Strict

4.01的嚴(yán)格版本，該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

3、HTML 4.01 Transitional

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

4、HTML 4.01 Frameset

該DTD等同于HTML 4.01 Transitional，但允許框架集內(nèi)容。

5、XHTML 1.0 Strict

該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標(biāo)記。

6、XHTML 1.0 Transitional

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標(biāo)記。

7、XHTML 1.0 Frameset

該DTD等同于XHTML 1.0 Transitional，但允許框架集內(nèi)容。

8、XHTML 1.1

該DTD等同于XHTML 1.0 Strict，但允許添加模型（例如提供對(duì)東亞語系的ruby支持）。

3. 語義化標(biāo)簽

HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)：

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

本質(zhì)上新語義標(biāo)簽與

、沒有區(qū)別，只是其具有語義性，使用時(shí)除了在HTML結(jié)構(gòu)上需要注意外，其它和普通標(biāo)簽的使用無任何差別，可以理解成

相當(dāng)于

。不要好奇，它只是一個(gè)標(biāo)簽！

盡量避免全局使用header、footer、aside等語義標(biāo)簽。

4. HTML5 瀏覽器支持

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

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

HTML5 新增了幾個(gè)具有語義化的標(biāo)簽，這些標(biāo)簽都是塊級(jí)元素，在不支持HTML5新標(biāo)簽的瀏覽器里，會(huì)將這些新的標(biāo)簽解析成行內(nèi)元素(inline)對(duì)待，所以我們只需要在初始化的時(shí)候?qū)⑵滢D(zhuǎn)換成塊元素(block)即可使用。

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

2、通過 js 動(dòng)態(tài)創(chuàng)建標(biāo)簽

在IE9版本以下，并不能正常解析這些新標(biāo)簽，但是卻可以識(shí)別通過document.createElement("tagName")創(chuàng)建的自定義標(biāo)簽，于是我們的解決方案就是將HTML5的新標(biāo)簽全部通過document.createElement("tagName")來創(chuàng)建一遍，這樣IE低版本也能正常解析HTML5新標(biāo)簽了。

注意：通過document.createElement創(chuàng)建出來的標(biāo)簽時(shí)行內(nèi)元素，所以同樣的需要將它們轉(zhuǎn)換成塊級(jí)元素。

3、Shiv 解決方案

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

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

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

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

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

完整示例代碼：





兼容性處理


 

 
我正在處理兼容性
 
我在IE下也能顯示

注意：html5shiv.js引用代碼必須放在元素中，因?yàn)?b>IE瀏覽器在解析HTML5新元素時(shí)需要先加載該文件。

5. 表單

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

5.1 表單控件

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

1、表單域：form

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

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

在html5中表單域添加了兩個(gè)新的屬性："autocomplete: no/yes"、"novalidate"：

autocomplete：規(guī)定是否啟用表單的自動(dòng)完成功能，默認(rèn)on。（自動(dòng)完成允許瀏覽器預(yù)測對(duì)字段的輸入。當(dāng)用戶在字段開始鍵入時(shí)，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項(xiàng)。）。

novalidate：如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證（關(guān)閉控件自動(dòng)校驗(yàn)功能）。

2、郵箱：email


    郵箱：

效果圖：

3、網(wǎng)址：url

協(xié)議、域名都要輸入進(jìn)去（https://www.baidu.com，如果直接www.baidu.com會(huì)提示輸入錯(cuò)誤的），否則觸發(fā)表單校驗(yàn)。


    網(wǎng)址：

效果圖：

4、數(shù)字：number

輸入表單數(shù)number屬性的時(shí)候，在表單尾部會(huì)有一個(gè)上下的箭頭，用來選擇數(shù)字。另外表單里的step屬性表示：點(diǎn)擊的時(shí)候每一次增加或減少的步數(shù)；max屬性表示：增加到的最大范圍，min屬性表示減小到的最小范圍。


    年齡：

效果圖：

5、電話號(hào)碼：tel


     電話號(hào)碼：

6、顏色：color


    郵箱：

效果圖：

7、時(shí)間：time


     時(shí)間：

效果圖：

8、日期：date


     日期：

效果圖：

9、時(shí)間日期：datetime


     時(shí)間日期：

10、周：week


     周：

效果圖：

11、月：month


     月：

效果圖：

12、滑塊：range

max：規(guī)定允許的最大值，min：規(guī)定允許的最小值。


    滑塊：

效果圖：

5.2 表單元素

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

1、datalist

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

datalist有點(diǎn)類似于select下拉菜單，datalist元素規(guī)定輸入域的選項(xiàng)列表。列表是通過datalist內(nèi)的 option元素創(chuàng)建的。如需把datalist綁定到輸入域，請(qǐng)用輸入域的list屬性引用datalist的id：

瀏覽器版本：

效果圖：

5.3 表單屬性

在HTML5中， 和標(biāo)簽添加了幾個(gè)新屬性。其中標(biāo)簽的autocomplete、novalidate屬性，我們?cè)谏厦娑贾v過了，現(xiàn)在我們來看看提供了哪些新的屬性。

1、autocomplete 自動(dòng)完成

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

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

示例代碼：

2、placeholder 占位符

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

示例代碼：

用戶名：

效果圖：

3、autofocus 自動(dòng)獲得焦點(diǎn)

autofocus屬性是一個(gè)boolean屬性。autofocus屬性規(guī)定在頁面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。

示例代碼：

用戶名：

4、multiple 多文件上傳

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

示例代碼：


  選擇圖片:

此時(shí)上傳文件時(shí)就可以同時(shí)上傳多個(gè)文件了。

5、form 綁定輸入域

當(dāng)一個(gè)輸入表單input，不在一個(gè)表單域form中的時(shí)候。通過form屬性和表單域的id可以將輸入表單綁定到表單域中。

示例代碼：


    用戶名: 

    

    密碼:

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

6、required 必填項(xiàng)

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

示例代碼：

用戶名:

7、pattern 自定義驗(yàn)證

pattern屬性描述了自定義一個(gè)正則表達(dá)式用于驗(yàn)證元素的值。

示例代碼：


    用戶名:

效果圖：

5.4 表單事件

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

示例代碼：


    用戶名：
    
    密 碼：

效果圖：

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

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

效果圖：

5.5 表單樣式

這里主要是說下如何修改placeholder的默認(rèn)樣式。

火狐： input::-moz-placeholder{}

谷歌： input::-webkit-input-placeholder {}

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

6. 多媒體標(biāo)簽

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

6.1 音頻

HTML5通過標(biāo)簽來解決音頻播放的問題。

示例代碼：

播放格式

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

處理兼容性

在與之間你需要插入瀏覽器不支持的元素的提示文本 。元素允許使用多個(gè) 元素。 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件。

音頻控制屬性

通過附加屬性可以更友好控制音頻的播放.

autoplay 自動(dòng)播放

controls 是否顯示控制條

loop 循環(huán)播放

6.2 視頻

HTML5通過標(biāo)簽來解決音頻播放的問題。

示例代碼：

播放格式

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

處理兼容性

6.3 音頻/視頻方法

通過附加屬性可以更加友好的控制音頻、視頻的播放。

1、autoplay 自動(dòng)播放

autoplay屬性設(shè)置或返回音視頻是否在加載后即開始播放。

設(shè)置autoplay屬性：

audio|video.autoplay=true|false

返回autoplay屬性：

audio|video.autoplay

啟用自動(dòng)播放，并重載視頻：

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

2、buffered 已緩沖部分

buffered屬性返回TimeRanges對(duì)象。TimeRanges對(duì)象表示用戶的音視頻緩沖范圍。緩沖范圍指的是已緩沖音視頻的時(shí)間范圍。如果用戶在音視頻中跳躍播放，會(huì)得到多個(gè)緩沖范圍。

返回值：

TimeRanges對(duì)象，表示音視頻的已緩沖部分。

TimeRanges對(duì)象屬性：

length - 獲得音視頻中已緩沖范圍的數(shù)量

start(index) - 獲得某個(gè)已緩沖范圍的開始位置

end(index) - 獲得某個(gè)已緩沖范圍的結(jié)束位置

注意：首個(gè)緩沖范圍的下標(biāo)是0。

示例代碼：

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

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

3、controls 是否顯示控制條

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

設(shè)置controls屬性：

audio|video.controls=true|false

返回controls屬性：

audio|video.controls

啟用視頻控件：

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

4、currentSrc 返回當(dāng)前資源的URL

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

獲得當(dāng)前視頻的URL：

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

5、currentTime 當(dāng)前播放位置（時(shí)間s）

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

7. DOM 擴(kuò)展 7.1 獲取元素

html5中新添了兩個(gè)查找元素的屬性，分別是：querySelector，querySelectorAll。


     文字1
     文字2
     文字3

7.2 類名操作

html5中新添加了一個(gè)操作類名的對(duì)象：classList。我們可以通過它里面的方法對(duì)元素的類進(jìn)行操作。

1、添加類（add）

添加類的時(shí)候，獲取到元素之后，通過classList的add方法添加一個(gè)類名，但是一次只能添加一個(gè)類名，否則會(huì)報(bào)錯(cuò)。



文字

2、移除類（remove）

移除類的時(shí)候，獲取到元素之后，通過classList的remove方法移除一個(gè)類名。



文字

3、切換類（toggle）

當(dāng)元素上沒有某個(gè)類時(shí)，它就新增這個(gè)類；如果元素已經(jīng)有了這個(gè)類，它就是刪除它，就是切換操作。



文字

4、是否存在某個(gè)類（contains）

判斷獲取的元素中是否存在某個(gè)類名，返回值為true或者false。



文字

7.3 自定義屬性

HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-，目的是為元素提供與渲染無關(guān)的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭。

如：

獲取自定義屬性（dataset["自定義屬性名稱"]）

通過Node.dataset["info"] 我們便可以獲取到自定義的屬性值。

這是一段描述

Node.dataset是以對(duì)象形式存在的，當(dāng)我們?yōu)橥粋€(gè)DOM節(jié)點(diǎn)指定了多個(gè)自定義屬性時(shí)，Node.dataset則以鍵值對(duì)的形式存儲(chǔ)了所有的自定義屬性的值。

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

通過過Node.dataset["info"]="值" 我們便可以設(shè)置自定義的屬性值。

這是一段描述

注意

當(dāng)自定義屬性中除了data-之外中間出現(xiàn)“-”連接符時(shí)，設(shè)置和獲取的時(shí)候需要將屬性名轉(zhuǎn)成駝峰的格式才能正常的設(shè)置和獲取。

這是一段描述！

8. 網(wǎng)絡(luò)狀態(tài)

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

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

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

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

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

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

9. 地理定位

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

9.1 獲取地理信息方式

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

IP地址

三維坐標(biāo)

GPS（Global Positioning System，全球定位系統(tǒng)）

Wi-Fi

手機(jī)信號(hào)

用戶自定義數(shù)據(jù)

如下表：

下表對(duì)不同獲取方式的優(yōu)缺點(diǎn)進(jìn)行了比較，瀏覽器會(huì)自動(dòng)以最優(yōu)的方式去獲取用戶地理位置

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

9.2 隱私

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

9.3 使用地理定位

有兩個(gè)方法都可以獲取到當(dāng)前的地理定位，只是功能上稍微有點(diǎn)區(qū)別。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) // 方法：獲取當(dāng)前地理信息

navigator.geolocation.watchPosition(successCallback, errorCallback, options) // 重復(fù)獲取當(dāng)前地理信息

當(dāng)成功獲取地理信息后

會(huì)調(diào)用succssCallback，并返回一個(gè)包含位置信息的對(duì)象position。

position.coords.latitude  // 緯度
position.coords.longitude // 經(jīng)度

成功對(duì)象position：

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

當(dāng)獲取地理信息失敗后

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

返回?zé)o符號(hào)的、簡短的錯(cuò)誤碼，詳見下表：

值	相關(guān)聯(lián)的常量	描述
1	PERMISSION_DENIED	用戶不允許地理定位
2	POSITION_UNAVAILABLE	無法獲取當(dāng)位置
3	TIMEOUT	超時(shí)操作

示例代碼：

獲取當(dāng)前位置的經(jīng)緯度

window.navigator.geolocation.getCurrentPosition(function(position){
    // 緯度
    var lat = position.coords.latitude;
    // 經(jīng)度
    var long = position.coords.longitude;

    console.log("你當(dāng)前的緯度為：" + lat + "經(jīng)度為：" + long)

},function(err){  // 錯(cuò)誤時(shí)回調(diào)信息
    if(err.code == 1){
        alert("沒有權(quán)限")
    }else if(err.code == 2){
        alert("內(nèi)部錯(cuò)誤");
    }else{
        alert("超時(shí)")
    }
},{
    // 超時(shí)設(shè)置
    timeout: 5000
});

9.4 百度地圖的用法

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

進(jìn)入百度地圖開放平臺(tái)官網(wǎng)：

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

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

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

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

效果圖：

10. WEB 存儲(chǔ)

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

10.1 特性

設(shè)置、讀取方便

容量較大，sessionStorage約5M，localStorage約20M

只能存儲(chǔ)字符串，可以將對(duì)象JSON.stringify()轉(zhuǎn)成字符串后存儲(chǔ)

10.2 方法詳解

setItem(key, value)設(shè)置存儲(chǔ)內(nèi)容

getItem(key)讀取存儲(chǔ)內(nèi)容

removeItem(key)刪除鍵值為key的存儲(chǔ)內(nèi)容

clear()清空所有存儲(chǔ)內(nèi)容

key(n)以索引值來獲取鍵名

length 存儲(chǔ)的數(shù)據(jù)的個(gè)數(shù)

示例代碼：

// 在本地存儲(chǔ)了一個(gè)鍵為：username 值為 Ryan"s 的這個(gè)一個(gè)對(duì)象
// 在chrome的控制臺(tái)的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"));

// 獲取本地?cái)?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

特點(diǎn)：

生命周期為關(guān)閉當(dāng)前頁面窗口

不能多窗口下數(shù)據(jù)共享（同源策略）

通過跳轉(zhuǎn)可以解決，頁面跳轉(zhuǎn)的時(shí)候可以通過session實(shí)現(xiàn)數(shù)據(jù)共享

10.4 localStorage

特點(diǎn)：

生命周期為永久有效，除非手動(dòng)刪除或用代碼刪除

可以多窗口共享（同源策略）

一些不涉及到安全的一些數(shù)據(jù)（不要太過龐大）都可以存儲(chǔ)到本地

示例代碼：

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

效果圖：

10.5 差異性

比較cookie，session，local三者之間的相同點(diǎn)和不同點(diǎn)

相同點(diǎn)：

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

不同點(diǎn)：

（1）cookie只有4K大小并且每一次請(qǐng)求都會(huì)帶上cookie體驗(yàn)不好，浪費(fèi)帶寬

（2）session和local直接存儲(chǔ)在本地，請(qǐng)求不會(huì)攜帶，并且容量比cookie要大的多

（3）session是臨時(shí)會(huì)話，當(dāng)窗口被關(guān)閉的時(shí)候就清除掉，而local永久存在，cookie有過期時(shí)間

（4）cookie和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a鏈接跳轉(zhuǎn)的新窗口

11. 文件讀取

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

1、FileList 對(duì)象

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

2、FileReader 對(duì)象

HTML5新增內(nèi)建對(duì)象，可以讀取本地文件內(nèi)容。var reader = new FileReader;可以實(shí)例化一個(gè)對(duì)象。

var data = file.files[0];
// 創(chuàng)建一個(gè)讀取對(duì)象
var fr = new FileReader();
// 讀取文件

fr.readAsDataURL(data);

readAsDataURL()以DataURL形式讀取文件

3、事件監(jiān)聽

onload當(dāng)文讀取完成時(shí)調(diào)用

fr.addEventListener("load", function(){
    //獲取讀取的結(jié)果  
    //result屬性里面存儲(chǔ)的就是讀取文件的結(jié)果
    var result = fr.result;    
})

完整代碼：

12. 拖拽

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

1、拖拽元素

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

2、目標(biāo)元素

頁面中任何一個(gè)元素都可以成為目標(biāo)元素。

3、事件監(jiān)聽

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

（1）、拖拽元素

ondrag 應(yīng)用于拖拽元素，整個(gè)拖拽過程都會(huì)調(diào)用

ondragstart 應(yīng)用于拖拽元素，當(dāng)拖拽開始時(shí)調(diào)用

ondragend 應(yīng)用于拖拽元素，當(dāng)拖拽結(jié)束時(shí)調(diào)用

（2）、目標(biāo)元素

ondragenter 應(yīng)用于目標(biāo)元素，當(dāng)拖拽元素進(jìn)入時(shí)調(diào)用

ondragleav 應(yīng)用于目標(biāo)元素，當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)調(diào)用

ondragver 應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時(shí)調(diào)用

ondrop 應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開鼠標(biāo)時(shí)調(diào)用

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



    

將圖片拖拽至此

效果圖

GPU云服務(wù)器云服務(wù)器 HTML5入門 HTML5基礎(chǔ)入門 html5代碼入門 html5開發(fā)入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108812.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hqman

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 641·2023-04-25 18:37
SCADA系統(tǒng)資料整理-概論

閱讀 2799·2021-10-12 10:12
主機(jī)號(hào)和主機(jī)數(shù)是什么-主機(jī)號(hào)怎么填寫？

閱讀 8387·2021-09-22 15:07
三種方法實(shí)現(xiàn)CSS三欄布局

閱讀 578·2019-08-30 15:55
前端面試每日3+1——第119天

閱讀 3187·2019-08-30 15:44
瀏覽器工作原理整理

閱讀 2207·2019-08-30 15:44
CSS 居中完全指南

閱讀 1637·2019-08-30 13:03
CSS：元素高度與寬度的討論系列文章(四)

閱讀 1572·2019-08-30 12:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

HTML5 入門詳解

相關(guān)文章

做IT這幾年，我整理了這些干貨想要送給你!

【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

前端文檔收集

發(fā)表評(píng)論

0條評(píng)論

hqman

男|高級(jí)講師

TA的文章

tensorflow

SCADA系統(tǒng)資料整理-概論

主機(jī)號(hào)和主機(jī)數(shù)是什么-主機(jī)號(hào)怎么填寫？

三種方法實(shí)現(xiàn)CSS三欄布局

前端面試每日3+1——第119天

瀏覽器工作原理整理

CSS 居中完全指南

CSS：元素高度與寬度的討論系列文章(四)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

HTML5 入門詳解

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！