先回顧一下WEB技術的幾個階段
- Web 1.0 內容為主，主要流行HTML和CSS
- Web 2.0 動態網頁，流行AJAX/JavaScript/DOM
- H5 時代，WEB開發回歸富客戶端
那麼H5肯定不是多了一些標簽就完事了,H5也跟酷炫沒什麼關系，那是CSS3的事情，它更多的職責是功能，而不是外觀，是JavaScript API和CSS的提升，構建 Web 應用程序整體解決方案
H5應用場景
- 極具表現力的網頁
- 網頁應用程序 比如PC端的iCloud、百度腦圖、Office 365···APP端的淘寶、京東、美團···WeChat端的淘寶、京東、美團···
- 混合式本地應用 比如PC端的網易雲音樂、有道詞典··· APP端的淘寶、京東、美團···
- 簡單的游戲
H5新特性
- 更語義化標簽
- 智能表單 新的表單類型，如：email,url,number
- 新增表單功能屬性，如：autocomplete，autofocus 虛擬鍵盤適配，通過表單的類型決定移動端彈出的鍵盤類型
- 網頁多媒體， 音頻、視頻、字幕
- 屬性，語義化屬性 鏈接關系描述、結構數據標記、ARIA、自定義屬性
- Canvas，提供網頁繪圖的可能 2D 繪圖、3D (WebGL)
- SVG
JavaScript API
- 核心平台提升，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骨架
<!-- H5的DOCTYPE聲明做了最大簡化 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 在標准的H5骨架中charset是直接在meta中設置charset -->
<!-- 字符編碼的設置一定是在head中的第一行 -->
<title>頁面標題</title>
</head>
<body>
</body>
</html>
語義化標簽
H5中制定了一系列語義化標簽：
- section：獨立的內容節塊，一般包含標題和內容
- article：一種特殊的section，定義文檔中的具體的文章內容
- nav：頁面導航的鏈接組
- aside：標簽用來裝載非正文的內容，此標簽中的文字權重低
- header：定義文檔的頁眉，不僅僅是文檔的頁頭可以使用header，一個獨立塊的頭部也應該使用header
- footer：定義section或document的頁腳
我們應該根據內容的性質決定使用特定的標簽，比如說
- h1一定只能出現一個，這並不是HTML的約定，頁面中最重要的內容
- time標簽專門用於時間，
- datetime應該是一個標准時間格式，
- pubdate指的是當前時間為article的發布時間
在H5中，主體結構標簽默認和DIV都是相同的塊級效果
但是DIV沒有語義，而以上標簽有特定語義
那麼為啥要有語義化標簽？
- 能夠便於開發者閱讀和寫出更優雅的代碼，代碼如詩
- 同時讓浏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容
- 使用語義化標簽會具有更好地搜索引擎優化
最近群裡經常討論，關於什麼時候使用H5的新特性，能不能使用新特性的問題
我個人認為，無傷大雅的地方直接用
比如一個文本框，加上placeholder就具備占位文本提示功能，浏覽器不支持也不會報錯，那就可以直接使用
再比如`<input type="email">`，如果浏覽器不支持，默認會顯示文本框，那也可以直接用。