HTML5(H5)特性總結

HTML5(H5)特性總結

HTML5屬於上一代HTML的升級語言,設計HTML5最主要的目的是為了在移動設備上支持多媒體!!!

好處:跨平臺:

例如:比如你開發了一款HTML5的遊戲,你可以很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺,甚至可以通過封裝的技術發放到App Store或Google Play上,所以它的跨平臺性非常強大,這也是大多數人對HTML5有興趣的主要原因。

缺點:

pc端瀏覽器支持不是特別友好,造成用戶體驗不佳(隨著移動端的發展不斷擴大和win10(ie10)的大量推廣,這一缺點將被無限縮小)

新特性:

1. 取消了過時的顯示效果標記

等...

2. 新語義標籤的引入

3. 新表單元素引入

4. canvas標籤(圖形設計)

5. 本地數據庫(本地存儲)

6. 一些API

1.HTML5新語義標籤

HTML5新標籤的數量在25個左右具體也沒有找到詳細的資料來查看(每個網站顯示的數量都不一樣)

雖然新增的標籤很多但是實際上用到的應該只有十個左右MDN上有一句話

“HTML 使用“標記”來註明文本、圖片和其他內容,以便於在 Web 瀏覽器中顯示。HTML 標記包含一些特殊“元素”如

等等。”

這其中大部分有HTML5以前的標籤也有HTML5的而這些剛好就是我們常用的標籤,不常用的也許不必太過了解佈局DIV也可以不是麼?

另外推薦大家在使用新語義標籤的時候儘量每個獨立的頁面只使用一個標籤作為包裹,語義化的作用就是seo(具體可百度),就是讓搜索引擎知道網上到底有些什麼,如header 、main、footer標籤等等,當然你也可以寫100個!

以下總結出HTML5常用的標籤: “header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘記了這些標籤的意思可以訪問 MDN、W3C、或者CSND,當然博客園上搜搜可能會更快 。

2.HTML5的重點標籤之video和audio

視頻

屬性:controls 顯示控制欄

屬性:autoplay 自動播放

屬性:loop 設置循環播放

音頻

屬性:controls 顯示控制欄

屬性:autoplay 自動播放

屬性:loop 設置循環播放

video標籤支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒體標籤在網頁中的兼容效果方式(每個瀏覽器支持的情況不同所以需要做兼容性處理)

(以下source屬性只會生效一個 即 if = true 之後 就不執行了)

3.HTML5中的智能表單控件

type值 =

email: 輸入合法的郵箱地址

url: 輸入合法的網址

number: 只能輸入數字

range: 滑塊

color: 拾色器

date: 顯示日期

month: 顯示月份

week : 顯示第幾周

time: 顯示時間

(智能表單,會自動對輸入的內容做基本校驗,內容不符合基本校驗則拒絕提交請求

表單屬性

◆form屬性:

autocomplete=on | off 自動完成

novalidate=true | false 是否關閉校驗

◆ input屬性:

autofocus : 自動獲取焦點

multiple: 實現多選效果

placeholder : 佔位符 (提示信息)

required:必填項

本地存儲

隨著互聯網的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,為了滿足各種各樣的需求,會經常性在本地存儲大量的數據,傳統方式我們以document.cookie來進行存儲的,但是由於其存儲大小隻有4k左右,並且解析也相當的複雜,給開發帶來諸多不便,HTML5規範則提出解決方案,使用sessionStorage和localStorage存儲數據。

localStorage:

1. 永久生效

2. 多窗口共享

3. 容量大約為20M

◆window.localStorage.setItem(key,value) 設置存儲內容

◆window.localStorage.getItem(key) 獲取內容

◆window.localStorage.removeItem(key) 刪除內容

◆window.localStorage.clear() 清空內容

sessionStorage:

1. 生命週期為關閉當前瀏覽器窗口

2. 可以在同一個窗口下訪問

3. 數據大小為5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默認提示選項

需要兩個幾個參數

placeholder = 默認提示用戶輸入

oninvalid事件 = 當用戶輸入不符合規則的時候提示的內容隨意改setCustomValidity 就是用來修改 requered值的函數

oninput事件 = 約等於chuange事件 立即執行

4.HTML5中新的一些API

以前獲取節點通過

document.getElementById("ID名稱")這些還有className,name,tagname等等方式獲取返回當前節點

H5新增的節點獲取方法只有兩個

document.querySelector("選擇器"); 返回節點

document.querySelectorAll("選擇器"); 返回數組

可以完美的代替以前或者節點的方式,如果無需兼容ie10以下的話

H5中對class的操作

classList.add("類名")

添加class類名 不返回任何值 如果你把它賦值給一個變量 得到結果是undefined

classList.remove("類名"); 刪除

classList.contains("類名");

檢查has className 是否存在返回布爾值 即true and false

classList.toggle("active");

查詢active 是否存在,存在就刪除,不存在就添加 ,省去了if判斷!返回布爾值如果執行多條 即 true false true false.

自定義屬性 (小案例分析體驗自定義屬性) data-自定義屬性名

1. 獲取自定義屬性 Dom.dataset 返回的是一個對象

Dom.dataset.屬性名 或者 Dom.dataset[屬性名]

注:屬性名無需加data如自定義屬性名 = data-canvas 那麼獲取的時候 直接dataset.canvas即可 設置同理

2. 設置自定義屬性

Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值;

文件讀取 FileReader

FileReader 接口有3個用來讀取文件方法返回結果在result中

readAsBinaryString ---將文件讀取為二進制編碼

readAsText ---將文件讀取為文本

readAsDataURL ---將文件讀取為DataURL

FileReader 提供的事件模型

onabort 中斷時觸發

onerror 出錯時觸發

onload 文件讀取成功完成時觸發

onloadend 讀取完成觸發,無論成功或失敗

onloadstart 讀取開始時觸發

onprogress 讀取中

獲取當前網絡狀態

window.navigator.onLine 返回一個布爾值 網沒問題返回true否則返回false

網絡狀態事件 (大部分為不支持和廢棄狀態也許移動端用的比較多)

1. window.ononline

2. window.onoffline

獲取地理定位

獲取一次當前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之後獲取位置信息 否則拋出錯誤,比如獲取位置信息被拒絕

1. coords.latitude 維度

2. coords.longitude 經度

實時獲取當前位置

window.navigator.geolocation.watchPosition(success,error);

以上內容或有不足,歡迎各位指出補充,謝謝。

HTML5(H5)特性總結


分享到:


相關文章: