H5一二事

時間 2019-12-11

標籤 h5 一二简体版

原文原文鏈接

先回顧一下WEB技術的幾個階段html

Web 1.0 內容爲主，主要流行HTML和CSS
Web 2.0 動態網頁，流行AJAX/JavaScript/DOM
H5 時代，WEB開發迴歸富客戶端

那麼H5確定不是多了一些標籤就完事了,H5也跟酷炫沒什麼關係，那是CSS3的事情，它更多的職責是功能，而不是外觀，是JavaScript API和CSS的提高，構建 Web 應用程序總體解決方案api

H5應用場景瀏覽器

極具表現力的網頁
網頁應用程序好比PC端的iCloud、百度腦圖、Office 365···APP端的淘寶、京東、美團···WeChat端的淘寶、京東、美團···
混合式本地應用好比PC端的網易雲音樂、有道詞典··· APP端的淘寶、京東、美團···
簡單的遊戲

H5新特性網絡

更語義化標籤
智能表單新的表單類型，如：email,url,number
新增表單功能屬性，如：autocomplete，autofocus 虛擬鍵盤適配，經過表單的類型決定移動端彈出的鍵盤類型
網頁多媒體，音頻、視頻、字幕
屬性，語義化屬性連接關係描述、結構數據標記、ARIA、自定義屬性
Canvas，提供網頁繪圖的可能 2D 繪圖、3D (WebGL)
SVG

JavaScript APIsession

核心平臺提高，JS在DOM和BOM兩個方向上都新增了不少api，便於開發應用程序新的選擇器、Element.classList、訪問歷史API、全屏API
網頁存儲，提供網頁中操做客戶端本地存儲的API Application Cache、localStorage、sessionStorage、WebSQL、IndexedDB
設備信息訪問，JS能夠訪問硬件的一些信息網絡狀態、硬件訪問、設備方向、地理圍欄
拖放操做網頁內拖放、桌面拖入
文件文件系統API、FileReader
網絡訪問 XMLHttpRequest、fetch、WebSocket
多線程、桌面通知等等

H5 骨架多線程

在Sublime\WebStorm等一些工具中 歎號加回車自動生成H5骨架ide

 1 <!-- H5的DOCTYPE聲明作了最大簡化 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5 <meta charset="UTF-8">
 6 <!-- 在標準的H5骨架中charset是直接在meta中設置charset -->
 7 <!-- 字符編碼的設置必定是在head中的第一行 -->
 8 <title>頁面標題</title>
 9 </head>
10 <body>
11 
12 </body>
13 </html>

語義化標籤工具

H5中制定了一系列語義化標籤：fetch