HTML5 入門詳解

hqman 發布于2019-08-26 13:25 / 2007人閱讀

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

1. 認識HTML5

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

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

我們日常討論的H5其實是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。

2. 語法規范

隨著Web技術的更新，HTML也先后經歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時對語法規范也做了一些調整，為了能夠保證瀏覽器可以兼容不同版本語法規范的，我們可以使用指示瀏覽器應該如何處理我們的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，但允許框架集內容。

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，但允許框架集內容。

8、XHTML 1.1

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

3. 語義化標簽

HTML5提供了新的元素來創建更好的頁面結構：

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

本質上新語義標簽與

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

相當于

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

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

注意：通過document.createElement創建出來的標簽時行內元素，所以同樣的需要將它們轉換成塊級元素。

3、Shiv 解決方案

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

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

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

引入遠程靜態資源庫：

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

完整示例代碼：





兼容性處理


 

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

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

5. 表單

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

5.1 表單控件

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

1、表單域：form

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

表單用于向服務器傳輸數據。

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

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

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

2、郵箱：email


    郵箱：

效果圖：

3、網址：url

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


    網址：

效果圖：

4、數字：number

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


    年齡：

效果圖：

5、電話號碼：tel


     電話號碼：

6、顏色：color


    郵箱：

效果圖：

7、時間：time


     時間：

效果圖：

8、日期：date


     日期：

效果圖：

9、時間日期：datetime


     時間日期：

10、周：week


     周：

效果圖：

11、月：month


     月：

效果圖：

12、滑塊：range

max：規定允許的最大值，min：規定允許的最小值。


    滑塊：

效果圖：

5.2 表單元素

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

1、datalist

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

datalist有點類似于select下拉菜單，datalist元素規定輸入域的選項列表。列表是通過datalist內的 option元素創建的。如需把datalist綁定到輸入域，請用輸入域的list屬性引用datalist的id：

瀏覽器版本：

效果圖：

5.3 表單屬性

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

1、autocomplete 自動完成

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

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

示例代碼：

2、placeholder 占位符

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

示例代碼：

用戶名：

效果圖：

3、autofocus 自動獲得焦點

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

示例代碼：

用戶名：

4、multiple 多文件上傳

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

示例代碼：


  選擇圖片:

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

5、form 綁定輸入域

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

示例代碼：


    用戶名: 

    

    密碼:

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

6、required 必填項

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

示例代碼：

用戶名:

7、pattern 自定義驗證

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

示例代碼：


    用戶名:

效果圖：

5.4 表單事件

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

示例代碼：


    用戶名：
    
    密 碼：

效果圖：

當驗證無法通過的時候，可以通過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通過標簽來解決音頻播放的問題。

示例代碼：

播放格式

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

處理兼容性

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

音頻控制屬性

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

autoplay 自動播放

controls 是否顯示控制條

loop 循環播放

6.2 視頻

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

示例代碼：

播放格式

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

處理兼容性

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。


     文字1
     文字2
     文字3

7.2 類名操作

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

1、添加類（add）

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



文字

2、移除類（remove）

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



文字

3、切換類（toggle）

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



文字

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

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



文字

7.3 自定義屬性

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

如：

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

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

這是一段描述

Node.dataset是以對象形式存在的，當我們為同一個DOM節點指定了多個自定義屬性時，Node.dataset則以鍵值對的形式存儲了所有的自定義屬性的值。

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

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

這是一段描述

注意

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

這是一段描述！

8. 網絡狀態

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

通過給window綁定監聽事件，可以監測瀏覽器的一些狀態信息

網絡從無到有時觸發“online”方法

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

網絡從有到無時觸發“offline”方法

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

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，復制源代碼，需要獲取密鑰（自己申請，需要一到兩個工作日）

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

效果圖：

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對象可以是來自用戶在一個元素上選擇文件后返回的FileList對象，也可以來自由拖放操作生成的DataTransfer。

1、FileList 對象

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

完整代碼：

12. 拖拽

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

1、拖拽元素

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

2、目標元素

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

3、事件監聽

根據元素類型的不同，需要設置不同的事件監聽：

（1）、拖拽元素

ondrag 應用于拖拽元素，整個拖拽過程都會調用

ondragstart 應用于拖拽元素，當拖拽開始時調用

ondragend 應用于拖拽元素，當拖拽結束時調用

（2）、目標元素

ondragenter 應用于目標元素，當拖拽元素進入時調用

ondragleav 應用于目標元素，當鼠標離開目標元素時調用

ondragver 應用于目標元素，當停留在目標元素上時調用

ondrop 應用于目標元素，當在目標元素上松開鼠標時調用

示例代碼： 將圖片拖拽到瀏覽器內顯示在div內



    

將圖片拖拽至此

效果圖

云服務器 GPU云服務器 HTML5入門 HTML5基礎入門 html5代碼入門 html5開發入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108812.html

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

摘要：資源獲取方式根據下面的索引，大家可以選擇自己需要的資源，然后在松哥公眾號牧碼小子后臺回復對應的口令，就可以獲取到資源的百度云盤下載地址。公眾號二維碼如下另外本文會定期更新，松哥有新資源的時候會及時分享給大家，歡迎各位小伙伴保持關注。沒有一條路是容易的，特別是轉行計算機這條路。松哥接觸過很多轉行做開發的小伙伴，我了解到很多轉行人的不容易，記得松哥大二時剛剛決定轉行計算機，完全不知道這...

王晗 2019-08-16 17:41 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0