HTML5_CSS3

HTML5是什么?有哪些新特性玫鸟?有哪些新增標(biāo)簽妥曲?如何讓低版本的 IE 支持 HTML5新標(biāo)簽

HTML5是最新的HTML標(biāo)準(zhǔn),2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成葵萎。
新特性:

  • 語義特性
    HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)磕昼。更加豐富的標(biāo)簽將隨著對(duì)RDFa的浸间,微數(shù)據(jù)與微格式等方面的支持魁蒜,構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

  • 本地存儲(chǔ)特性
    基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間梅惯,更快的聯(lián)網(wǎng)速度宪拥,這些全得益于HTML5 APP Cache,以及本地存儲(chǔ)功能铣减。Indexed DB(html5本地存儲(chǔ)最重要的技術(shù)之一)和API說明文檔她君。

  • 設(shè)備兼容特性
    從Geolocation功能的API文檔公開以來,HTML5為網(wǎng)頁(yè)應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇葫哗,帶來了更多體驗(yàn)功能的優(yōu)勢(shì)缔刹。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連劣针,例如視頻影音可直接與microphones及攝像頭相聯(lián)校镐。

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

  • 網(wǎng)頁(yè)多媒體特性
    支持網(wǎng)頁(yè)端的Audio擎浴、Video等多媒體功能员咽, 與網(wǎng)站自帶的APPS,攝像頭贮预,影音功能相得益彰贝室。
    三維、圖形及特效特性(Class: 3D, Graphics & Effects)
    基于SVG仿吞、Canvas滑频、WebGL及CSS3的3D功能,用戶會(huì)驚嘆于在瀏覽器中茫藏,所呈現(xiàn)的驚人視覺效果误趴。

  • 性能與集成特性
    沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過XMLHttpRequest2等技術(shù),解決以前的跨域等問題务傲,幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作凉当。

  • CSS3特性
    在不犧牲性能和語義結(jié)構(gòu)的前提下,CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果售葡。此外看杭,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性挟伙。

新增的標(biāo)簽:

  • <article></article>
    標(biāo)簽定義外部的內(nèi)容楼雹。比如來自一個(gè)外部的新聞提供者的一篇新的文章,或者來自 blog 的文本,或者是來自論壇的文本贮缅。亦或是來自其他外部源內(nèi)容榨咐。
  • <aside></aside>
    標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)
  • <audio></audio>
    標(biāo)簽定義聲音谴供,比如音樂或其他音頻流
  • <canvas></canvas>
    標(biāo)簽定義圖形块茁,比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的桂肌。它自己沒有行為数焊,但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
  • <command>
    標(biāo)簽定義命令按鈕崎场,比如單選按鈕佩耳、復(fù)選框或按鈕。
  • <datalist> </datalist>
    標(biāo)簽定義可選數(shù)據(jù)的列表谭跨。與 input 元素配合使用干厚,就可以制作出輸入值的下拉列表。
  • <details></details>
    標(biāo)簽定義元素的細(xì)節(jié)饺蚊,用戶可進(jìn)行查看萍诱,或通過點(diǎn)擊進(jìn)行隱藏。與 <legend> 一起使用污呼,來制作 detail 的標(biāo)題。該標(biāo)題對(duì)用戶是可見的包竹,當(dāng)在其上點(diǎn)擊時(shí)可打開或關(guān)閉 detail燕酷。
若水GIF截圖_2017年8月27日10點(diǎn)13分29秒.gif
  • <figcaption></figcaption>
    <figcaption> 是與其相關(guān)聯(lián)的圖片的說明/標(biāo)題,用?于描述其父節(jié)點(diǎn) 元素里的其他數(shù)據(jù), figcaption 元素應(yīng)該被置于 figure元素的第一個(gè)或最后一個(gè)子元素的位置周瞎。苗缩。同時(shí) figcaption 元素是可選的;如果沒有該元素声诸,這個(gè)父節(jié)點(diǎn)的圖片只是會(huì)沒有說明/標(biāo)題酱讶。
  • <figure></figure>
    標(biāo)簽用于對(duì)元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題彼乌。
  • <footer></footer>
    標(biāo)簽定義 section 或 document 的頁(yè)腳泻肯。典型地,它會(huì)包含創(chuàng)作者的姓名慰照、文檔的創(chuàng)作日期以及/或者聯(lián)系信息灶挟。
  • <header></header>
    標(biāo)簽定義 section 或 document 的頁(yè)眉。
  • <nav></nav>
    標(biāo)簽定義導(dǎo)航鏈接的部分毒租。
  • <progress></progress>
    標(biāo)簽運(yùn)行中的進(jìn)程稚铣。可以使用 <progress> 標(biāo)簽來顯示 JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。

讓低版本的 IE 支持 HTML5新標(biāo)簽:
HTML5 Shiv是JavaScript的一種備選方案惕医,該方案在IE9版本中優(yōu)先啟用HTML5元素樣式耕漱,但不允許使用沒有由JavaScript定義過的元素樣式。html5shiv.js用于在IE9以下的瀏覽器模擬html5的標(biāo)簽抬伺。
當(dāng)使用IE9以下版本的瀏覽器時(shí)孤个,加載html5shiv.js文件,其它的不加載沛简。

<!--[if lt IE 9 ]><script src="js/html5shiv.js"></script><![endif]-->

input 有哪些新增類型齐鲤?

  • email
    類型用于驗(yàn)證email的格式,當(dāng)提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email域的值
  • url
    類型用于驗(yàn)證 URL 地址的格式椒楣,當(dāng)提交表單時(shí)會(huì)自動(dòng)驗(yàn)證url域的值
  • number
    類型會(huì)根據(jù)你的設(shè)置提供選擇數(shù)字的功能给郊,min屬性設(shè)置最小值、max屬性設(shè)置最大值捧灰,value屬性設(shè)置當(dāng)前值淆九,step屬性設(shè)定每次增長(zhǎng)的值,某些瀏覽器還不支持
  • range
    類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域毛俏,其會(huì)以一個(gè)滑塊的形式展現(xiàn)炭庙,min屬性設(shè)置最小值、max屬性設(shè)置最大值煌寇,value屬性設(shè)置當(dāng)前值焕蹄,如果沒有設(shè)置,則其默認(rèn)值的范圍是1-100
    日期和時(shí)間類型:HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型:
  • date
    選取日阀溶、月腻脏、年
  • month
    選取月、年
  • week
    選取周和年
  • time
    選取時(shí)間(小時(shí)和分鐘)
  • datetime
    選取時(shí)間银锻、日永品、月、年(UTC 時(shí)間)
  • datetime-local
    選取時(shí)間击纬、日鼎姐、月、年(本地時(shí)間)
  • search
    類型用于搜索域更振,比如站點(diǎn)搜索或 Google 搜索炕桨,為其加上results="s"屬性,則會(huì)在搜索框前面加上一個(gè)搜索圖標(biāo)
  • tel
    類型用于驗(yàn)證輸入的是否是電話格式的內(nèi)容殃饿,此元素現(xiàn)在還沒有瀏覽器支持
  • color
    類型會(huì)提供一個(gè)顏色拾取器谋作,供用戶選擇顏色,并將用戶選擇的顏色填充到此元素中

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

cookie
cookie是指瀏覽器存儲(chǔ)的少量數(shù)據(jù)帖池,同時(shí)它是與具體的web頁(yè)面或者站點(diǎn)相關(guān)的。cookie的數(shù)據(jù)會(huì)自動(dòng)在web瀏覽器和web服務(wù)器之間傳輸?shù)目跃唬虼朔?wù)端的腳本就可以讀睡汹、寫存儲(chǔ)在客戶端的cookie的值。在javascript中寂殉,cookie用于保存狀態(tài)以及能夠?yàn)閣eb瀏覽器提供一種身份識(shí)別機(jī)制囚巴,因此它們是不安全的。

localStorage
實(shí)現(xiàn)了web存儲(chǔ)草案標(biāo)準(zhǔn)的瀏覽器在window對(duì)象上定義了兩個(gè)屬性:localStorage 和sectionStorage,這兩個(gè)屬性都代表同一個(gè)對(duì)象Storage,
都是一個(gè)持久化關(guān)聯(lián)的數(shù)組友扰,數(shù)組使用字符串來索引彤叉,存儲(chǔ)的值也都是字符串形式的。Storage對(duì)象設(shè)置它的屬性為字符串值村怪,瀏覽器會(huì)將該值存儲(chǔ)起來秽浇。localStorage保存的數(shù)據(jù)長(zhǎng)期存在,下一次訪問該網(wǎng)站的時(shí)候甚负,網(wǎng)頁(yè)可以直接讀取以前保存的數(shù)據(jù)柬焕。除了保存期限的長(zhǎng)短不同,這兩個(gè)對(duì)象的屬性和方法完全一樣梭域。

cookie 和 localStorage 的區(qū)別:
localStorage擁有setItem getItem RemoveItem clear等方法斑举,其容量有10M,用于持久化的存儲(chǔ)病涨。cookie一般由服務(wù)器生成富玷,可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie没宾,默認(rèn)是關(guān)閉瀏覽器后失效,每個(gè) Cookie 的大小一般不能超過4KB凌彬。

localStorage 存儲(chǔ)刪除數(shù)據(jù)
localStorage保存的數(shù)據(jù),以“鍵值對(duì)”的形式存在,每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值循衰。所有的數(shù)據(jù)都是以文本格式保存。存入數(shù)據(jù)使用setItem方法褐澎。它接受兩個(gè)參數(shù)会钝,第一個(gè)是鍵名,第二個(gè)是保存的數(shù)據(jù)工三。
存儲(chǔ)數(shù)據(jù):

localStorage.setItem("x",1);//以x的名字存儲(chǔ)一個(gè)變量1
或者
localStorage.x= 1;//設(shè)置x為"1"

刪除數(shù)據(jù):

localStorage.removeItem("x");//刪除x項(xiàng)
localStorage.clear();//全部刪除

寫出如下 CSS3效果的簡(jiǎn)單事例

    1. 圓角迁酸, 圓形
    2. div 陰影
    3. 2D 轉(zhuǎn)換:放大、縮小俭正、偏移奸鬓、旋轉(zhuǎn)
    4. 3D 轉(zhuǎn)換:移動(dòng)、旋轉(zhuǎn)
    5. 背景色漸變
    6. 過渡效果
    7. 動(dòng)畫

demo
代碼

實(shí)現(xiàn)如下全屏圖加過渡色的效果(具體效果隨意)

demo
代碼

寫出如下 loading 動(dòng)畫效果

demo1
代碼
demo2
代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末掸读,一起剝皮案震驚了整個(gè)濱河市串远,隨后出現(xiàn)的幾起案子宏多,更是在濱河造成了極大的恐慌,老刑警劉巖澡罚,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伸但,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡留搔,警方通過查閱死者的電腦和手機(jī)更胖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來隔显,“玉大人却妨,你說我怎么就攤上這事±撸” “怎么了彪标?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)哺窄。 經(jīng)常有香客問我捐下,道長(zhǎng),這世上最難降的妖魔是什么萌业? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任坷襟,我火速辦了婚禮,結(jié)果婚禮上生年,老公的妹妹穿的比我還像新娘婴程。我一直安慰自己,他們只是感情好抱婉,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布档叔。 她就那樣靜靜地躺著,像睡著了一般蒸绩。 火紅的嫁衣襯著肌膚如雪衙四。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天患亿,我揣著相機(jī)與錄音传蹈,去河邊找鬼。 笑死步藕,一個(gè)胖子當(dāng)著我的面吹牛惦界,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播咙冗,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼沾歪,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了雾消?” 一聲冷哼從身側(cè)響起灾搏,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤挫望,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后确镊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體士骤,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年蕾域,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拷肌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡旨巷,死狀恐怖巨缘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情采呐,我是刑警寧澤若锁,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站斧吐,受9級(jí)特大地震影響又固,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜煤率,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一仰冠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蝶糯,春花似錦洋只、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至妒茬,卻和暖如春担锤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乍钻。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工妻献, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人团赁。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像谨履,于是被迫代替她去往敵國(guó)和親欢摄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

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

  • 1. 不管是招聘還是聊天經(jīng)常能聽到 h5開發(fā)笋粟,它指的是什么怀挠?和 HTML5有什么關(guān)系? h5指的是一系列技術(shù)做的移...
    進(jìn)擊的前端_風(fēng)笑影閱讀 306評(píng)論 0 0
  • 題目1: HTML5是什么析蝴?有哪些新特性?有哪些新增標(biāo)簽绿淋?如何讓低版本的 IE 支持 HTML5新標(biāo)簽 HTML5...
    饑人谷_Leon閱讀 284評(píng)論 0 0
  • 1. HTML5是什么闷畸?有哪些新特性?有哪些新增標(biāo)簽吞滞?如何讓低版本的 IE 支持 HTML5新標(biāo)簽 HTML5是超...
    _李祺閱讀 424評(píng)論 0 0
  • 題目1: HTML5是什么佑菩?有哪些新特性?有哪些新增標(biāo)簽裁赠?如何讓低版本的 IE 支持 HTML5新標(biāo)簽 HTML5...
    GaoYangTongXue丶閱讀 690評(píng)論 0 0
  • 【一級(jí)雕塑師】申屠國(guó)洪特選清水泥,鐵質(zhì)豐富一忱,將雕塑與壺完美結(jié)合莲蜘。龍鱗清晰可見,方正之壺呈龍騰之勢(shì)帘营,威震四方票渠! 【品...
    愛上紫砂閱讀 491評(píng)論 0 0