天天看點

HTML5:實至名歸還是言過其實?

庶幾何時,HTML5 開始吸引越來越多的人的目光,盡管 W3C 表示,它的最終成熟還有很長的路,然而并不能阻止人們對它的期待。2007年,HTML5 向 W3C 标準進軍,HTML5 的使命是實作富 Web 應用的本地化,脫離浏覽器插件的羁絆。W3C 于 2008 年 1 月 推出 HTML5 的第一份草案,而 HTML5 标準的全部實作也許要到 2022年以後。

HTML5 是繼 HTML4.01, XHTML 1.0 和 DOM 2 HTML 後的又一個重要版本,旨在消除富 Internet 程式(RIA)對 Flash, Silverlight, JavaFX 一類浏覽器插件的依賴。

HTML5:實至名歸還是言過其實?

HTML5 帶來很多新功能,以及 HTML 代碼上的改變,你需要使用一些特定的 API 腳本,如:

DOM

實作 2D 繪圖的 Canvas 對象

可控媒體播放

離線存儲

文檔編輯

拖放

跨文檔消息

浏覽器曆史管理

MIME 類型和協定注冊

那些支援 HTML5 的浏覽器在處理 HTML 代碼錯誤的時候必須更靈活,而那些不支援 HTML5 的浏覽器将忽略 HTML5 代碼。

HTML 文法的變化

HTML5:實至名歸還是言過其實?

HTML5 引入了新的 HTML 元素和屬性,有的是傳統通用元素的語義化版本,如取代  div 元素的 nav, footer 等元素,也有一些全新的元素,如 audio, video。一些在 HTML4 中不被推薦使用的元素,如 font 和 center 将被棄用。HTML5 引入的新 HTML 元素包括:

article:文章

aside:内容旁邊的側邊欄内容

audio:音頻

canvas:2D 繪圖

command:指令按鈕

datalist:下拉選擇框

details:對象的細節

dialog:對話框

embed:外部插件或對象

figure:一組媒體對象以及标簽文字

footer:頁腳

header:頁首

hgroup:文檔某一部分的資訊

keygen:表單生成的 Key

mark:标注的文字

meter:預先定義的範圍内的度量

nav:導覽列

output:輸出

progress:進度條

rp:辨別 rubby 内容

rt:rubby 内容的解釋

ruby:rubby 内容

section:定義一個部分

source:媒體的資源

time:日期時間

video:視訊

這些新标簽,可以讓你的 HTML 文檔更容易加載,且更容易被搜尋引擎抓取其中的有用資訊。比如,搜尋引擎可以直接抓取它最關心的 article 标簽裡面的内容。

HTML5:實至名歸還是言過其實?

如今的 Web 世界已經習慣了各種插件和 API,HTML5 為 Web 開發與設計者帶來了友善與不便,HTML5 将如何同現在的這些流行技術共存?

HTML5 與 Flash

HTML5:實至名歸還是言過其實?

測試顯示,Mac 平台的 Flash 表現要差于  Windows 平台,這還取決于你使用的浏覽器。現在看來,就視訊遊戲而言,Flash 是更好的選擇,但取決于你的浏覽器,如果你的視訊不是很複雜,HTML5 是更好的選擇。Web開發與設計者從這些争論中應該吸取的東西是,Flash 之外還有别的選擇,但 Flash 有牢固的地盤,在為客戶提供開發設計的時候,需要對他們的目标客戶做一些研究。

IE9 經常高調宣揚它對 HTML5 的相容,不過,它确實将是一個很好地支援 HTML5 的浏覽器,因為,IE9 使用 Windows 現代圖形 API 以及 PC 的圖形加速卡輸出文字和圖形。在三月份的 MIX 展會,微軟還宣稱,IE9 将支援 GPU 加速的 HTML5,将圖形滾動,3D 圖形顯示等處理交由圖形加速卡。

一個好消息就是,HTML5 會讓 Ajax 應用的實作變得更容易。

HTML5:實至名歸還是言過其實?

HTML5 可能對移動 Web 帶來更多好處,原因是,現在的移動 Web,iPhone 占主導地位,而 iPHone 是不支援 Flash 的。HTML5 還會讓其它平台的移動浏覽器有更快的網頁加載速度。另一個好處是 SEO,Google 4月9号宣布,将頁面加載速度作為搜尋排名的一個因素,是以,基于 HTML5 的頁面也會因加載速度更快而受益。

不過,和任何新技術的降臨一樣,其中也會牽扯到一些問題,對 Web 設計者而言,最大的一個問題就是因為這些新标簽的引入,各浏覽器之間将缺少一種統一的資料描述格式。

在 HTML5 被廣泛采用之前,我們還無法完全知道 HTML5 代碼将帶來的好與壞,總體來說,對開發者而言,這将是一個巨大的變化,而對圖形設計師而言,還不明朗。

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K918.aspx" target="_blank">關于 HTML5,開發者可以期待什麼?</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K885.aspx" target="_blank">HTML 5 之後是什麼?HTML</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx" target="_blank">深入了解 HTML 5</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K804.aspx" target="_blank">讓 JavaScript 拯救 HTML5 的離線存儲</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K745.aspx" target="_blank">Web Forms 2.0 行将被 HTML 5 代替</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K511.aspx" target="_blank">HTML 5 正在改變 Web</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K667.aspx" target="_blank">HTML 5 令人期待的 5 項功能</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K816.aspx" target="_blank">當 HTML 5 遇見 Google</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K823.aspx" target="_blank">HTML 5 會為 Flash 和 Silverlight 送終嗎?</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K824.aspx" target="_blank">Firefox 訪談:OGG, HTML 5 與 Web 視訊的未來</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K828.aspx" target="_blank">XHTML 2: 出師未捷身先死, HTML 5:萬千寵愛于一身</a>

<a href="http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K834.aspx" target="_blank">HTML5 File API:把檔案從桌面拖放到 Web</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊!30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥!8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂!35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34個漂亮網站和應用程式背景管理界面</a>

HTML5:實至名歸還是言過其實?

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀:)</a>

歡迎任何形式的轉載,但請務必注明出處。

繼續閱讀