html5 · 前端速查手冊

>[success] # html5 ~~~ 1. 萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改 2. 支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力 3. HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式 4. 增加了新特性：語義特性，本地存儲特性，設備兼容特性，連接特性，網頁多媒體特性，三維、圖形及特效特性，性能與集成特性，CSS3特性 5. 相比之前的進步：取消了一些過時的HTML4標記，將內容和展示分離，一些全新的表單輸入對象，全新的，更合理的Tag，本地數據庫，Canvas 對象，瀏覽器中的真正程序，Html5取代Flash在移動設備的地位 6. 優點： a) 提高可用性和改進用戶的友好體驗； b) 有幾個新的標簽，這將有助于開發人員定義重要的內容； c) 可以給站點帶來更多的多媒體元素(視頻和音頻)； d) 可以很好的替代FLASH和Silverlight； e) 當涉及到網站的抓取和索引的時候，對于SEO很友好； f) 將被大量應用于移動應用程序和游戲； g) 可移植性好。 7. 缺點：該標準并未能很好的被Pc端瀏覽器所支持。因新標簽的引入，各瀏覽器之間將缺少一種統一的數據描述格式，造成用戶體驗不佳。 8. 未來趨勢 a) 移動優先 b) 游戲開發者領銜“主演” ~~~ >[danger] ##### 構建一個網頁布局用html4 實現 ![](https://box.kancloud.cn/82df7dfc45a5ccac76c817eff122da63_1376x489.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ width: 100%; height: 80px; background-color: red; } .nav{ width: 100%; height: 40px; background-color: green; } .main{ width: 100%; height: 500px; background-color: #ccc; } .main>.right,.main>.left{ float: left; } .main > .left{ width: 80%; height: 100%; background-color: purple; } .main > .right{ width: 20%; height: 100%; background-color: pink; } .footer{ width: 100%; height: 80px; background-color: skyblue; } </style> </head> <body> <div class="header">頭部</div> <div class="nav">導航</div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html> ~~~