網(wǎng)站設(shè)計人員必知的15個HTML5新特性
分享 2012.03.12 瀏覽次數(shù):7094次
網(wǎng)站設(shè)計人員想必對HTML5都很熟悉了,因為太多的媒體在討論這一技術(shù),也出現(xiàn)大量的大師級的HTML5新作品。然而,你能準(zhǔn)確地說出HTML5帶來了哪些新特性嗎?本文總結(jié)了HTML5帶來的15項你必須知道的新特性。
1.新的文檔類型 (New Doctype)
目前許多網(wǎng)頁還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型:
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中,上面那種聲明方式將失效。下面是HTML5中的聲明方式:
- >
2.腳本和鏈接無需type (No More Types for Scripts and Links)
在HTML4或XHTML中,你需要用下面的幾行代碼來給你的網(wǎng)頁添加CSS和JavaScript文件。
- <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
- <script type="text/javascript" src="path/to/script.js">script>
而在HTML5中,你不再需要指定類型屬性。因此,代碼可以簡化如下:
- <link rel="stylesheet" href="path/to/stylesheet.css" />
- <script src="path/to/script.js">script>
3.語義Header和Footer (The Semantic Header and Footer)
在HTML4或XHTML中,你需要用下面的代碼來聲明"Header"和"Footer"。
- <div id="header">
- ...
- div>
- ..........
- <div id="footer">
- ...
- div>
- ...
- <div id="footer">
- ..........
- div>
- ...
在HTML5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。
- <header>
- ...
- header>
- <footer>
- ...
- footer>
- ...
- <footer>
- header>
- ...
4.Hgroup
在HTML5中,有許多新引入的元素,hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個子標(biāo)題,我可以用
和
標(biāo)簽來分別定義。然而,這種定義沒有說明這兩者之間的關(guān)系。而且,h2標(biāo)簽的使用會帶來更多問題,比如該頁面上還有其他標(biāo)題的時候。
在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會影響文件的大綱。
- <header>
- <hgroup>
- <h1> Recall Fan Page h1>
- <h2> Only for people who want the memory of a lifetime. h2>
- hgroup>
- header>
- hgroup>
- <h2> Only for people who want the memory of a lifetime. h2>
- <h1> Recall Fan Page h1>
- <hgroup>
5.標(biāo)記元素 (Mark Element)
你可以把它當(dāng)做高亮標(biāo)簽。被這個標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動相關(guān)。比如說,當(dāng)我在某博客中搜索“Open your Mind”時,我可以利用一些JavaScript將出現(xiàn)的詞組用修飾一下。
- <h3> Search Results h3>
- <p> They were interrupted, just after Quato said, <mark>"Open your Mind"mark>. p>
6.圖形元素 (Figure Element)
在HTML4或XHTML中,下面的這些代碼被用來修飾圖片的注釋。
- <img src="path/to/image" alt="About image" />
- <p>Image of Mars. p>
然而,上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來。因此,HTML5引入了元素。當(dāng)和結(jié)合起來后,我們可以語義化地將注釋和相應(yīng)的圖片聯(lián)系起來。
- <figure>
- <img src="path/to/image" alt="About image" />
- <figcaption>
- <p>This is an image of something interesting. p>
- figcaption>
- figure>
- figcaption>
- <p>This is an image of something interesting. p>
- <figcaption>
- <img src="path/to/image" alt="About image" />
7.重新定義 (Small Element redefined)
在HTML4或XHTML中,元素已經(jīng)存在。然而,卻沒有如何正確使用這一元素的完整說明。在HTML5中,被用來定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài),根據(jù)對此元素新的HTML5定義,<small>可以正確地詮釋這些信息。
8.占位符 (Placeholder)
在HTML4或XHTML中,你需要用JavaScript來給文本框添加占位符。比如,你可以提前設(shè)置好一些信息,當(dāng)用戶開始輸入時,文本框中的文字就消失。
而在HTML5中,新的“placeholder”就簡化了這個問題。
9.必要屬性 (Required Attribute)
HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。
- <input type="text" name="someInput" required>
- <input type="text" name="someInput" required="required">
當(dāng)文本框被指定必需時,如果空白的話表格就不能提交。下面是一個如何使用的例子。
- <form method="post" action="">
- <label for="someInput"> Your Name: label>
- <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
- <button type="submit">Gobutton>
- form>
- <button type="submit">Gobutton>
- <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
- <label for="someInput"> Your Name: label>
在上面那個例子中,如果輸入內(nèi)容空且表格被提交,輸入框?qū)⒈桓吡溜@示。
10.Autofocus 屬性 (Autofocus Attribute)
同樣,HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應(yīng)該是“選擇”或聚焦,默認(rèn)情況下,我們現(xiàn)在可以利用自動聚焦屬性。
- <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
11.Audio 支持 (Audio Support)
目前我們需要依靠第三方插件來渲染音頻。然而在HTML5中,元素被引進(jìn)來了。
- <audio autoplay="autoplay" controls="controls">
- <source src="file.ogg" />
- <source src="file.mp3" />
- <a href="file.mp3">Download this file.a>
- audio>
- <a href="file.mp3">Download this file.a>
- <source src="file.mp3" />
- <source src="file.ogg" />
當(dā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是堅持開源Theora 和Vorbis格式。因此,指定HTML5的視頻時,你必須提供這兩種格式。
- <video controls preload>
- <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
- <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
- <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.a> p>
- video>
- <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.a> p>
- <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
- <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
13.視頻預(yù)載 (Preload attribute in Videos element)
當(dāng)用戶訪問頁面時這一屬性使得視頻得以預(yù)載。為了實現(xiàn)這個功能,可以在元素中加上preload="preload"或者只是preload。
- <video preload>
14.顯示控制條 (Display Controls)
如果你使用過上面的每一個提到的技術(shù)點,你可能已經(jīng)注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。為了渲染出播放控制條,我們必須在video元素內(nèi)指定controls屬性。
- <video preload controls>
15.正規(guī)表達(dá)式 (Regular Expressions)
在HTML4或XHTML中,你需要用一些正規(guī)表達(dá)式來驗證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個正規(guī)表達(dá)式。
- <form action="" method="post">
- <label for="username">Create a Username: label>
- <input type="text"
- name="username"
- id="username"
- placeholder="4 <> 10"
- pattern="[A-Za-z]{4,10}"
- autofocus
- required>
- <button type="submit">Go button>
- form>
- <button type="submit">Go button>
- required>
- autofocus
- pattern="[A-Za-z]{4,10}"
- placeholder="4 <> 10"
- id="username"
- name="username"
- <input type="text"
- <label for="username">Create a Username: label>
結(jié)論
事實上,還有很多新元素和特性,上面提到的只是HTML5中一些我認(rèn)為網(wǎng)站開發(fā)中常用的,剩下的就由你們自己去摸索HTML5啦。
歡迎轉(zhuǎn)載,本文版權(quán)歸于杭州網(wǎng)站建設(shè)(http://www.sharetheflairshow.com)相關(guān)閱讀:HTML 5 & CSS 3 的新交互特性分享
-
杭州網(wǎng)站設(shè)計公司:品牌網(wǎng)站開發(fā)助力企業(yè)成長
日期:2024-12-20瀏覽次數(shù):355次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):447次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):462次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):702次
-
杭州網(wǎng)站設(shè)計公司:數(shù)據(jù)庫在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):673次
相關(guān)新聞
整合同類新聞,相關(guān)新聞一手掌握
-
大慶網(wǎng)站建設(shè):專業(yè)的網(wǎng)站建設(shè)是這樣的
日期:2023-02-20瀏覽次數(shù):1591次
-
數(shù)據(jù)庫對大慶網(wǎng)站建設(shè)的用處
日期:2023-02-20瀏覽次數(shù):1565次
-
大慶企業(yè),做好網(wǎng)站建設(shè)的優(yōu)化,需要的幾個策略。
日期:2023-02-20瀏覽次數(shù):1556次
-
大慶企業(yè)網(wǎng)站制作,需要的主要步驟有哪些
日期:2023-02-20瀏覽次數(shù):1609次
-
大慶網(wǎng)站的流量來源于哪里?
日期:2023-02-20瀏覽次數(shù):1608次
最新新聞
與互聯(lián)網(wǎng)同行,實時掌握網(wǎng)建行業(yè)最新動態(tài)
-
杭州網(wǎng)站設(shè)計目標(biāo)分析
日期:2018-03-09瀏覽次數(shù):5176次
-
關(guān)于網(wǎng)站建設(shè)的意義的分析
日期:2019-08-27瀏覽次數(shù):4534次
-
對話任正非:信息安全問題不能靠技術(shù)手段解決,要靠法律
日期:2019-11-08瀏覽次數(shù):5204次
-
如何開發(fā)論壇APP
日期:2020-01-20瀏覽次數(shù):1977次
-
短視頻的杭州app開發(fā)模式是怎樣的?
日期:2021-08-05瀏覽次數(shù):3882次
隨機(jī)新聞
新聞新動態(tài),您需要的新聞管家
洞悉市場趨勢演變讓傳播回歸社會
免費獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報價
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場環(huán)境、衡量與預(yù)測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢,結(jié)合品牌理念深度挖掘項目優(yōu)勢和產(chǎn)品價值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國杭州峰會、科雷機(jī)電等,帷拓科技始終堅持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅持“認(rèn)真堅持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號運營以及數(shù)字營銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個客戶量身定制項目整體服務(wù)方案,以敏銳的市場洞察力、創(chuàng)新的市場策劃能力,全面把握市場變化,為客戶實現(xiàn)從企業(yè)到消費者的價值轉(zhuǎn)換。