HTML5給我們帶來了什麼？
阿新 • • 發佈：2018-11-25
Web的增強與壟斷
- WebAPP HTML5新增加了離線儲存，更豐富的表單、JS執行緒、socket、標準擴充套件embed、CSS3...
- 流媒體與多媒體引擎 Audio、Video、Canvas、webgl等等
- 搜尋引擎和無障礙領域
移動網際網路
- 跨平臺 HTML5是唯一一個通吃PC、Mac、iPhone、Android等主流平臺的跨平臺語言
- 快速迭代 網際網路產品大多免費、且有網路效應，後入者搶奪使用者的難度非常大
- 減低成本 HTML5開發比原生APP開發成本降低一倍
- 導流入口多 HTML5應用導流以非常容易
- 分發效率高
Web趨勢
- Native App -> WebAPP -> Hybird App
- PC->移動->智慧互聯
- AR、VR、智慧硬體
- 視訊變局、線上教育、泛娛樂
內容
標籤變化
DTD、新增的標籤、刪除的標籤、重定義標籤
頁面佈局
新的頁面佈局、區別和意義
屬性變化
Input、表單屬性、連結屬性、其它屬性
瀏覽器
- 目前支援HTML5的瀏覽器有
IE9+
Firefox
Opera
Safari
*Chrome
常用的Doc type宣告
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML5 <!DOCTPYE html>
新增加的標籤
結構標籤--有意義的div
- article 標記定義一篇文章
- header 標記定義一個頁面或一個區域的頭部
- nav 標記定義導航連結
- section 標記定義一個區域
- aside 標記定義頁面內容部分的側邊欄
- hgroup 標記定義檔案中一個區塊的相關資訊
- figure 標記定義一級媒體內容以及它們的標題
- figcaption 標籤定上莊鎮figure元素的標題
- footer 標記定義一個頁面或一個區域的底部
- dialog 標記定義一個對話方塊(會話框)類似微信 header/section/aside/article/footer header/section/footer > aside/article/figure/hgroup/nav > div
對可用性產生負責影響的元素
frame freamset noframes
- 破壞整體結構
不影響搜尋引擎的收錄
重定向標籤
顯示不變，只是表達的含義進行了重新定義的標籤
- 代表內聯文字，通常是粗體，沒有傳遞表示重要的意思
- 代表內聯文字，通常是斜體，沒有傳遞表示重要的意思
- 可以同details與figure一同使用，包含文字，dialog也可用
- 可以同details與figure一同使用，彙總細節，dialog也可用