HTML5 & CSS3

題目1: HTML5是什么澄峰?有哪些新特性裳扯?有哪些新增標(biāo)簽择膝?如何讓低版本的 IE 支持 HTML5新標(biāo)簽

  • HTML5 是 HTML 的第五次重大修改淹真,設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。
特性:
  • 語(yǔ)義特性
  • 本地存儲(chǔ)特性(localStorage Indexed DB)
  • 設(shè)備兼容特性(Geolocation)
  • 連接特性(實(shí)時(shí)特性纠永、webSockets)
  • 網(wǎng)頁(yè)多媒體特性(Audio Video Canvas SVG)
  • 性能與集成特性(XMLHttpRequest2 等技術(shù))
  • CSS特性
新增標(biāo)簽

header nav footer article section aside dialog audio video

低版本的IE支持HTML5標(biāo)簽

方法一:``
上面這段代碼僅會(huì)在IE瀏覽器中運(yùn)行鬓长,還有一點(diǎn)需要注意,在頁(yè)面中調(diào)用html5.js文件必須添加在頁(yè)面的head元素內(nèi)尝江,因?yàn)镮E瀏覽器必須在元素解析前知道這個(gè)元素涉波,所以這個(gè)js文件不能在頁(yè)面底部調(diào)用。
方法二: 在html加入(推薦)
除了在網(wǎng)頁(yè)中調(diào)用包含以上代碼的js文件來(lái)讓IE瀏覽器支持HTML5元素以外,你也可以以下面這種方式把代碼直接添加到網(wǎng)頁(yè)中啤覆。

<!--[if lt IE 9]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()
</script>
<![endif]-->

題目2: input 有哪些新增類型苍日?

  <form action="#">
    <input type="email"> //輸入email必須有@符號(hào)
    <input type="number">//只能輸入數(shù)字
    <input type="url">//必須有協(xié)議
    <input type="range">//范圍
    <input type="date">//日期,包括年窗声、月相恃、日
    <input type="month">//包括月、日
    <input type="week">//哪一年嫌佑,第幾周
    <input type="time">//包括時(shí)豆茫、分、秒
    <input type="datetime">//基于 UTC 時(shí)區(qū)的日期時(shí)間輸入控件(時(shí)屋摇,分揩魂,秒及幾分之一秒)。
  </form>

題目3: 瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別炮温? localStorage 如何存儲(chǔ)刪除數(shù)據(jù)火脉。

localStorage帶來(lái)的好處:較少網(wǎng)絡(luò)流量。一旦數(shù)據(jù)保存在本地后柒啤,就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)倦挂,因此減少不必要的數(shù)據(jù)請(qǐng)求,減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞担巩》皆快速顯示數(shù)據(jù):性能好,從本地讀數(shù)據(jù)比通過(guò)網(wǎng)絡(luò)從服務(wù)器獲取數(shù)據(jù)快得多涛癌,本地?cái)?shù)據(jù)可以及時(shí)獲得犯戏。再加上網(wǎng)頁(yè)本身也可以有緩存,因此整個(gè)頁(yè)面和數(shù)據(jù)都在本地的話拳话,可以立即顯示先匪。臨時(shí)存儲(chǔ):很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁(yè)面期間使用,關(guān)閉窗口數(shù)據(jù)就可以丟失了弃衍,這種情況使用sessionStorage非常方便呀非。

  • 共同點(diǎn):都是保存在瀏覽器端,且同源的镜盯。
  • 區(qū)別:

cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)岸裙,即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。cookie數(shù)據(jù)還有路徑(path)的概念速缆,可以限制cookie只屬于某個(gè)路徑下降允。存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過(guò)4k激涤,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù),如會(huì)話標(biāo)識(shí)倦踢。cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效送滞,即使窗口或?yàn)g覽器關(guān)閉。cookie也是在所有同源窗口中都是共享的辱挥。

sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器犁嗅,僅在本地保存。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制晤碘,但比cookie大得多褂微,可以達(dá)到5M或更大。數(shù)據(jù)有效期不同园爷,sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉前有效宠蚂,自然也就不可能持久保持;localStorage:始終有效童社,窗口或?yàn)g覽器關(guān)閉也一直保存求厕,因此用作持久數(shù)據(jù);作用域不同扰楼,sessionStorage不在不同的瀏覽器窗口共享呀癣,即使是同一個(gè)頁(yè)面;localStorage在所有同源窗口中都是共享的弦赖;Web Storage支持事件通知機(jī)制项栏,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。

localStorage.setItem(key,value) // 保存數(shù)據(jù)
localStorage.getItem(key) // 獲取數(shù)據(jù)

localStorage.removeItem(key) //刪除數(shù)據(jù)
localStorage.clear() // 刪除所有的數(shù)據(jù)
localStorage.key[index] // 得到某個(gè)索引的key

題目四:寫出CSS3效果的簡(jiǎn)單示例

點(diǎn)擊預(yù)覽
點(diǎn)擊預(yù)覽
loading效果1
loading效果2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蹬竖,一起剝皮案震驚了整個(gè)濱河市沼沈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌案腺,老刑警劉巖庆冕,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異劈榨,居然都是意外死亡访递,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門同辣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拷姿,“玉大人,你說(shuō)我怎么就攤上這事旱函∠斐玻” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵棒妨,是天一觀的道長(zhǎng)踪古。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么伏穆? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任拘泞,我火速辦了婚禮,結(jié)果婚禮上枕扫,老公的妹妹穿的比我還像新娘陪腌。我一直安慰自己,他們只是感情好烟瞧,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布诗鸭。 她就那樣靜靜地躺著,像睡著了一般参滴。 火紅的嫁衣襯著肌膚如雪强岸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天卵洗,我揣著相機(jī)與錄音请唱,去河邊找鬼。 笑死过蹂,一個(gè)胖子當(dāng)著我的面吹牛十绑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播酷勺,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼本橙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了脆诉?” 一聲冷哼從身側(cè)響起甚亭,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎击胜,沒(méi)想到半個(gè)月后亏狰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡偶摔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年暇唾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辰斋。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡策州,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宫仗,到底是詐尸還是另有隱情够挂,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布藕夫,位于F島的核電站孽糖,受9級(jí)特大地震影響枯冈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜办悟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一霜幼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧誉尖,春花似錦、人聲如沸铸题。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)丢间。三九已至探熔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間烘挫,已是汗流浹背诀艰。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留饮六,地道東北人其垄。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像卤橄,于是被迫代替她去往敵國(guó)和親绿满。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

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

  • 題目1: HTML5是什么窟扑?有哪些新特性喇颁?有哪些新增標(biāo)簽?如何讓低版本的 IE 支持 HTML5新標(biāo)簽 HTML5...
    S級(jí)食材咩咩羊閱讀 188評(píng)論 0 0
  • 1. HTML5是什么嚎货?有哪些新特性橘霎?有哪些新增標(biāo)簽?如何讓低版本的 IE 支持 HTML5新標(biāo)簽 HTML5是超...
    _李祺閱讀 425評(píng)論 0 0
  • 1. 不管是招聘還是聊天經(jīng)常能聽到 h5開發(fā)殖属,它指的是什么姐叁?和 HTML5有什么關(guān)系? h5指的是一系列技術(shù)做的移...
    進(jìn)擊的前端_風(fēng)笑影閱讀 309評(píng)論 0 0
  • 早上十點(diǎn),黎曉君出現(xiàn)在了思南公館附近的星巴克店忱辅。常規(guī)的點(diǎn)了一杯熱摩卡七蜘,提著電腦,緩慢的走到一個(gè)位置突然停了下來(lái)墙懂。只...
    哞哞是頭牛閱讀 539評(píng)論 0 2
  • 二刀流去波士頓談聯(lián)盟時(shí)橡卤,在金色池塘公會(huì)的大廳里,新聞發(fā)布會(huì)也開始舉行损搬,首先是Sophia致辭: “歡迎各位媒體的朋...
    闡釋逐暗閱讀 231評(píng)論 0 0