HTML5介紹

• H5并不是新語言，而是HTML的第五次重大修改(版本)，移動端支持優于PC端
• 所有主流瀏覽器都支持H5，但IE8及其以下不支持
• 改變了用戶與網頁的交互方式：各種新型的多媒體標簽代替了flash
• 新增的重要特性：語義化特性、本地存儲特性、多媒體、二維三維、特效動畫等
• 相對于H4的進步：
  • 拋棄了一些不合理的舊屬性標簽
  • 新增了一些標簽和屬性
  • 機構代碼更加的簡潔易讀

新增的語義化標簽

• H5中新增了非常多的語義化標簽，這里只介紹幾個常見的，更多的自己去翻手冊
  • header 頁眉
  • nav 導航
  • main 頁面主要內容
  • article 文章
  • aside 主題內容之外
  • footer 頁腳
• 注意，這幾個語義化標簽本質上與div是沒有區別的，只是現在通過標簽名就能更加直觀的知道它代表的是網頁哪個部分
• 另外，關于header和footer在語法規則中它們不是只針對與網頁頭部和網頁底部，也可以用作頁面中某塊區域的頭部和底部。但是這里建議，一張網頁里最好只用一次，讓結構更加清晰

語義化標簽的兼容性

• 說到兼容性，肯定就跟IE有關系，只有IE10以上才完全支持H5
• IE9雖然支持了H5，但是它不是全部支持，而是選擇性支持。不支持的語義化標簽，會默認為行內元素。解決方法就是將其不認識的轉換為塊級元素
• IE8及其以下不支持H5，所以完全不認識語義化標簽，目前有兩種解決方法：
  • 1.在JS中動態創建語義化標簽元素，這樣IE8就能識別了。但是JS中動態創建新元素，默認也是行內元素，也要轉換元素模式
  • 2.外部引入html5shiv.js文件，這是一個js庫。它的目的就是解決IE8及其以下版本能夠正常識別語義化標簽

HTML5表單新增內容

新增表單input控件type類型

• H5中增加了大量的input控件type類型，讓很多以前需要js來配合實現的功能，現在只需要一個type就能解決：
  • type="email"郵箱類型，自帶了郵箱格式的驗證，點擊提交時如果郵箱格式不正確會阻止提交，并提示錯誤
  • type="tel"電話類型，沒有驗證功能，作用是移動端點擊輸入框時自動彈出數字鍵盤
  • type="url"網址類型，自帶驗證網址的功能，格式不正確也會阻止提交并提示，注意格式中必須有http://
  • type="number"數字類型，在輸入框中不能輸入非數字和點以外的任何字符，自帶上下鍵，還可以通過max和min來控制最大值和最小值
  • type="search"搜索類型，自帶了清除一鍵所有內容按鈕，注意匹配提示涉及到后臺數據獲取，表單做不到還是要js來實現
  • type="range"范圍類型，樣式為可拖動的條，可以設置默認值和最大最小值
  • type="color"顏色拾取器，點擊可以選取顏色，我們可以通過value值來獲取用戶選擇的顏色
  • type="time"時間類型，樣式為時分秒的輸入框
  • type="date"日期類型，樣式為年月日的輸入框，只要涉及到日期的都自帶日期選擇插件
  • type="datetime-local"時間日期類型，樣式為年月日 時分秒的輸入框，與datetime功能相同(只有safari支持)
  • type="month"月份類型，樣式為年月的輸入框
  • type="week"周類型，樣式為年星期的輸入框

新增表單input控件屬性

• 新增的屬性都是非常實用的，要多練習牢記
  • placeholder="默認文字"默認提示文字，有點類似value值，但是只有在內容為空時才顯示，輸入值會自動消失
  • autofocus自動讓輸入框獲取焦點
  • autocomplete="on|off"自動記錄輸入值，在下次輸入時自動匹配并提示。on是開啟off是關閉。注意這個屬性要實現功能必須有兩個前提：
    • 必須提交過數據，提交過才會自動記錄輸入值
    • 輸入框必須有name屬性，有了才能識別記錄的哪個輸入框
  • required自動驗證輸入框是否為空，為空阻止提交并提示
  • pattern="正則表達式"提供在html中的正則驗證功能，如果不滿足會阻止提交并提示，注意這個屬性中寫正則表達式，不用加//。另外如果輸入值錯誤后，就算修改成正確的也不能通過，必須刷新頁面才可以，目前是一個BUG
  • multiple該屬性在不同類型控件中，作用不一樣。在file文件提交控件，作用是可以提交多個文件；在郵箱控件中，作用是可以輸入多個郵箱地址，以逗號分隔。還有更多作用去翻閱手冊
  • form="表單id值"這個屬性可以讓控件指定歸屬表單
    • 比如某些情況下，表單控件因為限制不能寫form表單中，但是又想跟隨form表單一起提交
    • 那么就可以給form表單設置id值，并給在form外的控件設置form屬性，值就是對應的id。當對應id的form提交時，這個控件會歸屬于對應form一起提交

新增表單元素

• 三個表單的新增元素，幾乎都很少用，現在只做一個了解即可
• datalist下拉選擇框
  • datalist的結構與select相似，內部都是嵌套option標簽。但是他們的功能卻不一樣，datalist的存在為了讓用戶既能夠輸入，也能選擇
  • datalist不能單獨使用，它必須和input控件關聯起來使用。在input控件中添加list屬性，值就是datalist的id，這樣它們就關聯起來。鼠標經過輸入框可以看到一個下拉的三角符號，點擊就是可選擇項，不點擊仍然可以輸入
  • 另外有一個特列，就是在type="url"輸入框，option的value值中，網址前面必須加上http://才能正常顯示
  • 而且它的兼容性很差，在火狐瀏覽器中不支持這個標簽
• keygen加密標簽
  • 在表單中加入keygen標簽后，當點擊提交按鈕時，它會自動生成兩個鑰匙。私鑰存儲在客戶端，公鑰連同用戶輸入的信息，一起發給服務器。下次在操作時會進行鑰匙比對，通過才能進行操作
• output輸出標簽
  • 就是一個單純輸出內容標簽，與span功能相似，相對而言更語義化一些

表單新增事件

• oninput這個事件在DOM中已經學過了，就是在input控件內容發生改變的時候會觸發，包括增加內容和刪除內容
• oninvalid這個事件會在input控件內容驗證不通過的時候觸發，經常會配合pattern和setCustomValidity()一起使用，方法的作用是修改默認的錯誤提示信息

進度條

• progress標簽會顯示進度條，有兩個屬性：value表示當前值，max表示最大值
• meter標簽會顯示度量器，有五個屬性：value表示當前值，low表示較小值，high表示較大值，min表示最小值，max表示最大值
• 這兩個標簽的樣式都是進度條的形式，但是顯示的效果會有區別，具體可以去寫寫看

多媒體標簽

• audio音頻標簽，在頁面中插入音樂文件，有幾個重要屬性
  • src="url"音頻文件地址，必須寫的屬性
  • controls播放器控制面板，如果不寫此屬性是看不到控制面板的
  • autoplay自動播放，打開頁面就自動播放，不需要手動點
  • loop循環播放
• video視頻標簽，在頁面中插入視頻文件，有幾個重要屬性
  • src="url"視頻文件地址，必須寫的屬性
  • controls播放器控制面板，如果不寫此屬性是看不到控制面板的，每個瀏覽器的控制面板會有不同
  • autoplay自動播放，打開頁面就自動播放，不需要手動點
  • loop循環播放
  • height="xx"視頻高度
  • width="xx"視頻寬度，注意設置時只寫寬或者高其中一個就行，它會自動等比例縮放，不要同時都寫
  • poster="url"視頻封面，將地址圖片作為視頻沒播放時的封面，如果不寫此屬性那么默認封面是視頻的第一幀
• source標簽，因為兼容問題，每個瀏覽器支持的視頻格式都不一樣，為了解決兼容問題用到它，代碼如下：
  <video controls>
<source src="url" type="video/視頻格式1">
<source src="url" type="video/視頻格式1">
視頻格式不支持
</video>
  • 可以看到source標簽包裹在video標簽中，如果用到source，那么src屬性寫在source標簽中，并且還要寫type屬性注明視頻格式
  • 當瀏覽器加載視頻時會自動判斷，如果支持第一個source的視頻直接顯示，如果不支持判斷第二個source的視頻，支持就顯示。多個都不支持時提示視頻格式不支持
• 多媒體還有很多其他事件和方法，在自定義播放器案例中查看

H5新增的JSDOM操作方法

• querySelector()查詢選擇器方法，它可以通過傳入的參數來找到某個元素，它的參數支持類名、id名、標簽名。注意參數的寫法和jquery有點像，類名前加點，id名前加井號。另外如果找到多個滿足條件的元素，默認返回第一個
• querySelectorAll()這個使用方法可以上面一個一樣，不過它會找到全部滿足條件的元素，并以數組的方式返回它們
• classList屬性可以獲取到元素的樣式類名列表，返回的是一個數組。它完全可以代替以前className的作用。并且使用classList.item[索引值]，可以獲取該元素具體的某項類名
• add()方法配合classList可以為元素添加一個類名
• remove()方法配合classList可以為元素移除一個類名
• toggle()方法配合classList可以為元素切換一個類名，有就刪除，沒有就添加
• contains()方法配合classList可以判斷元素中是否有這個類名，返回布爾值

新增自定義屬性的操作

• 在h5結構中添加自定義屬性規范：
  • 必須是data-開頭，且后面至少有一個字符，如果有多個單詞用-連接
  • 命名建議：
  • 都應該使用小寫
  • 不要帶特殊符號
  • 不要是純數字
• jsDom獲取自定義屬性值的方法：
  • 元素.dataset[屬性名]使用dataset方法，注意這里屬性名不包括data-，只寫后面的部分。并且不要寫-鏈接，用駝峰式命名法
  • 例如：有一個自定屬性data-get-value=xxx，那么在js獲取時應該寫元素.dataset['getValue']

新增API

網絡監聽接口

• ononline當網絡連接時，觸發這個事件
• onoffline當網絡斷開時，觸發這個事件

全屏接口

• 元素.requestFullScreen()讓元素全屏顯示
• document.cancelFullScreen()退出全屏顯示
• document.fullScreenElement判斷是否全屏
• 注意事項：退出全屏和判斷全屏只能使用document來調用。另外每個瀏覽器兼容不同，需要加上不同的前綴才能正常識別。谷歌前綴webkit；火狐前綴moz；IE前綴ms；oprea前綴o

FileReader讀取文件接口

• 使用下面方法是需要先創建一個讀取文件對象，才能調用，new FileReader()
  • readAsText()讀取文本文件(只要是能用txt打開的就是文本文件)，并返回文本字符串，默認是UTF-8編碼
  • readAsBinaryString()讀取任意類型的字符串，返回二進制字符串。因為用戶肯定看不懂二進制字符串，所以這個一般是用來存儲文件。該方法將文件讀取后，把返回的二進制字符發送給服務器存儲起來
  • readAsDataURL()讀取文件獲取一段data開頭的字符串，這段字符串本質就是DataUrl。注意：該方法沒有返回值，它會把獲取的字符編碼存儲在文件讀取對象的result中
    • 什么是DataURL呢？
    • 正常情況下，如果想展示一張圖片那么就使用img標簽，并在src屬性寫上圖片ulr地址，當頁面加載時會向服務區發送請求，加載外部圖片到頁面后展示。但是這樣就涉及到請求的過程，是要占用服務器資源的
    • DataURL就是為了解決這個問題，它會將文件資源(一般是圖像或者能夠嵌入到文檔的文件)，轉換為Base64位編碼形式的字符串，然后將字符串直接保存在url中，當頁面加載時直接就顯示了文件資源，省去向服務器發送請求的一步。這樣做節省服務器資源占用，提高了網頁加載速度和執行效率
    • 很直觀的例子就是qq換頭像，當你選擇頭像圖片后，并沒有點擊提交就能直接預覽到頭像圖片
  • abort()直接中斷文件的讀取
• 讀取文件的相關事件
  • onabort讀取文件中斷時觸發
  • onerror讀取文件錯誤時觸發
  • onload讀取文件完成時觸發
  • onloadend讀取文件結束時觸發，不管是否讀取成功
  • onloadstart讀取文件開始時觸發
  • onprogress讀取過程中持續觸發
• 文件讀取一般都需要一些時間，所以要用異步回調的方式來通知結果

拖拽接口

• 如果想要拖拽某個元素，那么首先要給元素添加draggable="ture"屬性才可以。當然圖片和超鏈接默認自帶了拖拽屬性不用加
  • 拖拽事件：
  • 應用于被拖拽元素：
    • ondrag元素被拖拽的過程中會持續觸發
    • ondragstart當元素被拖拽開始的瞬間觸發
    • ondragleave當鼠標離開被拖拽元素時觸發
    • ondragend當拖拽結束時觸發，就是鼠標松開
  • 應用于目標元素：
    • ondragenter當拖拽元素的鼠標進入目標時觸發
    • ondragover當拖拽元素的鼠標停留在目標內時觸發
    • ondrop當拖拽元素在目標內，鼠標松開時觸發，注意這個事件是被瀏覽器默認禁止的，要在ondragover事件中調用e.preventDefault()方法，阻止默認行為
    • ondragleave當拖拽元素的鼠標離開目標時觸發
• 如果只為具體的某個元素注冊拖拽事件，那么局限性太大了。為了時拖拽事件能夠應用于任何元素，一般是使用document來注冊拖拽事件，通過事件對象的target屬性來獲取具體的事件源對象
• 另外要成功拖拽元素，肯定要在ondrop中把被拖拽的元素追加到目標元素中，就會涉及到被拖拽元素的存取，正常情況下不推薦使用全局變量來存值，這樣會有內存泄漏的風險，下面介紹一種事件對象存值的方法：
  • event.dataTransfer.setData("數據類型"，數據)這樣就可以把數據存儲在事件對象的dataTransfer屬性中，然后在再通過event.dataTransfer.getData('數據類型')來獲取
  • 這個方法有兩個局限性，第一是只能存儲字符類型的數據；第二是獲取數據只能在ondrop事件中，其他事件中獲取不到

地理位置接口

• navigator.geolocation.getCurrentPosition(success,error,position)，使用這個方法就可以調用瀏覽器獲取用戶的地理位置，當然需要用戶先選擇是否允許才可以，下面是對幾個參數的解釋，這三個參數命名可以自定義：
  • success參數是一個回調函數，當成功獲取到地理位置后，就會執行這個回調函數，并將獲取的信息以參數的形式傳給它，所以該函數需要一個形參來接受，接受到的參數介紹(假如形參變量名是position)：
    • position.coords.latitu緯度
    • position.coords.longitude經度
    • position.coords.accuracy精度
    • position.coords.altitude海拔高度
  • error參數也是一個回調函數，它正好與success相反，當獲取地理位置失敗會調用這個回調函數，并將失敗的類型以參數的形式傳給它，參數介紹(假如形參變量名是error):
    • error.PERMISSION_DENIDE用戶拒絕共享位置
    • error.POSITION_UNAVAILABLE獲取不到位置信息
    • error.TIMEOUT超時
    • error.UNKNOWN_ERROR未知錯誤
  • option是一個可以選參數，它是一個對象用來設置獲取地理位置的方式,參數介紹：
    • enableHighAccuracy:true|false是否使用高精度
    • timeout:xx 設置超時時間毫秒
    • maximumAge:xx 設置獲取失敗后，瀏覽器重新獲取的間隔時間，毫秒
• 當然因為國情限制，瀏覽器基本無法獲取到地理位置，所有大部分情況下都是使用第三方軟件的提供的API，比如百度地圖、高德地圖等
• 有空多研究以下現成的三方軟件地圖API，功能強大豐富，只要拿過來稍作修改就能用了

web存儲接口

• window.sessionStorage將數據存儲到本地，存儲空間在5M左右。注意這個方法數據是存儲在當前頁面內存中，就是說換個瀏覽器或者換個頁面都不能獲取到存儲的值。它的生命周期也在當前頁面，當前頁面關閉后數據就自動清除了。所以一般用來存儲一些臨時的值
  • window.sessionStorage.setItem(鍵，值)存儲數據，以鍵值對的形式
  • window.sessionStorage.getItem(鍵)獲取值，通過存儲值時設置的鍵來獲取，如果獲取不存在的值返回空
  • window.seesionStorage.removeItem(鍵)刪除值，通過存儲值時設置的鍵來獲取，如果刪除不存在的值，不會報錯也沒有任何操作
  • window.sessionStorage.clear()清空所有存儲的值
• window.localStorage同樣是將數據存儲到本地，存儲空間在20M左右。這個方法是將數據存儲在硬盤中，同一個瀏覽器的不同頁面可以共享數據，并且該數據只要你不用方法來清除它，那么它是永久存在的。所以一般用來保存一些常用的值
  • window.localStorage.setItem(鍵，值)存儲數據，以鍵值對的形式
  • window.localStorage.getItem(鍵)獲取值，通過存儲值時設置的鍵來獲取，如果獲取不存在的值返回空
  • window.localStorage.removeItem(鍵)刪除值，通過存儲值時設置的鍵來獲取，如果刪除不存在的值，不會報錯也沒有任何操作
  • window.localStorage.clear()清空所有存儲的值
• 應用程序緩存CACHE MAINFEST，如果在瀏覽網頁的時候，突然斷網了，你會發現之前打開過的頁面還是能繼續訪問。這就是瀏覽器的默認緩存，但是它的缺點是不可控，要么頁面全部緩存要么就不緩存
  • 為了解決這個問題H5增加了應用程序緩存，要使用它首先得在html標簽加上mainfest="緩存清單文件路徑"，緩存清單文件建議以.appcache作為擴展名
  • 緩存清單文件書寫格式：
    • CACHE MAINFEST第一行必須是這個字段，標記這是一個緩存清單文件
    • CACHE:緩存文件清單列表，在下面寫上你想要緩存的文件路徑即可，*代表緩存所有文件
    • NETWORK:每次都必須向服務器重新請求的文件，寫在這個下面的文件，不能緩存必須每次重新向服務器發送請求加載
    • FALLBACK:這個字段表示找不到的文件用另外的文件來代替，所以寫在它下面的是兩個為一組，用空格隔開，左邊的文件如果找不到就用右邊的文件來代替。/表示所有找不到的文件
    • 另外如果服務器是IIS類型的可能會不識別appcache文件格式，需要給其配置MIME-type，即text/cache-mainfest才可以，運行inetmgr快捷打開配置面板
• 關于cookie、storage、session之間的區別現在還不清楚，不過沒具體用到也不做過多深入，等用到詳細解釋