HTML 5 預(yù)覽
互聯(lián)網(wǎng) 發(fā)布時間：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ā)行者們不斷的尋求提供更強大的功能的新技術(shù), 但是常會因為標(biāo)記語言和瀏覽器的約束而路途坎坷.
為了給作者們提供更靈活, 更具互操作性, 能有更多交互性并令人振奮的網(wǎng)站和應(yīng)用程序, HTML 5 引入并加強了一系列功能, 包括表單控制, 應(yīng)用程序接口(APIs), 多媒體, 結(jié)構(gòu)化和語義化.
HTML 5的工作, 開始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下現(xiàn)在正在全面貫徹落實. 很多關(guān)鍵角色參與了W3C的努力, 最具代表性的是4大瀏覽器廠商: Apple, Mozilla, Opera, Microsoft; 還有一系列的有著不同利益和專業(yè)技術(shù)的其他機構(gòu)以及個人.
編寫詳細(xì)規(guī)范的工作還在進(jìn)行中, 離完成還有很長的路要走. 同樣的, 在這篇文章中討論的功能不排除在未來有所改動的可能. 這篇文章只是以大綱的形式介紹一些在當(dāng)前的草案中的主要的特性.
結(jié)構(gòu)
HTML 5 引入了一整套全新的元素來讓構(gòu)建頁面變得更加簡單. 大多數(shù)基于HTML 4的頁面的包含多種常用結(jié)構(gòu), 比如說頁首(header), 頁腳(footer)和縱列(column). 現(xiàn)階段我們通常會用div元素標(biāo)記這些區(qū)塊, 然后為它們定義一個描述性的id或是class.
圖表說明一個典型的用div元素帶上id和class屬性標(biāo)記的2欄布局. 其中包括頁首(header)和頁腳(footer), 在頁首下面是一個水平導(dǎo)航條, 主體內(nèi)容又包含了文章(article)和它右邊的側(cè)邊欄(sidebar).
大量的使用div元素是因為目前的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>
用這些新元素會有一些優(yōu)勢(相對于HTML 4). 當(dāng)和標(biāo)題元素(h1 - h6)一同使用時, 可以標(biāo)記出嵌套的章節(jié)標(biāo)題層次, 超越之前版本的HTML僅有的六個層次. 規(guī)范中包含了一份生成大綱的詳細(xì)算法. 把結(jié)構(gòu)化這些內(nèi)容納入考慮范圍, 并仍舊向后兼容先前的版本. 這樣可以在編輯工具以及瀏覽器中生成目錄來幫助用戶來瀏覽這個文檔.
舉例說明, 下面的標(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ù)能幫助用戶更容易的瀏覽這個頁面. 舉例, 他們能不費力的略過導(dǎo)航區(qū)塊或者能快速的從一篇文章直接跳到下一篇而不需要作者提供跳轉(zhuǎn)鏈接. 對于創(chuàng)作者來說, 在文檔中去掉多余的div, 而用一些更明顯的元素代替它們, 會讓源代碼更清楚而且更容易書寫.
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法：通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點，感興2025-02-24
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨特的效果，例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認(rèn)樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保2024-09-25
如何通過HTML/CSS 實現(xiàn)各類進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19- Canvas 提供了一套強大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用，這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點總結(jié)2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2024-03-06
本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2024-02-22
在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需2024-02-02
