




已閱讀5頁(yè),還剩4頁(yè)未讀, 繼續(xù)免費(fèi)閱讀
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
/課工場(chǎng)中關(guān)村軟件學(xué)院解讀HTML5新特性HTML5想必大家都很熟悉了。然而,你能準(zhǔn)確地說出HTML5帶來了哪些新特性嗎?本文總結(jié)了HTML5帶來的15項(xiàng)你必須知道的新特性。一起來看下: 1.新的文檔類型 (New Doctype)目前許多網(wǎng)頁(yè)還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型:1. 在HTML5中,上面那種聲明方式將失效。下面是HTML5中的聲明方式:1. 2.腳本和鏈接無需type (No More Types for Scripts and Links)在HTML4或XHTML中,你需要用下面的幾行代碼來給你的網(wǎng)頁(yè)添加CSS和JavaScript文件。1. 2. 而在HTML5中,你不再需要指定類型屬性。因此,代碼可以簡(jiǎn)化如下:1. 2. 3.語(yǔ)義Header和Footer (The Semantic Header and Footer)在HTML4或XHTML中,你需要用下面的代碼來聲明Header和Footer。1. 2. 3. 4. 5. 6. 7. 在HTML5中,有兩個(gè)可以替代上述聲明的元素,這可以使代碼更簡(jiǎn)潔。1. 2. 3. 4. 5. 6. 4.Hgroup在HTML5中,有許多新引入的元素,hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個(gè)子標(biāo)題,我可以用和標(biāo)簽來分別定義。然而,這種定義沒有說明這兩者之間的關(guān)系。而且,h2標(biāo)簽的使用會(huì)帶來更多問題,比如該頁(yè)面上還有其他標(biāo)題的時(shí)候。在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會(huì)影響文件的大綱。1. 2. 3. . Recall Fan Page . 4. . Only for people who want the memory of a lifetime. . 5. 6. 5.標(biāo)記元素 (Mark Element)你可以把它當(dāng)做高亮標(biāo)簽。被這個(gè)標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動(dòng)相關(guān)。比如說,當(dāng)我在某博客中搜索“Open your Mind”時(shí),我可以利用一些JavaScript將出現(xiàn)的詞組用修飾一下。 1. Search Results . 2. They were interrupted, just after Quato said, .Open your Mind. . 6.圖形元素 (Figure Element)在HTML4或XHTML中,下面的這些代碼被用來修飾圖片的注釋。1. 2.Image of Mars. . 然而,上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此,HTML5引入了元素。當(dāng)和結(jié)合起來后,我們可以語(yǔ)義化地將注釋和相應(yīng)的圖片聯(lián)系起來。1. 2. 3. 4. .This is an image of something interesting. . 5. 6. 7.重新定義 (Small Element redefined)在HTML4或XHTML中,元素已經(jīng)存在。然而,卻沒有如何正確使用這一元素的完整說明。在HTML5中,被用來定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài),根據(jù)對(duì)此元素新的HTML5定義,可以正確地詮釋這些信息。 8.占位符 (Placeholder)在HTML4或XHTML中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設(shè)置好一些信息,當(dāng)用戶開始輸入時(shí),文本框中的文字就消失。而在HTML5中,新的“placeholder”就簡(jiǎn)化了這個(gè)問題。 9.必要屬性 (Required Attribute)HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。1. 2. 當(dāng)文本框被指定必需時(shí),如果空白的話表格就不能提交。下面是一個(gè)如何使用的例子。1. 2. Your Name: . 3. 4.Go. 5. 在上面那個(gè)例子中,如果輸入內(nèi)容空且表格被提交,輸入框?qū)⒈桓吡溜@示。 10.Autofocus 屬性 (Autofocus Attribute)同樣,HTML5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”或聚焦,默認(rèn)情況下,我們現(xiàn)在可以利用自動(dòng)聚焦屬性。 1. 11.Audio 支持 (Audio Support)目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中,元素被引進(jìn)來了。1. 2. . 3. . 4. .Download this file. 5. 當(dāng)使用元素時(shí)請(qǐng)記得包含兩種音頻格式。FireFox想要.ogg格式的文件,而Webkit瀏覽器則需要.mp3格式的。和往常一樣,IE是不支持的,且Opera 10及以下版本只支持.wav格式。 12.Video 支持 (Video Support)HTML5中不僅有元素,而且還有。然而,和類似,HTML5中并沒有指定視頻解碼器,它留給了瀏覽器來決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻,F(xiàn)irefox和Opera是堅(jiān)持開源Theora 和Vorbis格式。因此,指定HTML5的視頻時(shí),你必須提供這兩種格式。 1. 2. 3. 4. Your browser is old. .Download this video instead. . 5. 13.視頻預(yù)載 (Preload attribute in Videos element)當(dāng)用戶訪問頁(yè)面時(shí)這一屬性使得視頻得以預(yù)載。為了實(shí)現(xiàn)這個(gè)功能,可以在元素中加上preload=preload或者只是preload。1. 14.顯示控制條 (Display Controls)如果你使用過上面的每一個(gè)提到的技術(shù)點(diǎn),你可能已經(jīng)注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。為了渲染出播放控制條,我們必須在video元素內(nèi)指定controls屬性。 1. 15.正規(guī)表達(dá)式 (Regular Expressions)在HTML4或XHTML中,你需要用一些正規(guī)表達(dá)式來驗(yàn)證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個(gè)正規(guī)表達(dá)式。1. 2.Create a Username: . 3. .input type=text 4. name=username 5. id=user
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 《高一生物基因工程與現(xiàn)代生物技術(shù)教案》
- 醫(yī)院護(hù)理微課件視頻
- 《萬(wàn)有引力定律的應(yīng)用:高中物理進(jìn)階教學(xué)教案》
- 風(fēng)電場(chǎng)建設(shè)汛期安全防范措施
- 描述春日校園美景寫景類作文(12篇)
- 青少年心理健康教育心態(tài)總結(jié)范文
- 環(huán)保主題:我們只有一個(gè)地球議論文5篇
- IT行業(yè)年收入及獎(jiǎng)金證明(8篇)
- 三年級(jí)科學(xué)課堂互動(dòng)活動(dòng)安排
- 初中語(yǔ)文項(xiàng)目化學(xué)習(xí)教學(xué)范文
- 全息照相與信息光學(xué)實(shí)驗(yàn)報(bào)告
- 2022年02月上海鐵路局下屬鐵路疾病預(yù)防控制所公開招聘畢業(yè)生筆試參考題庫(kù)含答案解析
- 激光設(shè)備買賣合同模板(2篇)
- GB/T 24815-2009起重用短環(huán)鏈吊鏈等用6級(jí)普通精度鏈
- 線描畫基本功教學(xué)課件
- 船上投訴程序(中英文)
- DB37-T 3781-2019 政務(wù)服務(wù)中心能源消耗定額標(biāo)準(zhǔn)-(高清版)
- 重癥胰腺炎(1)課件
- 科學(xué)素養(yǎng)全稿ppt課件(完整版)
- 克拉潑改進(jìn)型電容三點(diǎn)式振蕩器
- 介入導(dǎo)管室耗材準(zhǔn)備及管理
評(píng)論
0/150
提交評(píng)論