html5 · 程序員開發筆記

[TOC] #### 什么是HTML5 ? HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。 ? HTML5是針對目前web發展對原有HTML的補充與升級，并不是顛覆 ? 將元素語義與元素內容呈現結果的影響分開，如去除font標簽添加article ? 使用標簽完全從標簽的語義出發，而不是表現形態 #### 新特性 ? HTML5 中的一些有趣的新特性： ? 用于繪畫的 canvas 元素 ? 用于媒介回放的 video 和 audio 元素 ? 對本地離線存儲的更好的支持 ? 新的特殊內容元素，比如 article、footer、header、nav、section ? 新的表單控件，比如 calendar、date、time、email、url、search #### 瀏覽器支持 ? 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。 Internet Explorer 9 #### HTML5 優勢 1. 提高可用性和改進用戶的友好體驗; 2. 有幾個新的標簽，這將有助開發人員定義重要的內容； 3. 可以給站點帶來更多的多媒體元素(視頻和音頻)； 4. 可以很好的替代FLASH和Silverlight； 5. 當涉及到網站的抓取和索引的時候，對于SEO很友好； 6. 將被大量應用于移動應用程序和游戲。 #### HTML5 主要包括部分 1. WebStorage：比Cookies更大、更有彈性的的儲存。 2. Web SQL Database：本地端的SQL數據庫。 3. Indexed DB：Key-value的本地數據庫。 4. Application Cache：將部分常用的網頁內容cache起來。 5. WebSocket：實時的socket聯機。 6. Web Workers：以往JavaScript都是single thread，透過Worker可以有多個運算。 7. Notifications：原生的提示訊息，類似像OS X的Growl提示。 8. Dragn Drop：HTML元素的拖拉。 9. File API：讀取用戶本機計算機的內容。 10.Geolocation：地理定位。 11.Device orientation：手持裝置的方向。 12.Speech input：語音輸入。 13.New tags：新的標簽，像是header、section等。 14.Application tags：也是新的標簽，像是meter、progress等。 15.Microdata：加入語義的數據讓搜索引擎等網站可以正確顯示。 16.Form type：form可以加入的type便多了，包含email和tel等屬性 17.Audio video：影片和音樂的原生播放支持。 18.Canvas的繪圖功能支持。 19.CSS 3技術 #### HTML5 中廢除的標簽原有的html中有一些標簽造成效果與表現的混淆，所以在html5中廢除了，不建議使用廢除標簽： ? big center font s u strike frame frameset noframes marquee #### Html舊標簽的改變 DOCTYPE 新寫法：<!DOCTYPE html> meta設置編碼新寫法：<meta charset=“utf-8”> link標簽新寫法：<link rel='stylesheet' src='hd.css'/> script標簽可以不用寫type：<script>…</script> #### 全局屬性 contenteditable屬性 ? 修改頁面中的標簽內容示例： <p contenteditable="true" style="width:300px;height:300px;border:solid 1px #f00f00;"></p> hidden屬性 ? 隱藏元素示例： <p hidden style="width:300px;height:300px;border:solid 1px #f00f00;"></p>