# html5 有哪些新特性、移除了那些元素？ #### 如何處理 HTML5 新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？ ###### tags: `HTML` `web camp 試題` HTML5 是 HTML 標準的最新演進版本,它是一個新的 HTML 語言版本包含了新的元素，屬性和行為，同時包含了一系列可以被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。這套技術往往被稱作 HTML5 和它的朋友們，通常簡稱為 HTML5 ## 新特性 1.語意特性,添加`<header></header><nav></nav>`等標籤 2.多媒體，用於媒介回放的 video 和 audio 元素 3.圖像效果，用於繪畫的 canvas 元素，svg 元素等 4.離線&存儲,對本地離線存儲的更好的支持,local Store, Cookies 等 5.設備兼容特性，HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連， 6.連接特性，更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能 7.性能與集成特性，HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作 新增標籤 1.多媒體：``<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>`` 2.新表單元素：`<datalist> ,<output> , <keygen>` 3.新文檔節段和綱要: `<header>`页面头部、`<section>`章节、`<aside>`边栏、`<article>`文档内容、`<footer>`页面底部、`<section>`章节、`<aside>`边栏、`<article>`文档内容、`<footer>`页面底部等 使用 html5shiv 可以解決 ie 低版本不兼容的問題，只需要在 head 中加上,當版本低於 IE9 時，瀏覽器會加載html5.js 腳本，使得支持 html5 的新功能，也可以將腳本文件下載到本地。 ```htmlmixed= <head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--> </head> ``` 3.input 有哪些新增類型？ - color 選擇顏色 - date 選擇日期 - email 用於檢測輸入的是否為email格式的地址 - month 選擇月份 - number 用於應該包含數值的輸入域，可以設定對輸入值的限定 - range 用於定義一個滑動條，表示範圍 - search 用於搜索，比如站點搜索或Google 搜索 - tel輸入電話號碼 - time選擇時間 - url 輸入網址 - week 選擇周和年 4.瀏覽器本地存儲中cookie 和localStorage 有什麼區別？localStorage 如何存儲刪除數據。 共同點：sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。 區別 1.cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞，localStorage不會自動把數據發給服務器，僅在本地保存 2.cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下，存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。localStorage不會自動把數據發給服務器 3.cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據 4.localStorage支持事件通知機制，可以將數據更新的通知發送給監聽者。api接口使用更方便。而cookie的原生接口不友好，需要程序員自己封裝 HTML5中提供了localStorage對象可以將數據長期保存在客戶端，除非人為清除，localStorage提供了幾個方法: 1.存儲: localStorage.setItem(key,value)如果key存在時，更新value 2.獲取localStorage.getItem(key)如果key不存在返回null 3.刪除localStorage.removeItem(key)一旦刪除，key對應的數據將會全部刪除 4.全部清除localStorage.clear()使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage對象保存的數據 注意：localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據,儲存空間5M。 #### 資料來源 [https://html-differences.whatwg.org/#new-elements](html-differences.whatwg.org) [w3c.org 中文](http://www.chinaw3c.org/)