HTML5新增屬性

新增語義化標籤

<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章 如文章、評論、帖子、博客
<aside> 表示側邊欄 如文章的側欄
<figure> 表示媒介內容分組 與 ul > li 作個比較

表單類輸入類型

• email 輸入email格式
• tel 手機號碼
• url 只能輸入url格式
• number 只能輸入數字
• search 搜索框
• range 範圍
• color 拾色器
• time 時間
• ==date 日期 （不是絕對的）==
• datetime 時間日期
• month月份
• week 星期
• 部分類型是針對移動設備生效的，而且具備必定的兼容性，在實際開發中，能夠選擇性使用

表單屬性

• placeholder 佔位符
• autofocus 獲取焦點
• multiple 文件上傳多選或多個郵箱地址
• autocomplete 自動完成，用於form元素，也可用於部分input
• form 指定表單項屬於哪一個form， 處理複雜表單時會須要
• novalidate 關閉驗證， 可用於
  標籤，（只適用於form）
• required 驗證條件，必填項
• pattern 正則表達式 自定義驗證規則

表單事件

• oninput 用戶輸入內容是觸發，可用於移動端輸入字數統計
• oninvalid 驗證不經過時觸發

音頻

• autoplay 自動播放
• controls 是否顯示不默認播放控件
• loop 循環播放

<audio src = './music/See You Again.mp3'> </audio>

視頻

• H5經過<video>標籤來解決音頻播放的問題，同音頻播放同樣，<video>使用也至關簡單，

<video src = './video/movie.mp4' controls = 'controls'> </video>

• autoplay 自動播放
• controls 是否顯示不默認播放控件
• loop 循環播放
• preload 預加載，同時設置了autoplay， 此屬性將失效
• width 設置播放窗口寬度
• height 設置播放窗口的高度

video.js 第三方的視頻 插件

• 多瀏覽器支持的方案

<video controls = 'controls'>
    <source src = './video/movie.ogg'>
    <source src = './video/movie.mp4'>
    您的瀏覽器不支持HTML視頻 播放功能
</video>

DOM模塊

獲取元素

1. document.querySelector('selector') 經過css選擇器獲取元素，符合匹配條件的第一個元素
2. document.querySelectorAll('selector') 經過css選擇器獲取元素，以類數組的形式存在

類名操做

1. Node.classList.add('class') 添加class
2. Node.classList.remove('class') 移除class
3. Node.classList.toggle('class') 切換class，有則移除，無則添加
4. Node.classList.contains('class') 檢測是否存在class

• Node指一個有效的DOM節點，是一個通稱。

自定義屬性

• data-info = '我是 自定義屬性'
• 經過Node.dataset['info']咱們能夠獲取到自定義的 屬性值

---

歷史管理

• window.history，對象咱們能夠管理歷史記錄，可用於單頁面應用，Single Page Application，能夠無刷新改變網頁內容。

舊版本

• history.back() 回退
• history.forward() 前進
• history.go(n) 前進/後退n步，正值前進，負值後退
• history.length歷史記錄條數

事件監聽

• onpopstate事件，當前進或後退時則觸發，經過事件對象ev.state能夠讀取到存儲的數據，監聽是要給window。

存儲機制

cookie

1. 設置、讀取方便
2. 容量較大，sessionStorage約5M、localStorage約20M
3. 只能存儲字符串，能夠將對象JSON.stringify() 編碼後存儲

window.sessionStorage

1. 生命週期爲關閉瀏覽器窗口
2. 在同一窗口下數據能夠共享

window.localStorage

1. 永久生效，除非手動刪除
2. 能夠多窗口共享

方法

setItem(key, value) 設置存儲內容
getItem(key) 讀取存儲內容
removeItem(key) 刪除鍵值爲key的存儲內容
clear() 清空全部存儲內容
key(n) 以索引值來獲取存儲內容

全屏

HTML5規範容許用戶自定義網頁上任一元素全屏顯示。
    requestFullScreen() 開啓全屏顯示
    cancelFullScreen() 關閉全屏顯示
    不一樣瀏覽器須要添加前綴如：
    webkitRequestFullScreen、mozRequestFullScreen
    webkitCancelFullScreen、mozCancelFullScreen
    規範容許全部元素能夠取全屏，但實際測試結果關閉全屏只能添加到document元素上
    經過document.fullScreen檢測當前是否處於全屏狀態
    不一樣瀏覽器須要添加前綴
    document.webkitIsFullScreen、document.mozFullScreen
    全屏僞類
    :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

事件監聽

onload 當文件讀取完成時調用

多媒體

方法： load(); play(); pause()
屬性： currentStr; currentTime; duration