HTML5新標籤及用法
阿新 • • 發佈：2019-02-17
感謝：來自 知乎，指令碼之家，簡書:GarenWang ，大前端 的文章。
語義化的好處
去掉樣式能讓頁面結構呈現清晰。普通人容易讀
螢幕閱讀器會按標記“讀”你的網頁。螢幕容易讀
有益於SEO。爬蟲容易讀
便於團隊開發和維護。程式猿容易讀
H5是什麼？
- h5指的是一系列技術做的移動端ppt,主要技術有：
- 1.頁面素材載入技術，使用使用createJS之中的preloadJS（現成的庫）
- 2.音樂載入播放技術，createJS中同樣有soundJS可以實現（又是它）
- 3.可以滑動的頁面，這不就是ppt嗎？用了swiper.js這個Jquery外掛（又是庫）
- 4.可以隨意塗抹修改，使用canvas疊加層，canvas是HTML5標準裡面的標籤。這不是ppt嗎？
- 5.有動態的文字和圖片，常見的是使用了css3或者直接使用js動畫,這不是ppt嗎?
- 6.可以填表報名，使用最基本的表單
- 7.可以支援分享自定義的文案和圖片
HTML5是什麼？
- HTML5是一系列的HTML標準
doctype宣告
<!DOCTYPE html>
常見結構標籤
article：頁面上
結構完整並且內容獨立 例如文章
aside：非正文內容， 例如廣告側邊欄
section：文件中的節，例如小說中的一章
header：文章的頭部，通常是一些引導和導航資訊
footer：定義section或document的頁尾
nav：定義顯示導航連結
canvas：畫布
video：視訊流
audio：音訊流
source：定義媒介資源（video，audio）
progress：進度條，max 進度最大值，value為當前值
details：描述文件某個部分細節，可以摺疊
summary：預設顯示的details元素的標題，details包含summary
mark：標記需要突出顯示的文字，markdown也可以用哦。
command：命令按鈕，如單選按鈕，複選框，按鈕。
localStorage
- localStorage物件可以將資料長期儲存在客戶端,除非人為清除。
- 1.儲存:localStorage.setItem(key,value)如果key存在時，更新value
- 2.獲取 localStorage.getItem(key)如果key不存在返回null
- 3.刪除 localStorage.removeItem(key)一旦刪除，key對應的資料將會全部刪除
- 4.全部清除
localStorage.clear()使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage物件儲存的資料注意：localStorage存數的資料是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的資料,儲存空間5M。
IE低版本相容
- 使用html5shiv可以解決ie低版本不相容的問題，只需要在head中加上,當版本低於IE9時，瀏覽器會載入html5.js指令碼，使得支援html5的新功能。
一定要是head部分因為IE必須在元素解析前知道這個元素，所以這個js檔案不能在其他位置呼叫，否則失效）。
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--> </head>
input的新成員
color,date,month,tel,time,week
email 用於檢測是否為email格式
number 用於應該包含數值的輸入域，可以設定對輸入值的限定
range 用於定義一個滑動條，表示範圍min， max， step
search 用於搜尋，比如站點搜尋或 Google 搜尋
url 輸入網址
表單新增屬性
placeholder：輸入框提示資訊
autofocus：指定表單獲取輸入焦點
required：必填欄位
pattern：正則驗證form：規定輸入域所屬的一個或多個表單（form屬性所以用表單的id）
formaction：重寫表單的action屬性
formmethod：重寫表單的method屬性
autocomplete：on/off，是否自動補全之前提交的資料，以用於下一次輸入建議
新增表單驗證
novalidate：表單取消驗證
formnovalidate：submit元素取消驗證
setCustomValidity：自定義驗證資訊