HTML5 入門詳解

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

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

1. 認識HTML5

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

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

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

2. 語法規(guī)范

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

常用的DOCTYPE聲明：

1、HTML5

2、HTML 4.01 Strict

4.01的嚴格版本，該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來編寫標記。

6、XHTML 1.0 Transitional

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

7、XHTML 1.0 Frameset

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

8、XHTML 1.1

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

3. 語義化標簽

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

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

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

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

相當于

。不要好奇，它只是一個標簽！

盡量避免全局使用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新標簽了。

注意：通過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é)點包裹子元素，并且不能應用CSS樣式的問題。

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

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

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

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

完整示例代碼：





兼容性處理


 

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

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

5. 表單

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

5.1 表單控件

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

1、表單域：form

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

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

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

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

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

2、郵箱：email


    郵箱：

效果圖：

3、網(wǎng)址：url

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


    網(wǎng)址：

效果圖：

4、數(shù)字：number

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


    年齡：

效果圖：

5、電話號碼：tel


     電話號碼：

6、顏色：color


    郵箱：

效果圖：

7、時間：time


     時間：

效果圖：

8、日期：date


     日期：

效果圖：

9、時間日期：datetime


     時間日期：

10、周：week


     周：

效果圖：

11、月：month


     月：

效果圖：

12、滑塊：range

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


    滑塊：

效果圖：

5.2 表單元素

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

1、datalist

在Web設計中,經(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：

瀏覽器版本：

效果圖：

5.3 表單屬性

在HTML5中， 和標簽添加了幾個新屬性。其中標簽的autocomplete、novalidate屬性，我們在上面都講過了，現(xiàn)在我們來看看提供了哪些新的屬性。

1、autocomplete 自動完成

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

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

示例代碼：

2、placeholder 占位符

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

示例代碼：

用戶名：

效果圖：

3、autofocus 自動獲得焦點

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

示例代碼：

用戶名：

4、multiple 多文件上傳

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

示例代碼：


  選擇圖片:

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

5、form 綁定輸入域

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

示例代碼：


    用戶名: 

    

    密碼:

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

6、required 必填項

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

示例代碼：

用戶名:

7、pattern 自定義驗證

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

示例代碼：


    用戶名:

效果圖：

5.4 表單事件

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

示例代碼：


    用戶名：
    
    密 碼：

效果圖：

當驗證無法通過的時候，可以通過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插件，由此使得處理音頻/視頻播放變的非常復雜，并且移動設備的瀏覽器并不支持Flash插件。

6.1 音頻

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

示例代碼：

播放格式

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

處理兼容性

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

音頻控制屬性

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

autoplay 自動播放

controls 是否顯示控制條

loop 循環(huán)播放

6.2 視頻

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

示例代碼：

播放格式

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

處理兼容性

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 - 獲得音視頻中已緩沖范圍的數(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屬性設置或返回瀏覽器應當顯示標準的音視頻控件。

設置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	返回音頻/視頻的播放是否已結(jié)束
error	返回表示音頻/視頻錯誤狀態(tài)的MediaError對象
loop	設置或返回音頻/視頻是否應在結(jié)束時重新播放
mediaGroup	設置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素）
muted	設置或返回音頻/視頻是否靜音
networkState	返回音頻/視頻的當前網(wǎng)絡狀態(tài)
paused	設置或返回音頻/視頻是否暫停
playbackRate	設置或返回音頻/視頻播放的速度
played	返回表示音頻/視頻已播放部分的TimeRanges對象
preload	設置或返回音頻/視頻是否應該在頁面加載后進行加載
readyState	返回音頻/視頻當前的就緒狀態(tài)
seekable	返回表示音頻/視頻可尋址部分的TimeRanges對象
seeking	返回用戶是否正在音頻/視頻中進行查找
src	設置或返回音頻/視頻元素的當前來源
startDate	返回表示當前時間偏移的Date對象
textTracks	返回表示可用文本軌道的TextTrackList對象
videoTracks	返回表示可用視頻軌道的VideoTrackList對象
volume	設置或返回音頻/視頻的音量

7. DOM 擴展 7.1 獲取元素

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


     文字1
     文字2
     文字3

7.2 類名操作

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

1、添加類（add）

添加類的時候，獲取到元素之后，通過classList的add方法添加一個類名，但是一次只能添加一個類名，否則會報錯。



文字

2、移除類（remove）

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



文字

3、切換類（toggle）

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



文字

4、是否存在某個類（contains）

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



文字

7.3 自定義屬性

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

如：

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

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

這是一段描述

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

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

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

這是一段描述

注意

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

這是一段描述！

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

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

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

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

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

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

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

9. 地理定位

在HTML規(guī)范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開發(fā)互聯(lián)網(wǎng)應用，即基于位置服務 (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 地址	任何地方都可以用，在服務器端處理	不精確（經(jīng)常出錯，一般精確到城市級）運算代價大
GPS	很精確	定位時間長，耗電量大；室內(nèi)效果差；需要額外硬件設備支持
Wi-Fi	精確，可在室內(nèi)使用，簡單、快捷	在鄉(xiāng)村這些Wi-Fi接入點少的地區(qū)無法實現(xiàn)用
手機信號	相當準確，可在室內(nèi)使用，簡單、快捷	需要能夠訪問手機或其 modem 設備
用戶自定義	可獲得比程序定位服務更準確的位置數(shù)據(jù)，用戶自行輸入可能比自動檢測更快	可能很不準確，特別是當用戶位置變更后

9.2 隱私

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

9.3 使用地理定位

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

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

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

當成功獲取地理信息后

會調(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	響應的日期/時間

當獲取地理信息失敗后

會調(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("超時")
    }
},{
    // 超時設置
    timeout: 5000
});

9.4 百度地圖的用法

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

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

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

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

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

獲取當前所在位置，設置到地圖上

效果圖：

10. WEB 存儲

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

10.1 特性

設置、讀取方便

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

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

10.2 方法詳解

setItem(key, value)設置存儲內(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對象可以是來自用戶在一個元素上選擇文件后返回的FileList對象，也可以來自由拖放操作生成的DataTransfer。

1、FileList 對象

由于HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過上傳文件后得到的是一個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;    
})

完整代碼：

12. 拖拽

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

1、拖拽元素

頁面中設置了draggable="true"屬性的元素，可以被拖拽，其中、標簽默認是可以被拖拽的。

2、目標元素

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

3、事件監(jiān)聽

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

（1）、拖拽元素

ondrag 應用于拖拽元素，整個拖拽過程都會調(diào)用

ondragstart 應用于拖拽元素，當拖拽開始時調(diào)用

ondragend 應用于拖拽元素，當拖拽結(jié)束時調(diào)用

（2）、目標元素

ondragenter 應用于目標元素，當拖拽元素進入時調(diào)用

ondragleav 應用于目標元素，當鼠標離開目標元素時調(diào)用

ondragver 應用于目標元素，當停留在目標元素上時調(diào)用

ondrop 應用于目標元素，當在目標元素上松開鼠標時調(diào)用

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



    

將圖片拖拽至此

效果圖

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108812.html

發(fā)表評論

登陸后可評論

0條評論

hqman

男|高級講師

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

TA的文章

tensorflow

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

閱讀 2853·2021-10-12 10:12
主機號和主機數(shù)是什么-主機號怎么填寫？

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

HTML5 入門詳解

相關(guān)文章

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

【連載】前端個人文章整理-從基礎到入門

前端文檔收集

發(fā)表評論

0條評論

hqman

男|高級講師

TA的文章

tensorflow

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

主機號和主機數(shù)是什么-主機號怎么填寫？

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

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

瀏覽器工作原理整理

CSS 居中完全指南

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

最新活動

資訊專欄INFORMATION COLUMN

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

HTML5 入門詳解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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