HTML 5 預(yù)覽
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 18:57:05 作者：佚名 
我要評論
我要評論原文：http://www.alistapart.com/articles/previewofhtml5
作者：Lachlan Hunt
譯者：zhaozy in 3user.com
概要
網(wǎng)絡(luò)是不斷的進(jìn)化的. 新的和有創(chuàng)意的網(wǎng)站每天都在出現(xiàn), 從各方面都在沖擊著HTML的邊界. HTML 4來到我們身邊已經(jīng)差不多有10年了, 發(fā)行者們不斷的尋求提供
原文：http://www.alistapart.com/articles/previewofhtml5
作者：Lachlan Hunt
譯者：zhaozy in 3user.com
概要
網(wǎng)絡(luò)是不斷的進(jìn)化的. 新的和有創(chuàng)意的網(wǎng)站每天都在出現(xiàn), 從各方面都在沖擊著HTML的邊界. HTML 4來到我們身邊已經(jīng)差不多有10年了, 發(fā)行者們不斷的尋求提供更強(qiáng)大的功能的新技術(shù), 但是常會(huì)因?yàn)闃?biāo)記語言和瀏覽器的約束而路途坎坷.
為了給作者們提供更靈活, 更具互操作性, 能有更多交互性并令人振奮的網(wǎng)站和應(yīng)用程序, HTML 5 引入并加強(qiáng)了一系列功能, 包括表單控制, 應(yīng)用程序接口(APIs), 多媒體, 結(jié)構(gòu)化和語義化.
HTML 5的工作, 開始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下現(xiàn)在正在全面貫徹落實(shí). 很多關(guān)鍵角色參與了W3C的努力, 最具代表性的是4大瀏覽器廠商: Apple, Mozilla, Opera, Microsoft; 還有一系列的有著不同利益和專業(yè)技術(shù)的其他機(jī)構(gòu)以及個(gè)人.
編寫詳細(xì)規(guī)范的工作還在進(jìn)行中, 離完成還有很長的路要走. 同樣的, 在這篇文章中討論的功能不排除在未來有所改動(dòng)的可能. 這篇文章只是以大綱的形式介紹一些在當(dāng)前的草案中的主要的特性.
結(jié)構(gòu)
HTML 5 引入了一整套全新的元素來讓構(gòu)建頁面變得更加簡單. 大多數(shù)基于HTML 4的頁面的包含多種常用結(jié)構(gòu), 比如說頁首(header), 頁腳(footer)和縱列(column). 現(xiàn)階段我們通常會(huì)用div元素標(biāo)記這些區(qū)塊, 然后為它們定義一個(gè)描述性的id或是class.
圖表說明一個(gè)典型的用div元素帶上id和class屬性標(biāo)記的2欄布局. 其中包括頁首(header)和頁腳(footer), 在頁首下面是一個(gè)水平導(dǎo)航條, 主體內(nèi)容又包含了文章(article)和它右邊的側(cè)邊欄(sidebar).
大量的使用div元素是因?yàn)槟壳暗?u>HTML 4版本缺少更明確的語義描述這些區(qū)塊所致. HTML 5 為了表現(xiàn)這些不同的區(qū)塊而引入了新的元素.
那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
用這些新元素會(huì)有一些優(yōu)勢(相對于HTML 4). 當(dāng)和標(biāo)題元素(h1 - h6)一同使用時(shí), 可以標(biāo)記出嵌套的章節(jié)標(biāo)題層次, 超越之前版本的HTML僅有的六個(gè)層次. 規(guī)范中包含了一份生成大綱的詳細(xì)算法. 把結(jié)構(gòu)化這些內(nèi)容納入考慮范圍, 并仍舊向后兼容先前的版本. 這樣可以在編輯工具以及瀏覽器中生成目錄來幫助用戶來瀏覽這個(gè)文檔.
舉例說明, 下面的標(biāo)記結(jié)構(gòu)使用了嵌套的章節(jié)和h1元素構(gòu)成:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
這里要注意, 為了更好的兼容現(xiàn)在的瀏覽器, 它也能在適當(dāng)?shù)奈恢美闷渌臉?biāo)題元素(h2 - h6)來代替h1元素.
通過辨別頁面中的章節(jié)使用特殊章節(jié)元素的確切目的, 輔助的技術(shù)能幫助用戶更容易的瀏覽這個(gè)頁面. 舉例, 他們能不費(fèi)力的略過導(dǎo)航區(qū)塊或者能快速的從一篇文章直接跳到下一篇而不需要作者提供跳轉(zhuǎn)鏈接. 對于創(chuàng)作者來說, 在文檔中去掉多余的div, 而用一些更明顯的元素代替它們, 會(huì)讓源代碼更清楚而且更容易書寫.
#p#
header元素表示一個(gè)區(qū)塊的頭部, "頭部" 可能包含不只是區(qū)塊的標(biāo)題, 比如頭部包含了副標(biāo)題, 歷史版本信息或是署名都是合理的.
<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>
footer元素表示用上它的那個(gè)區(qū)塊的腳部, 一個(gè)具代表性的 "腳部" 包括了這個(gè)區(qū)塊的一些信息, 比如誰寫了它, 鏈接到相關(guān)的文檔, 版權(quán)信息等等.
<footer>© 2007 Example Inc.</footer>
nav元素表示一個(gè)導(dǎo)航鏈接的區(qū)塊. 它同時(shí)適用于站點(diǎn)導(dǎo)航和目錄.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
aside元素為了存放和主要內(nèi)容沒有太大關(guān)系的內(nèi)容, 是典型的標(biāo)記提要內(nèi)容方法.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
section元素表示了一份文檔或是一個(gè)應(yīng)用程序一般意義上的區(qū)塊, 比方說章節(jié).
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...</p>
</section>
(引用自<A Tale of Two Cites>)
article元素表示一份文檔, 站點(diǎn)的頁面中獨(dú)立的區(qū)塊. 它適用于類似新聞, blog文章, 論壇帖子或者個(gè)人注釋這樣的內(nèi)容.
<article id="comment-2">
<header>
<h4>
<a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="Jack'>http://example.com/">Jack O'Niell</a>
</h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
</header>
<p>That's another great article!</p>
</article>
#p#
視頻和音頻
在最近幾年, 網(wǎng)絡(luò)上的視頻和音頻日益增多, 像是youtube, Viddler, Revver, MySpace, 還有其他很多可以讓任何一個(gè)人更容易的發(fā)布視頻和音頻的網(wǎng)站. 然而, 因?yàn)楫?dāng)前的HTML缺少必要的方法順利的插入并控制多媒體, 很多網(wǎng)站都依賴Flash來提供這樣的功能. 盡管可能可以用各種各樣的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒體, 但是Flash是當(dāng)前唯一被廣泛應(yīng)用的, 提供了開發(fā)者們所渴望的跨瀏覽器兼容解決方案的插件.
對于各種基于Flash的媒體播放器, 創(chuàng)作者們對提供他們自己的用戶定制設(shè)計(jì)的界面, 那一般都允許用戶控制播放, 暫停, 停止, 查找或調(diào)整音量. 為瀏覽器提供插入視頻和音頻并提供DOM接口讓Script控制播放的功能要通過安裝本地程序支持.
視頻和音頻的新元素讓這個(gè)工作變得更加簡單. 這兩者之間的大部分API都是共享的, 唯一區(qū)別就關(guān)系到可視和不可視媒體之間的固有區(qū)別.
Opera和Webkit已經(jīng)放出了一個(gè)部分支持視頻元素的版本, 你可以到 experimental build of Opera ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/) 或者最新的 nightly build of WebKit ( http://nightly.webkit.org/) 去下載并試驗(yàn)一下這些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒體格式, 包括第三方的解碼器.
插入視頻最簡單的方法是使用video元素, 它會(huì)允許瀏覽器提供一個(gè)默認(rèn)的用戶界面, 其中controls屬性是一個(gè)boolean值屬性, 這個(gè)屬性是讓創(chuàng)作者決定用戶界面是否要顯示(默認(rèn)是不顯示).
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
可選擇的poster屬性可以指定在視頻播放前用來顯示的圖像. 盡管有一些視頻格式有它們特有的預(yù)覽圖格式, 就像是MPEG-4, 它提供了一個(gè)可以不依賴于視頻格式的可選擇方案.
用audio元素在頁面內(nèi)插入音頻文件也非常容易. audio和video元素的大部分屬性都是共用的, 但非常顯而易見的, audio元素沒有width, height以及poster屬性.
<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
HMTL 5 提供了source 元素, 讓瀏覽器根據(jù)媒體類型或編碼器的支持來指定視頻或音頻文件. media屬性會(huì)根據(jù)設(shè)備的局限性和被指定的媒體的類型和編碼器來指定一個(gè)媒體選擇查詢. 當(dāng)在使用 source 元素時(shí), 上級元素( video或audio )的src屬性需要省略掉, 不然 source 元素中的src屬性會(huì)被忽略掉.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
為了那些需要給用戶界面更多一點(diǎn)控制來符合頁面的總設(shè)計(jì)的創(chuàng)作者以方便, 廣泛的API提供了一些方法和事件讓scripts來控制媒體文件. 最簡單的方法就是用 play(), pause(), 然后可以通過設(shè)置 currentTime 來進(jìn)行循環(huán). 接下去的例子會(huì)解釋怎么用.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>
還有很多這里沒有討論到的屬性以及API可以被用到視頻音頻元素. 如果想知道更多, 你可以參考 current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).
#p#
文檔繼承性
不像先前版本的 HTML 和 XHTML根據(jù)它們的語法來定義, HTML 5 是根據(jù)文檔對象模型(DOM)來定義的 - 瀏覽器中用來描述文檔的的繼承型樹結(jié)構(gòu). 例如, 構(gòu)成一個(gè)由 名稱(title), 標(biāo)題(heading) 和段落(paragraph) 的文檔, 那么, 這個(gè)DOM 樹可能看起來是這樣的:
這個(gè)DOM樹包括: head中的title元素, body中的h1和p元素.
根據(jù)DOM定義的HTML 5的優(yōu)點(diǎn)是這種語言可以不依賴于它自己的語法. 有兩個(gè)主要的語法用來表現(xiàn)HTML文檔: HTML的序列和XML的序列 .
HTML 序列從HTML稍早版本的SGML語法中得到靈感而引入的一種語法, 但是卻定義成更適合瀏覽器在真實(shí)環(huán)境下處理HTML的方式.
<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>
你會(huì)注意到, 這看起來很像是前個(gè)版本的HTML, 有些標(biāo)簽會(huì)自動(dòng)閉合.
XML 序列引入了XML 1.0的語法和命名空間, 就像是 XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>
除了間隔和xmls屬性, 這兩個(gè)例子幾乎是相同的.
瀏覽器通過使用MIME類型來區(qū)別兩者, 任何text/html形式的文檔必須符合 HTML 序列, 任何MIME類型是XML的文檔,像是 application/xhtml xml 必須符合XML 序列.
創(chuàng)作者可能要根據(jù)需要哪些功能來決定使用哪種序列. 沒有使用它們的強(qiáng)制性的條件, 他們在不同情形下都可能是最優(yōu)方案.
用HTML的好處 向后兼容現(xiàn)有的瀏覽器 創(chuàng)作者已經(jīng)非常熟悉語法 寬容和仁慈的語法, 將不會(huì)因?yàn)闊o意中的一個(gè)錯(cuò)誤而對任何對用戶有不友好的 "Yellow Screen of Death". 語法相當(dāng)容易記憶, 舉例說: 創(chuàng)作者可以省略掉一些標(biāo)簽或是屬性值.
用XHTML的好處 嚴(yán)格的XML語法鼓勵(lì)創(chuàng)作者書寫完整的標(biāo)簽, 有些用戶會(huì)發(fā)現(xiàn)這樣更容易維護(hù). 能直接的和其它XML詞表結(jié)合, 比如 SVG 和 MathML. 允許使用XML的處理過程, 有些創(chuàng)作者把這個(gè)過程作為他們編輯和發(fā)布過程的一部分.
如何貢獻(xiàn)
HTML 5的工作進(jìn)展很快, 但是由于要出示測試用例并實(shí)現(xiàn)互操作性, 它預(yù)期還會(huì)持續(xù)數(shù)年. 目前要完成的工作可能要10到15年的時(shí)間. 在這個(gè)過程中, 從各式各樣的人都會(huì)有反饋, 在他們中間, web設(shè)計(jì)師和開發(fā)者, CMS和編輯工具的廠商和瀏覽器的廠商是確保成功的關(guān)鍵. 任何人都不只是歡迎, 更積極的是鼓勵(lì)為HTML 5提供反饋.
除了規(guī)范之外, 還有更多相關(guān)的努力來幫助人們更好地理解這個(gè)工作.
The Differences from HTML 4 (http://www.w3.org/html/wg/html5/diff/) 描述了和前一版本的HTML的不同.
The HTML Design Principles (http://www.w3.org/TR/html-design-principles/) 討論一些原理來幫助作出決定, 這也會(huì)幫助你了解在眾多的設(shè)計(jì)結(jié)果背后的原理.
The Web Developer’s Guide to HTML 5 (http://dev.w3.org/html5/html-author/) 這是最近才開始做的, 這是為了幫助web設(shè)計(jì)師和開發(fā)者理解要書寫符合規(guī)范的HTML 5的文檔所需要知道的一切, 并且提供了指南, 也提供了描述得相當(dāng)完整的試驗(yàn).
你可以在很多的方面做出貢獻(xiàn). 你可以加入 W3C’s HTML WG , 訂閱和貢獻(xiàn) HTML WG郵件列表, 或者完善它(wiki). 你也可以訂閱或貢獻(xiàn)其他的 WHATWG郵件列表, 在WHATWG 論壇發(fā)表文章, 在WHATWG 博客上留言或?qū)懳恼?
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動(dòng)的方法：通過CSS的overflow屬性、使用JavaScript的滾動(dòng)事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點(diǎn)，感興2025-02-24
使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗(yàn)的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨(dú)特的效果，例如文字鏤空效果,本文將帶你一步一步實(shí)現(xiàn)一個(gè)簡單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計(jì)需求,如需去除這些默認(rèn)樣式,可以通過CSS來實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25HTML文本域如何設(shè)置為禁止用戶手動(dòng)拖動(dòng)
在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動(dòng)拖動(dòng)文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保2024-09-25
如何通過HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實(shí)現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過動(dòng)畫增強(qiáng)視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19HTML中Canvas關(guān)鍵知識點(diǎn)總結(jié)
Canvas 提供了一套強(qiáng)大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動(dòng)畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用，這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點(diǎn)總結(jié)2024-06-03
html table+css實(shí)現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實(shí)現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2024-03-06
HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果
本文主要介紹了HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2024-02-22
HTML+CSS實(shí)現(xiàn)炫酷登錄切換的項(xiàng)目實(shí)踐
在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實(shí)現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2024-02-02
