1: HTML5是什么?有哪些新特性?有哪些新增標(biāo)簽?如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5是什么:
HTML5是超文本標(biāo)記語言的第五次重大修改,2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成。
新特性:
語義特性
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的,微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。本地存儲特性
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術(shù)之一)和API說明文檔。設(shè)備兼容特性
從Geolocation功能的API文檔公開以來,HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇,帶來了更多體驗(yàn)功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,例如視頻影音可直接與microphones及攝像頭相聯(lián)。連接特性
更有效的連接工作效率,使得基于頁面的實(shí)時聊天,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。網(wǎng)頁多媒體特性
支持網(wǎng)頁端的Audio、Video等多媒體功能, 與網(wǎng)站自帶的APPS,攝像頭,影音功能相得益彰。
三維、圖形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。性能與集成特性
沒有用戶會永遠(yuǎn)等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù),解決以前的跨域等問題,幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
。新增標(biāo)簽
元素 | 描述 |
---|---|
canvas | 標(biāo)簽定義圖形,比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API |
audio | 定義音頻內(nèi)容 |
video | 定義視頻(video 或者 movie) |
source | 定義多媒體資源 <video> 和<audio> |
embed | 定義嵌入的內(nèi)容,比如插件 |
track | 為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道 |
datalist | 定義選項(xiàng)列表。與 input 元素配合使用該元素,來定義 input 可能的值 |
keygen | 規(guī)定用于表單的密鑰對生成器字段 |
output | 定義不同類型的輸出,比如腳本的輸出 |
article | 定義頁面正文內(nèi)容 |
aside | 定義頁面內(nèi)容之外的內(nèi)容 |
bdi | 設(shè)置一段文本,使其脫離其父元素的文本方向設(shè)置 |
command | 定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕 |
details | 用于描述文檔或文檔某個部分的細(xì)節(jié) |
dialog | 定義對話框,比如提示框 |
summary | 標(biāo)簽包含 details 元素的標(biāo)題 |
figure | 規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等) |
figcaption | 定義 <figure> 元素的標(biāo)題 |
footer | 定義 section 或 document 的頁腳 |
header | 定義了文檔的頭部區(qū)域 |
mark | 定義帶有記號的文本 |
meter | 定義度量衡。僅用于已知最大和最小值的度量 |
nav | 導(dǎo)航 |
progress | 定義任何類型的任務(wù)的進(jìn)度 |
ruby | 定義 ruby 注釋(中文注音或字符) |
rt | 定義字符(中文注音或字符)的解釋或發(fā)音 |
rp | 在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容 |
section | 定義文檔中的節(jié)(section、區(qū)段) |
time | 定義日期或時間 |
wbr | 規(guī)定在文本中的何處適合添加換行符 |
讓低版本的 IE 支持 HTML5新標(biāo)簽
- 使用html5shiv.js
注意 如果版本小于IE9就引入html5shiv.js,IE9以前的瀏覽器就能使用h5標(biāo)簽,并使用定義好的樣式了。這個標(biāo)簽必須放在head標(biāo)簽內(nèi),因?yàn)闉g覽器要在解析之前知道這個元素。
2: input 有哪些新增類型?
input新增type
- url
- number
- range
- Date Picker
date
month
week
time
datatime
3: 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別? localStorage 如何存儲刪除數(shù)據(jù)。
概念
Cookie
Cookie非常小,它的大小限制為4KB左右,它的主要用途有保存登錄信息,比如你登錄某個網(wǎng)站市場可以看到“記住密碼”,這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實(shí)現(xiàn)的。localStorage
localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù),它并不是什么劃時代的新東西。早在 IE 6 時代,就有一個叫 userData 的東西用于本地存儲,而當(dāng)時考慮到瀏覽器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多數(shù)瀏覽器所支持.sessionStorage
sessionStorage 與 localStorage 的接口類似,但保存數(shù)據(jù)的生命周期與 localStorage 不同。 sessionStorage 是一個前端的概念,它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會話中保存下來,刷新頁面數(shù)據(jù)依舊存在。但當(dāng)頁面關(guān)閉后,sessionStorage 中的數(shù)據(jù)就會被清空。
特性 | Cookie | localStorage |
---|---|---|
數(shù)據(jù)的生命期 | 默認(rèn)情況下,cookie開始于瀏覽器啟動,結(jié)束于瀏覽器關(guān)閉,但是可以手動設(shè)置cookie的過期時間,同時,到期后被刪除 | 除非被清除,否則永久保存 |
存放數(shù)據(jù)大小 | 4K左右 | 一般為5MB |
與服務(wù)器端通信 | 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 僅在客戶端(即瀏覽器)中保存,不參與和服務(wù)器的通信 |
易用性 | 需要程序員自己封裝,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封裝來對Object和Array有更好的支持 |
localStorage存儲數(shù)據(jù):
localStorage.setItem(key,value);
localStorage.key = value;
localStorage刪除數(shù)據(jù):
localStorage.removeItem(key) //刪除指定數(shù)據(jù)
localStorage.clear() //刪除所有數(shù)據(jù)
localStorage讀取數(shù)據(jù):
localStorage.getItem(key,value);
localStorage.key = value;