HTML5新特性總結
例如： video 標簽和 audio 及 canvas 標記
新特性：
1. 取消了過時的顯示效果標記 <font></font> 和 <center></center>等...
2. 新語義標簽的引入
3. 新表單元素引入
4. canvas標簽（圖形設計）
5. 本地數據庫（本地存儲）
6. 一些API好處：跨平臺
- 例如：比如你開發了一款HTML5的遊戲，你可以很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。
缺點：
-
pc端瀏覽器支持不是特別友好，造成用戶體驗不佳(隨著移動端的發展不斷擴大和win10（ie10）的大量推廣，這一缺點將被無限縮小)
-
HTML5新語義標簽
-
HTML5新標簽的數量在25個左右具體也沒有找到詳細的資料來查看（每個網站顯示的數量都不一樣）
- 雖然新增的標簽很多但是實際上用到的應該只有十個左右MDN上有一句話“HTML 使用“標記”來註明文本、圖片和其他內容，以便於在 Web 瀏覽器中顯示。HTML 標記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。” 這其中大部分有HTML5以前的標簽也有HTML5的而這些剛好就是我們常用的標簽，不常用的也許不必太過了解布局DIV也可以不是麽？
-
-
另外推薦大家在使用新語義標簽的時候盡量每個獨立的頁面只使用一個標簽作為包裹，語義化的作用就是seo（具體可百度），就是讓搜索引擎知道網上到底有些什麽，如header 、main、footer標簽等等，當然你也可以寫100個！
-
以下總結出HTML5常用的標簽：
- “header” “nav” “main”“article” “address”“section”“aside” “footer”
- 如果忘記了這些標簽的意思可以訪問 MDN、W3C、或者CSND,當然博客園上搜搜可能會更快
-
以下為菜鳥教程對html5新標簽的註解 http://www.runoob.com/html/html5-new-element.html
- HTML5的重點標簽之video和audio
<video></video> 視頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
<audio></audio> 音頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
video標簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp- 多媒體標簽在網頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）（以下source屬性只會生效一個 即 if = true 之後 就不執行了）
<video> <source src="code/多媒體標簽/trailer.mp4"> <source src="trailer.ogg"> <source src="trailer.WebM"> </video> - HTML5中的智能表單控件
<input type="email">
type值 ={
email: 輸入合法的郵箱地址
url： 輸入合法的網址
number： 只能輸入數字
range： 滑塊
color： 拾色器
date： 顯示日期
month： 顯示月份
week ： 顯示第幾周
time： 顯示時間
}
（智能表單，會自動對輸入的內容做基本校驗，內容不符合基本校驗則拒絕提交請求
表單屬性
- 多媒體標簽在網頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）（以下source屬性只會生效一個 即 if = true 之後 就不執行了）
◆form屬性：
autocomplete=on | off 自動完成
novalidate=true | false 是否關閉校驗
◆ input屬性：
autofocus ： 自動獲取焦點<input type="text" list="abc"/> <datalist id="abc"> <option value="123">12312</option> <option value="123">12312</option> <option value="123">12312</option> <option value="123">12312</option> </datalist> multiple： 實現多選效果 placeholder ： 占位符 （提示信息） required：必填項- 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-自定義屬性名- 獲取自定義屬性 Dom.dataset 返回的是一個對象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
註：屬性名無需加data如自定義屬性名 = data-canvas 那麽獲取的時候 直接dataset.canvas即可 設置同理 - 設置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
文件讀取 FileReader
FileReader 接口有3個用來讀取文件方法返回結果在result中
readAsBinaryString ---將文件讀取為二進制編碼
readAsText ---將文件讀取為文本
readAsDataURL ---將文件讀取為DataURL
FileReader 提供的事件模型
onabort 中斷時觸發
onerror 出錯時觸發
onload 文件讀取成功完成時觸發
onloadend 讀取完成觸發，無論成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中
獲取當前網絡狀態
window.navigator.onLine 返回一個布爾值 網沒問題返回true否則返回false
網絡狀態事件 （大部分為不支持和廢棄狀態也許移動端用的比較多） - window.ononline
- window.onoffline
獲取地理定位
獲取一次當前位置
window.navigator.geolocation.getCurrentPosition(success,error);
success成功之後獲取位置信息 否則拋出錯誤，比如獲取位置信息被拒絕 - coords.latitude 維度
- coords.longitude 經度
實時獲取當前位置
window.navigator.geolocation.watchPosition(success,error);
本地存儲 隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小只有4k左右，並且解析也相當的復雜，給開發帶來諸多不便，HTML5規範則提出解決方案，使用sessionStorage和localStorage存儲數據。
localStorage： - 永久生效
- 多窗口共享
- 容量大約為20M
◆window.localStorage.setItem(key,value) 設置存儲內容
◆window.localStorage.getItem(key) 獲取內容
◆window.localStorage.removeItem(key) 刪除內容
◆window.localStorage.clear() 清空內容
sessionStorage： - 生命周期為關閉當前瀏覽器窗口
- 可以在同一個窗口下訪問
- 數據大小為5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
required如何修改默認提示選項
需要兩個幾個參數
placeholder = 默認提示用戶輸入
oninvalid事件 = 當用戶輸入不符合規則的時候提示的內容隨意改setCustomValidity 就是用來修改 requered值的函數
oninput事件 = 約等於chuange事件 立即執行
console.log(‘Hello World‘)
HTML5新特性總結