2019-03-22 H5面試

HTML5是什么铸抑?有哪些新特性?有哪些新增標(biāo)簽刨啸?如何讓低版本的 IE 支持 HTML5新標(biāo)簽获茬?、

HTML5?是 HTML標(biāo)準(zhǔn)的最新演進(jìn)版本,它是一個(gè)新的 HTML?語言版本包含了新的元素锰茉,屬性和行為呢蔫,同時(shí)包含了一系列可以被用來讓 Web 站點(diǎn)和應(yīng)用更加多樣化,功能更強(qiáng)大的技術(shù)飒筑。 這套技術(shù)往往被稱作?HTML5 和它的朋友們片吊,通常簡(jiǎn)稱為?HTML5

新特性

1.語意特性,添加<header><header/><nav><nav>等標(biāo)簽

2.多媒體, 用于媒介回放的 video 和 audio 元素

3.圖像效果协屡,用于繪畫的 canvas 元素俏脊,svg元素等

4.離線 & 存儲(chǔ),對(duì)本地離線存儲(chǔ)的更好的支持,local Store,Cookies等

5.設(shè)備兼容特性 ,HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口肤晓。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連爷贫,

6.連接特性,更有效的連接工作效率材原,使得基于頁面的實(shí)時(shí)聊天沸久,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)余蟹。HTML5擁有更有效的服務(wù)器推送技術(shù)卷胯,Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能

7.性能與集成特性威酒,HTML5會(huì)通過XMLHttpRequest2等技術(shù)窑睁,幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作

新增標(biāo)簽

1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>

2.新表單元素:<datalist> ,<output> , <keygen>

3.新文檔節(jié)段和綱要:<header>頁面頭部挺峡、<section>章節(jié)、<aside>邊欄担钮、<article>文檔內(nèi)容橱赠、<footer>頁面底部、<section>章節(jié)箫津、<aside>邊欄狭姨、<article>文檔內(nèi)容、<footer>頁面底部等

使用html5shiv可以解決ie低版本不兼容的問題苏遥,只需要在head中加上,當(dāng)版本低于IE9時(shí)饼拍,瀏覽器會(huì)加載html5.js腳本,使得支持html5的新功能田炭,也可以將腳本文件下載到本地

兼容

使用html5shiv可以解決ie低版本不兼容的問題师抄,只需要在head中加上,當(dāng)版本低于IE9時(shí),瀏覽器會(huì)加載html5.js腳本教硫,使得支持html5的新功能叨吮,也可以將腳本文件下載到本地

<!--[if lt IE 9]>

? <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>

? </script>

? <![endif]-->

input 有哪些新增類型?

color,選擇顏色

date 選擇日期

email 用于檢測(cè)輸入的是否為email格式的地址

month 選擇月份

number? 用于應(yīng)該包含數(shù)值的輸入域瞬矩,可以設(shè)定對(duì)輸入值的限定

range 用于定義一個(gè)滑動(dòng)條茶鉴,表示范圍

search 用于搜索,比如站點(diǎn)搜索或 Google 搜索

tel 輸入電話號(hào)碼

-time 選擇時(shí)間

url 輸入網(wǎng)址

week 選擇周和年

瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別丧鸯? localStorage 如何存儲(chǔ)刪除數(shù)據(jù)蛤铜。

共同點(diǎn):sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)丛肢。

區(qū)別

1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞剿干,localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器蜂怎,僅在本地保存

2.cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下置尔,存儲(chǔ)大小限制也不同杠步,cookie數(shù)據(jù)不能超過4k,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie榜轿,所以cookie只適合保存很小的數(shù)據(jù)幽歼,如會(huì)話標(biāo)識(shí)。localStorage 雖然也有存儲(chǔ)大小的限制谬盐,但比cookie大得多甸私,可以達(dá)到5M或更大。localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器

3.cookie只在設(shè)置的cookie過期時(shí)間之前一直有效飞傀,即使窗口或?yàn)g覽器關(guān)閉皇型。localStorage:始終有效诬烹,窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù)

4.localStorage支持事件通知機(jī)制弃鸦,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者绞吁。 api 接口使用更方便。而cookie的原生接口不友好唬格,需要程序員自己封裝

HTML5中提供了localStorage對(duì)象可以將數(shù)據(jù)長(zhǎng)期保存在客戶端家破,除非人為清除,localStorage提供了幾個(gè)方法:

1.存儲(chǔ):localStorage.setItem(key,value)如果key存在時(shí)购岗,更新value

2.獲取localStorage.getItem(key)如果key不存在返回null

3.刪除localStorage.removeItem(key)一旦刪除汰聋,key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除

4.全部清除localStorage.clear()使用removeItem逐個(gè)刪除太麻煩,可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)

注意:localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的藕畔,一個(gè)瀏覽器只能讀取各自瀏覽器的數(shù)據(jù),儲(chǔ)存空間5M马僻。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市注服,隨后出現(xiàn)的幾起案子韭邓,更是在濱河造成了極大的恐慌,老刑警劉巖溶弟,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件女淑,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡辜御,警方通過查閱死者的電腦和手機(jī)鸭你,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來擒权,“玉大人袱巨,你說我怎么就攤上這事√汲” “怎么了愉老?”我有些...
    開封第一講書人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)剖效。 經(jīng)常有香客問我嫉入,道長(zhǎng),這世上最難降的妖魔是什么璧尸? 我笑而不...
    開封第一講書人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任咒林,我火速辦了婚禮,結(jié)果婚禮上爷光,老公的妹妹穿的比我還像新娘垫竞。我一直安慰自己,他們只是感情好瞎颗,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開白布件甥。 她就那樣靜靜地躺著捌议,像睡著了一般。 火紅的嫁衣襯著肌膚如雪引有。 梳的紋絲不亂的頭發(fā)上瓣颅,一...
    開封第一講書人閱讀 51,562評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音譬正,去河邊找鬼宫补。 笑死,一個(gè)胖子當(dāng)著我的面吹牛曾我,可吹牛的內(nèi)容都是我干的粉怕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼抒巢,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼贫贝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蛉谜,我...
    開封第一講書人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤稚晚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后型诚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體客燕,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年狰贯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了也搓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涵紊,死狀恐怖傍妒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情摸柄,我是刑警寧澤拍顷,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站塘幅,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏尿贫。R本人自食惡果不足惜电媳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庆亡。 院中可真熱鬧匾乓,春花似錦、人聲如沸又谋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至咧七,卻和暖如春衰齐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背继阻。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工耻涛, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瘟檩。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓抹缕,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親墨辛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子卓研,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)睹簇。 注意:講述HT...
    kismetajun閱讀 27,486評(píng)論 1 45
  • ??支持離線 Web 應(yīng)用開發(fā)是 HTML5 的另一個(gè)重點(diǎn)带膀。 ??所謂離線 Web 應(yīng)用志珍,就是在設(shè)備不能上網(wǎng)的情況...
    霜天曉閱讀 1,033評(píng)論 0 2
  • 【轉(zhuǎn)載】CSDN - 張林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牘閱讀 3,488評(píng)論 1 14
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點(diǎn)這里 看全部問題和答案點(diǎn)這里 本文由我...
    自you是敏感詞閱讀 761評(píng)論 0 3
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化,入門級(jí)到專家級(jí)垛叨,廣度和深度都會(huì)有所增加伦糯。 題目類型: 理論知...
    怡寶丶閱讀 2,583評(píng)論 0 7