html5

html5

全球資訊網的核心語言、標準通用標記語言下的一個套用超文本標記語言(HTML)的第五次重大修改(這是一項推薦標準、外語原文:W3C Recommendation、見本處參考資料原文內容: )。 2014年10月29日,全球資訊網聯盟宣布,經過接近8年的艱苦努力,該標準規範終於制定完成。

基本信息

發展歷程

html5 html5

標準通用標記語言下的一個套用HTML標準自1999年12月發布的HTML4.01後,後繼的HTML5和其它標準被束之高閣,為了推動Web標準化運動的發展,一些公司聯合起來,成立了一個叫做 Web Hypertext Application Technology Working Group (Web超文本套用技術工作組 -WHATWG) 的組織。WHATWG 致力於 Web 表單和應用程式,而W3C(World Wide Web Consortium,全球資訊網聯盟) 專注於XHTML2.0。在 2006 年,雙方決定進行合作,來創建一個新版本的 HTML。

HTML5草案的前身名為 Web Applications 1.0,於2004年被WHATWG提出,於2007年被W3C接納,並成立了新的 HTML 工作團隊。

HTML 5 的第一份正式草案已於2008年1月22日公布。HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。

2012年12月17日,全球資訊網聯盟(W3C)正式宣布凝結了大量網路工作者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱:“HTML5是開放的Web網路平台的奠基石。”

2013年5月6日, HTML 5.1正式草案公布。該規範定義了第五次重大版本,第一次要修訂全球資訊網的核心語言:超文本標記語言(HTML)。在這個版本中,新功能不斷推出,以幫助Web應用程式的作者,努力提高新元素互操作性。

本次草案的發布,從2012年12月27日至今,進行了多達近百項的修改,包括HTML和XHTML的標籤,相關的API、Canvas等,同時HTML5的圖像img標籤及svg也進行了改進,性能得到進一步提升。

支持Html5的瀏覽器包括Firefox(火狐瀏覽器),IE9及其更高版本,Chrome(谷歌瀏覽器),Safari,Opera等;國內的傲遊瀏覽器(Maxthon),以及基於IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

在移動設備開發HTML5套用只有兩種方法,要不就是全使用HTML5的語法,要不就是僅使用JavaScript引擎。

JavaScript引擎的構建方法讓製作手機網頁遊戲成為可能。由於界面層很複雜,已預訂了一個UI工具包去使用。

純HTML5手機套用運行緩慢並錯漏百出,但最佳化後的效果會好轉。儘管不是很多人願意去做這樣的最佳化,但依然可以去嘗試。

HTML5手機套用的最大優勢就是可以在網頁上直接調試和修改。原先套用的開發人員可能需要花費非常大的力氣才能達到HTML5的效果,不斷地重複編碼、調試和運行,這是首先得解決的一個問題。因此也有許多手機雜誌客戶端是基於HTML5標準,開發人員可以輕鬆調試修改。

2014年10月29日,全球資訊網聯盟淚流滿面地宣布,經過幾乎8年的艱辛努力,HTML5標準規範終於最終制定完成了,並已公開發布。

在此之前的幾年時間裡,已經有很多開發者陸續使用了HTML5的部分技術,Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5,但直到今天,我們才看到“正式版”。

HTML5將會取代1999年制定的HTML 4.01、XHTML 1.0標準,以期能在網際網路套用迅速發展的時候,使網路標準達到符合當代的網路需求,為桌面和移動平台帶來無縫銜接的豐富內容。

W3C CEO Jeff Jaffe博士表示:“HTML5將推動Web進入新的時代。不久以前,Web還只是上網看一些基礎文檔,而如今,Web是一個極大豐富的平台。我們已經進入一個穩定階段,每個人都可以按照標準行事,並且可用於所有瀏覽器。如果我們不能攜起手來,就不會有統一的Web。”

HTML5還有望成為夢想中的“開放Web平台”(Open Web Platform)的基石,如能實現可進一步推動更深入的跨平台Web套用。

接下來,W3C將致力於開發用於實時通信、電子支付、套用開發等方面的標準規範,還會創建一系列的隱私、安全防護措施。

W3C還曾在2012年透露說,計畫在2016年底前發布HTML 5.1。

設計目的

HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特徵被引進以支持這一點,如video、audio和canvas 標記。HTML5還引進了新的功能,可以真正改變用戶與文檔的互動方式,包括:

· 新的解析規則增強了靈活性

· 新屬性

· 淘汰過時的或冗餘的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

· 離線編輯

· 信息傳遞的增強

· 詳細的解析規則

· 多用途網際網路郵件擴展(MIME)和協定處理程式註冊

· 在SQL資料庫中存儲數據的通用標準(Web SQL)

HTML5在2007年被全球資訊網聯盟(W3C)新的工作組採用。這個工作組在2008年1月發布了HTML 5的首個公開草案。眼下,HTML5處於“呼籲審查”狀態,W3C預期它將在2014年年底達到其最終狀態。

特性

語義特性(Class:Semantic)

html5 html5

HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa的,微數據與微格式等方面的支持,構建對程式、對用戶都更有價值的數據驅動的Web。

本地存儲特性(Class: OFFLINE & STORAGE)

基於HTML5開發的網頁APP擁有更短的啟動時間,更快的聯網速度,這些全得益於HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術之一)和API說明文檔。

設備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來,HTML5為網頁套用開發者們提供了更多功能上的最佳化選擇,帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與套用接入開放接口。使外部套用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。

連線特性(Class: CONNECTIVITY)

更有效的連線工作效率,使得基於頁面的實時聊天,更快速的網頁遊戲體驗,更最佳化的線上交流得到了實現。HTML5擁有更有效的伺服器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現伺服器將數據“推送”到客戶端的功能。

網頁 多媒體 特性(Class: MULTIMEDIA)

支持網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。

三維、圖形及特效特性(Class: 3D, Graphics & Effects)

基於SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚嘆於在瀏覽器中,所呈現的驚人視覺效果。

性能與集成特性(Class: Performance & Integration)

沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術,解決以前的跨域等問題,幫助您的Web套用和網站在多樣化的環境中更快速的工作。

CSS3特性(Class: CSS3)

在不犧牲性能和語義結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字型格式(WOFF)也提供了更高的靈活性和控制性。

沿革

HTML5提供了一些新的元素和屬性,例如<nav>(網站導航塊)和<footer>。這種標籤將有利於搜尋引擎的索引整理,同時更好的幫助小螢幕裝置和視障人士使用,除此之外,還為其他瀏覽要素提供了新的功能,如<audio>和<video>標記。

1、取消了一些過時的HTML4標記

其中包括純粹顯示效果的標記,如<font>和<center>,它們已經被CSS取代。

HTML5 吸取了XHTML2 一些建議,包括一些用來改善文檔結構的功能,比如,新的HTML 標籤 header, footer, dialog, aside, figure 等的使用,將使內容創作者更加語義地創建文檔,之前的開發者在實現這些功能時一般都是使用div。

2、將內容和展示分離

b 和 i 標籤依然保留,但它們的意義已經和之前有所不同,這些標籤的意義只是為了將一段文字標識出來,而不是為了為它們設定粗體或斜體式樣。u,font,center,strike 這些標籤則被完全去掉了。

3、一些全新的表單輸入對象

包括日期,URL,Email 地址,其它的對象則增加了對非拉丁字元的支持。HTML5 還引入了微數據,這一使用機器可以識別的標籤標註內容的方法,使語義Web 的處理更為簡單。總的來說,這些與結構有關的改進使內容創建者可以創建更乾淨,更容易管理的網頁,這樣的網頁對搜尋引擎,對讀屏軟體等更為友好。

4、全新的,更合理的Tag

多媒體對象將不再全部綁定在object或 embed Tag 中,而是視頻有視頻的Tag,音頻有音頻的 Tag。

5、本地資料庫

這個功能將內嵌一個本地的SQL 資料庫,以加速互動式搜尋,快取以及索引功能。同時,那些離線Web 程式也將因此獲益匪淺。不需要外掛程式的豐富動畫。

6、Canvas 對象

將給瀏覽器帶來直接在上面繪製矢量圖的能力,這意味著用戶可以脫離Flash 和Silverlight,直接在瀏覽器中顯示圖形或動畫。

7、瀏覽器中的真正程式

將提供 API 實現瀏覽器內的編輯,拖放,以及各種圖形用戶界面的能力。內容修飾Tag 將被剔除,而使用CSS。

8、Html5取代Flash在移動設備的地位。

9、其突出的特點就是強化了web頁的表現性,追加了本地資料庫,

規範

HTML5和Canvas 2D規範的制定已經完成,儘管還不能算是W3C標準,但是這些規範已經功能完整,企業和開發人員有了一個穩定的執行和規劃目標。

W3C執行長Jeff Jaffe表示:“從今天起,企業用戶可以清楚地知道,他們能夠在未來依賴HTML5。”HTML5是開放Web標準的基石,它是一個完整的編程環境,適用於跨平台應用程式、視頻和動畫、圖形、風格、排版和其它數字內容發布工具、廣泛的網路功能等等。

為了減少瀏覽器碎片、實現於所有HTML工具的套用, W3C從今天開始著手W3C標準化的互操作性和測試。和之前宣布的規劃一樣, W3C計畫在2014年完成HTML5標準。

HTML工作組還發布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案,讓開發人員能提前預覽下一輪標準。

套用須知

它可能會消滅Flash

許多業內人士表示,HTML將會最終代替多媒體框架,如Adobe的Flash,但是短期看來還不是時候。HTML5估計到2014年才能逐步成熟,而且將現有套用Flash的網路開發完全轉向HTML5還需要一段時間。儘管HTML5提出了許多優點,但是還可能有某些套用更適合於更靈活的框架。一些主流的大公司都逐步轉向使用HTML5,谷歌於2015年2月26日開始自動將Flash廣告轉換為HTML5格式,這可能會加速HTML5替代Flash的進程,但是這個轉變的過程也不是一蹴而就的。

它新並不表示它安全

網路套用開發工程師們在學習新技術的同時需要時刻記住網路安全。HTML5所構建的網頁和其他語言編寫的網頁一樣容易泄露一些敏感數據。歐洲網路信息安全機構(European Network and Information Security Agency,ENISA)已經警告說HTML5可能並不夠安全。

它承諾帶來一個無縫的網路

HTML5會帶來一個統一的網路,無論是筆記本,台式機,還是智慧型手機都應該很方便的瀏覽基於HTML5的網站。因此在設計網站的時候,開發者需要重新考慮用戶體驗,網站瀏覽,網站結構等因素使得這個網站對任何硬體設備都通用。

它會變成企業的SaaS平台

一些重量級的企業,如微軟,Salesforce,SAP Sybase正在開發HTML5的開發工具。如果你正在構建企業套用,很可能不久的將來你就要用到HTML5。所以當構建公司的SaaS戰略遷移的時候也不要忘記HTML5。

它將會變得很移動

幾乎所有人都熱衷於開發獨立的移動套用,但是HTML5很可能會是獨立移動套用的終結者。由於HTML5將套用的功能直接加入其核心,這很可能引導移動技術潮流重新回到瀏覽器時代。HTML5允許開發者在(移動)瀏覽器內開發套用,所以如果你正在制定一項桌面或者移動套用的長期發展策略,你可能需要考慮這一點。

漏洞

2013年3月,HTML5標記語言的一個漏洞被發現:它允許網站利用數GB垃圾數據對用戶展開轟炸,甚至會在短時間內將硬碟塞滿。多款主流瀏覽器均會受此影響。

一位名叫菲羅斯·阿伯克哈迪傑哈(Feross Aboukhadijeh)的開發者率先發現了這一漏洞,他表示,多數主流網路瀏覽器均會受到影響,包括蘋果Safari、谷歌Chrome、微軟IE和Opera。唯一能夠阻止數據大量載入的是Mozilla的火狐瀏覽器,該產品的數據存儲上限為5MB。

該問題的根源在於HTML5存儲本地數據的方式。雖然每個瀏覽器都有不同的存儲參數,但很多都支持用戶自定義限制,且至少會在用戶電腦上存儲2.5MB數據。

阿伯克哈迪傑哈發現了一個繞過數據上限的方法,它創建了多個與用戶訪問過的網站連結的臨時網站。由於多數瀏覽器不會計算這種偶然情況,所以二級網站也可以存儲與主網站相同量的數據。通過大批生成這種網站,該漏洞便可向受影響的電腦載入海量數據。

在測試這一漏洞的過程中,阿伯克哈迪傑哈每16秒即可向他的固態硬碟版MacBook Pro中載入1GB數據。他指出,Chrome等32位瀏覽器可能會在硬碟塞滿前崩潰。“一些採用高明代碼的網站其實已經取消了用戶電腦對數據存儲的限制。”阿伯克哈迪傑哈說。阿伯克哈迪傑哈已經發布一組代碼來利用該漏洞,並創建了一個名為Filldisk的專用網站來凸顯該漏洞的危害。

優點缺點

網路標準

HTML5本身是由W3C推薦出來的,它的開發是通過谷歌、蘋果,諾基亞、中國移動等幾百家公司一起醞釀的技術,這個技術最大的好處在於它是一個公開的技術。換句話說,每一個公開的標準都可以根據W3C的資料庫找尋根源。另一方面,W3C通過的HTML5標準也就意味著每一個瀏覽器或每一個平台都會去實現。

多設備跨平台

用HTML5的優點主要在於,這個技術可以進行跨平台的使用。比如你開發了一款HTML5的遊戲,你可以很輕易地移植到UC的開放平台、Opera的遊戲中心、Facebook套用平台,甚至可以通過封裝的技術發放到App Store或Google Play上,所以它的跨平台性非常強大,這也是大多數人對HTML5有興趣的主要原因。

自適應網頁設計

很早就有人構想,能不能“一次設計,普遍適用”,讓同一張網頁自動適應不同大小的螢幕,根據螢幕寬度,自動調整布局(layout)。

2010年,Ethan Marcotte提出了”自適應網頁設計“這個名詞,指可以自動識別螢幕寬度、並做出相應調整的網頁設計。

這就解決了傳統的一種局面——網站為不同的設備提供不同的網頁,比如專門提供一個mobile版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時要維護好幾個版本,而且如果一個網站有多個portal(入口),會大大增加架構設計的複雜度。

即時更新

遊戲客戶端每次都要更新,很麻煩。可是更新HTML5遊戲就好像更新頁面一樣,是馬上的、即時的更新。

總結概括HTML5有以下優點:

1、提高可用性和改進用戶的友好體驗;

2、有幾個新的標籤,這將有助於開發人員定義重要的內容;

3、可以給站點帶來更多的多媒體元素(視頻和音頻);

4、可以很好的替代FLASH和Silverlight;

5、當涉及到網站的抓取和索引的時候,對於SEO很友好;

6、將被大量套用於移動應用程式和遊戲;

7、可移植性好。

缺點

該標準並未能很好的被瀏覽器所支持。因新標籤的引入,各瀏覽器之間將缺少一種統一的數據描述格式,造成用戶體驗不佳。

爭議

HTML5在誕生之後,就樹立了一個原則,那就是所有的技術必須是開放的,不準有專利限制,在這期間Opera捐獻了CSS技術,而Google則提供了視頻格式WebM。

可以說大部分的HTML協定在眾多網路技術公司中達成共識,但在視頻格式方面,世界各大網際網路公司正在為具體標準進行爭論,這可能影響HTML5標準的分流。紛爭的兩大陣營分別是Opera、火狐、Google等,另一大陣營則由蘋果公司領銜。

MPEG陣營認為WebM格式是具有專利保護的,這違背了HTML5所有技術必須開放的原則。MPEG陣營則更多地是因為自身就在使用這種視頻格式。

發展趨勢

HTML5規範開發完成時,將成為主流。

據統計2013年全球將有10億手機瀏覽器支持HTML5,同時HTML Web開發者數量將達到200萬。毫無疑問,HTML5將成為未來5-10年內,移動網際網路領域的主宰者。

據IDC的調查報告統計,截至2012年5月,有79%的移動開發商已經決定要在其應有程式中整合HTML5技術。

12月,全球資訊網聯盟宣布已經完成對HTML5標準以及Canvas 2D性能草案的制定,這就意味著開發人員將會有一個穩定的“計畫和實施”目標。有很多的文章都在號召使用HTML5,並大力宣傳它的好處。此前,站長之家曾經做過一期調查,調查顯示只有36.16%的站長正在學習中,另外的63.76%表示正在觀望中。作為站長,你是否準備開始學習HTML5?

從性能角度來說,HTML5首先是縮減了HTML文檔,使這件事情變得更簡單。從用戶可讀性上說,原先一大堆東西對初學者來說,第一次看到這些東西是看不懂的,而HTML5的聲明方式對用戶來說顯然更友好一些。

未來趨勢

1、移動優先

從如今層出不窮的移動套用就知道,在這個智慧型手機和平板電腦大爆炸的時代,移動優先已成趨勢,不管是開發什麼,都以移動為主。

2、遊戲開發者領銜“主演”

許多遊戲開發商都被Facebook或者Zynga推動著發展,而未來的Facebook套用生態系統是基於HTML5的,儘管在HTML 5平台開發出遊戲非常困難,但遊戲開發商卻都願意那么做。通過PhoneGap及appmobi的XDK將Web套用遊戲打包整合到原生套用中也是一種方式,Facebook差不多就這么乾的——基於Web套用及瀏覽器,但卻將之打包整合進原生套用。

3、2014計畫

2012年9月,W3C提出計畫要在2014年底前發布一個HTML5推薦標準,並在2016年底前發布HTML5.1推薦標準。

盈利方案

第一個解決方案,現有的盈利模式可以移植到HTML5,今天遊戲開發者通過跟蘋果App Store合作非常賺錢,其實HTML5的模式也可以通過封裝把遊戲放到App Store一樣的分成賺錢。

第二個解決方案,HTML5遊戲可以“傍著”平台,比方說Opera的遊戲平台或其它瀏覽器的平台,以及所謂雲遊戲的遊戲平台,都是新的盈利模式的平台。

第三個解決方案,在談到HTML5遊戲與原生套用的表現性能比時,開發者需要考慮清楚要做的究竟是怎樣一款遊戲,HTML5更適合輕量級的小遊戲。而且HTML5在代碼保密性方面並不弱於原生套用。

第四個解決方案,前面3個都是以HTML5遊戲或者套用的形式為贏利點,其實任何技術形態最終都是一樣,本質上都是服務於人(包含個人、企業),只要能滿足需求的業務組合都是盈利的方向,例如目前催生的微信網站、HTML5行銷、HTML5外包 等,都是滿足現實需求的盈利方案

新元素

自1999年以後HTML 4.01 已經改變了很多,今天,在HTML 4.01中的幾個已經被廢棄,這些元素在HTML5中已經被刪除或重新定義。

為了更好地處理今天的網際網路套用,HTML5添加了很多新元素及功能,比如: 圖形的繪製,多媒體內容,更好的頁面結構,更好的形式 處理,和幾個api拖放元素,定位,包括網頁 應用程式快取,存儲,網路工作者,等。

canvas

標籤描述
<canvas> 標籤定義圖形,比如圖表和其他圖像。該標籤基於 JavaScript 的繪圖 API

多媒體

標籤描述
<audio> 定義音頻內容
<video> 定義視頻(video 或者 movie)
<source> 定義多媒體資源 <video> 和 <audio>
<embed> 定義嵌入的內容,比如外掛程式。
<track> 為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。

表單

標籤描述
<datalist> 定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。
<keygen> 規定用於表單的密鑰對生成器欄位。
<output> 定義不同類型的輸出,比如腳本的輸出。

語義和結構

HTML5提供了新的元素來創建更好的頁面結構:

標籤描述
<article> 定義頁面的側邊欄內容
<aside> 定義頁面內容之外的內容。
<bdi> 允許您設定一段文本,使其脫離其父元素的文本方向設定。
<command> 定義命令按鈕,比如單選按鈕、複選框或按鈕
<details> 用於描述文檔或文檔某個部分的細節
<dialog> 定義對話框,比如提示框
<summary> 標籤包含 details 元素的標題
<figure> 規定獨立的流內容(圖像、圖表、照片、代碼等等)。
<figcaption> 定義 <figure> 元素的標題
<footer> 定義 section 或 document 的頁腳。
<header> 定義了文檔的頭部區域
<mark> 定義帶有記號的文本。
<meter> 定義度量衡。僅用於已知最大和最小值的度量。
<nav> 定義運行中的進度(進程)。
<progress> 定義任何類型的任務的進度。
<ruby> 定義 ruby 注釋(中文注音或字元)。
<rt> 定義字元(中文注音或字元)的解釋或發音。
<rp> 在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。
<section> 定義文檔中的節(section、區段)。
<time> 定義日期或時間。
<wbr> 規定在文本中的何處適合添加換行符。

已移除元素

以下的 HTML 4.01 元素在HTML5中已經被刪除:

&lt;/p&gt;&lt;p&gt;•&amp;nbsp;&lt;strike&gt;&lt;/p&gt;

技術要點

重要標記

<video>標記

定義和用法:

</video> 標籤定義視頻,比如電影片段或其他視頻流。

<audio> 標記

定義和用法

</audio> 標籤定義聲音,比如音樂或其他音頻流。

實例:

一段簡單的HTML5 音頻

<audio src="">

您的瀏覽器不支持 audio 標籤。

</audio>

<canvas> 標記

定義和用法:

<canvas> 標籤定義圖形,比如圖表和其他圖像。

HTML5 的 canvas 元素使用JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域,您可以控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。

實例:

通過 canvas 元素來顯示一個紅色的矩形:

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,80,100);

</script>

程式接口

除了原先的DOM接口,HTML5增加了更多API,如:

1. 用於即時2D繪圖的Canvas標籤

2. 定時媒體回放

3. 離線資料庫存儲

4.文檔編輯

5. 拖拽控制

6. 瀏覽歷史管理

元素變化

新的解析順序新的元素:section, video, progress, nav, meter, time, aside, canvasinput

元素的新屬性:日期和時間,email, url。

新的通用屬性:ping, charset, async

全域屬性:id, tabindex, repeat。

移除元素:center, font, strike。

控制項

就是Html標註的屬性里加上runat="server"所構成的控制項,至於Html標註和Html控制項之間的區別很明顯,Html控制項是運行於伺服器端,Html標註是運行於客戶端。

基本Html控制項有:HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。

自定義的Html控制項是根據自己的需求定義。當自主開發效率低,可以從技術社區、源碼網站下載需要的控制項。比如,需要插入table, image, links 等標籤。不必自己開發,可以使用:ComponentOne Wijmo Editor等。

免費HTML5圖表庫——.Net圖表控制項Chart FX,深受大家喜愛,相信大家已經非常熟悉了。而且還從Chart FX的開發商SoftwareFX獲得一個激動人心的訊息:該公司已推出一套為HTML5,jQuery和JavaScript開發者設計的圖表庫——jChartFX,而且jChartFX是免費的!

圖表庫

.Net圖表控制項Chart FX相信大家已經非常熟悉了。Chart FX的開發商SoftwareFX推出的一套為HTML5、jQuery和JavaScript開發者設計的免費HTML5圖表庫——jChartFX!

jChartFX亮點:

jChartFX充分利用了HTML5,CSS和SVG,讓您能夠在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。

jChartFX擁有很多令人振奮的功能,它在無外掛程式純JavaScript的瀏覽器上運行,這意味著在提高了網站安全性和速度的同時,最大程度的減少了網站伺服器的負荷。

jChartFX還能夠自動整合到jQuery UI ThemeRoller,自動讀取並解釋jQuery的主題和CSS檔案,能夠快速適應您的頁面布局和設計,無需一行代碼。

jChartFX支持JSON,JSON能夠幫助您實現,任何數據源中的數據都可以展現到圖表中。

jChartFX還支持超過40種的2D、3D圖表類型,免費的圖表控制項中支持如此之多的圖表展示類型實屬難得。

1.

jChartFX充分利用了HTML5,CSS和SVG,讓您能夠在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。

2.

jChartFX擁有很多令人振奮的功能,它在無外掛程式純JavaScript的瀏覽器上運行,這意味著在提高了網站安全性和速度的同時,最大程度的減少了網站伺服器的負荷。

3.

jChartFX還能夠自動整合到jQuery UI ThemeRoller,自動讀取並解釋jQuery的主題和CSS檔案,能夠快速適應您的頁面布局和設計,無需一行代碼。

4.

jChartFX支持JSON,JSON能夠幫助您實現,任何數據源中的數據都可以展現到圖表中。

5.

jChartFX還支持超過40種的2D、3D圖表類型,免費的圖表控制項中支持如此之多的圖表展示類型實屬難得。

標籤

註:在下面表格中4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 5 中定義了該元素

按字母順序排列的標籤列表
標籤描述
<!--...--> 定義注釋 4 5
<!DOCTYPE> 定義文檔類型 4 5
<a> 定義超連結 4 5
<abbr> 定義縮寫 4 5
<acronym> HTML 5 中不支持 4
<address> 定義地址元素 4 5
<applet> 定義 applet(HTML 5 中不支持) 4
<area> 定義圖像映射中的區域 4 5
<article> 定義 article 5
<aside> 定義頁面內容之外的內容 5
<audio> 定義聲音內容 5
<b> 定義粗體文本 4 5
<base> 定義頁面中所有連結的基準URL 4 5
<basefont> HTML 5 中不支持,請使用CSS 代替 4
<bdo> 定義文本顯示的方向 4 5
<big> 定義大號文本(HTML 5 中不支持) 4
<blockquote> 定義長的引用 4 5
<body> 定義 body 元素 4 5
<br> 插入換行符 4 5
<button> 定義按鈕 4 5
<canvas> 定義圖形 5
<caption> 定義表格標題 4 5
<center> 定義居中的文本(HTML 5 中不支持) 4
<cite> 定義引用 4 5
<code> 定義計算機代碼文本 4 5
<col> 定義表格列的屬性 4 5
<colgroup> 定義表格列的分組 4 5
<command> 定義命令按鈕 5
<datalist> 定義下拉列表 5
<dd> 定義定義的描述 4 5
<del> 定義刪除文本 4 5
<details> 定義元素的細節 5
<dfn> 定義定義項目 4 5
<dir> 定義目錄列表(HTML 5 中不支持) 4
<div> 定義文檔中的一個部分 4 5
<dl> 定義定義列表 4 5
<dt> 定義定義的項目 4 5
<em> 定義強調文本 4 5
<embed> 定義外部互動內容或外掛程式 5
<fieldset> 定義 fieldset 4 5
<figcaption> 定義 figure 元素的標題 5
<figure> 定義媒介內容的分組,以及它們的標題 5
<font> HTML 5 中不支持 4
<footer> 定義 section 或 page 的頁腳 5
<form> 定義表單 4 5
<frame> 定義子視窗(框架)(HTML 5 中不支持) 4
<frameset> 定義框架的集(HTML 5 中不支持) 4
<h1> to <h6> 定義標題1 到標題6 4 5
<head> 定義關於文檔的信息 4 5
<header> 定義 section 或 page 的頁眉 5
<hgroup> 定義有關文檔中的 section 的信息 4 5
<html> 定義 html 文檔 4 5
<i> 定義斜體文本 4 5
<iframe> 定義行內的子視窗(框架) 4 5
<img> 定義圖像 4 5
<input> 定義輸入域 4 5
<ins> 定義插入文本 4 5
<keygen> 定義生成密鑰 5
<isindex> 定義單行的輸入域(HTML 5 中不支持) 4
<kbd> 定義鍵盤文本 4 5
<label> 定義表單控制項的標註 4 5
<legend> 定義 fieldset 中的標題 4 5
<li> 定義列表的項目 4 5
<link> 定義資源引用 4 5
<map> 定義圖像映射 4 5
<mark> 定義有記號的文本 4 5
<menu> 定義選單列表 4 5
<meta> 定義元信息 4 5
<meter> 定義預定義範圍內的度量 5
<nav> 定義導航連結 5
<noframes> 定義 noframe 部分(HTML 5 中不支持) 4
<noscript> 定義 noscript 部分 4 5
<object> 定義嵌入對象 4 5
<ol> 定義有序列表 4 5
<optgroup> 定義選項組 4 5
<option> 定義下拉列表中的選項 4 5
<output> 定義輸出的一些類型 5
<p> 定義段落 4 5
<param> 為對象定義參數 4 5
<pre> 定義預格式化文本 4 5
<progress> 定義任何類型的任務的進度 5
<q> 定義短的引用 4 5
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內容 5
<rt> 定義 ruby 注釋的解釋 5
<ruby> 定義 ruby 注釋 5
<s> 定義加刪除線的文本(HTML 5 中不支持) 4
<samp> 定義樣本計算機代碼 4 5
<script> 定義腳本 4 5
<section> 定義 section 5
<select> 定義可選列表 4 5
<small> 定義小號文本 4 5
<source> 定義媒介源 4 5
<span> 定義文檔中的 section 4 5
<strike> 定義加刪除線的文本(HTML 5 中不支持) 4
<strong> 定義強調文本 4 5
<style> 定義樣式定義 4 5
<sub> 定義下標文本 4 5
<summary> 定義 details 元素的標題 5
<sup> 定義上標文本 4 5
按字母順序排列的標籤列表
標籤描述4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 5 中定義了該元素
<table> 定義表格 4 5
<tbody> 定義表格的主體 4 5
<td> 定義表格單元 4 5
<textarea> 定義 textarea 4 5
<tfoot> 定義表格的腳註 4 5
<th> 定義表頭 4 5
<thead> 定義表頭 4 5
<time> 定義日期/時間 5
<title> 定義文檔的標題 4 5
<tr> 定義表格行 4 5
<tt> 定義打字機文本 4 5
<u> 定義下劃線文本(HTML 5 中不支持) 4
<ul> 定義無序列表 4 5
<var> 定義變數 4 5
<video> 定義視頻 5
<xmp> 定義預格式文本(HTML 5 中不支持) 4

事件屬性

HTML 5 元素可擁有事件屬性,這些屬性在瀏覽器中觸發行為,比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性,可以把它們插入 HTML 標籤來定義事件行為。

HTML 5 中的新事件屬性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定義了該元素。

5: 指在HTML 5 中定義了該元素。

HTML 5不再支持的 HTML 4.01 屬性:onreset。

事件屬性
屬性描述45
onabort script 發生 abort 事件時運行腳本。 5
onbeforeonload script 在元素載入前運行腳本。 5
onblur script 當元素失去焦點時運行腳本。 4 5
onchange script 當元素改變時運行腳本。 4 5
onclick script 在滑鼠點擊時運行腳本。 4 5
oncontextmenu script 當選單被觸發時運行腳本。 5
ondblclick script 當滑鼠雙擊時運行腳本。 4 5
ondrag script 只要腳本在被拖動就運行腳本。 5
ondragend script 在拖動操作結束時運行腳本。 5
ondragenter script 當元素被拖動到一個合法的放置目標時,執行腳本。 5
ondragleave script 當元素離開合法的放置目標時。 5
ondragover script 只要元素正在合法的放置目標上拖動時,就執行腳本。 5
ondragstart script 在拖動操作開始時執行腳本。 5
ondrop script 當元素正在被拖動時執行腳本。 5
onerror script 當元素載入的過程中出現錯誤時執行腳本。 5
onfocus script 當元素獲得焦點時執行腳本。 4 5
onkeydown script 當按鈕按下時執行腳本。 4 5
onkeypress script 當按鍵被按下時執行腳本。 4 5
onkeyup script 當按鈕鬆開時執行腳本。 4 5
onload script 當文檔載入時執行腳本。 4 5
onmessage script 當 message 事件觸發時執行腳本。 5
onmousedown script 當滑鼠按鈕按下時執行腳本。 4 5
onmousemove script 當滑鼠指針移動時執行腳本。 4 5
onmouseover script 當滑鼠指針移動到一個元素上時執行腳本。 4 5
onmouseout script 當滑鼠指針移出元素時執行腳本。 4 5
onmouseup script 當滑鼠按鈕鬆開時執行腳本。 4 5
onmousewheel script 當滑鼠滾輪滾動時執行腳本。 5
onreset script 當表單重置時執行腳本。不支持。 4
onresize script 當元素調整大小時運行腳本。 5
onscroll script 當元素滾動條被滾動時執行腳本。 5
onselect script 當元素被選中時執行腳本。 4 5
onsubmit script 當表單提交時運行腳本。 4 5
onunload script 當文檔卸載時運行腳本。 5

標籤屬性

HTML 5標籤擁有屬性。在每個標籤的參考頁中可以找到相應的特殊屬性。這裡列出的屬性是通用於每個標籤的核心屬性和語言屬性(有個別例外)。

4: 指在HTML 4.01 中定義了該元素

5: 指在HTML 5 中定義了該元素

HTML 5標籤中的新屬性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template

HTML 5 中不再支持的屬性:accesskey

標籤屬性
屬性描述45
acceskey a character 設定訪問一個元素的鍵盤快捷鍵。不支持。 4
class class_ruleor style_rule 元素的類名。 4 5
contenteditable true false 設定是否允許用戶編輯元素。 5
contentextmenu id of a menu element 給元素設定一個上下文選單。 5
dir ltr rtl 設定文本方向。 4 5
draggable true false auto 設定是否允許用戶拖動元素。 5
id id_name 元素的唯一 id。 4 5
irrelevant true false 設定元素是否相關。不顯示非相關的元素。 5
lang language_code 設定語言碼。 4 5
ref urlor elementID 引用另一個文檔或文檔上另一個位置。僅在 template 屬性設定時使用。 5
registrationmark registration mark 為元素設定拍照。可規定於任何 <rule> 元素的後代元素, 除了 <nest> 元素。 5
style style_definition 行內的樣式定義。 4 5
tabindex number 設定元素的 tab 順序。 4 5
template urlor elementID 引用應該套用到該元素的另一個文檔或本文檔上另一個位置。 5
title tooltip_text 顯示在工具提示中的文本。 4 5

異常處理

HTML 5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設計時保證舊的瀏覽器能夠安全的忽略掉新的HTML 5代碼。與HTML 4.01相比,HTML 5給出了解析的詳細規則,力圖讓不同的瀏覽器即使在發生語法錯誤時也能返回相同的結果。

優勢

HTML5可以提供:

1.提高可用性和改進用戶的友好體驗;

2.有幾個新的標籤,這將有助開發人員定義重要的內容;

3.可以給站點帶來更多的多媒體元素(視頻和音頻);

4.可以很好的替代FLASH和Silverlight;

5.當涉及到網站的抓取和索引的時候,對於SEO很友好;

6.將被大量套用於移動應用程式和遊戲。

谷歌和HTML5

2010年5月22日,谷歌創建了一個塗鴉來紀念Pac Man的視頻遊戲。這個塗鴉是一個動畫,同時也是一個可以玩的Pac Man的遊戲。這個塗鴉就是谷歌通過使用HTML5標準製作的,當然谷歌也提供一個FLASH版本來支持不兼容HTML5的瀏覽器。我敢打賭,這是大多數 網際網路網民第一次和HTML5的接觸。對於個人來說,這是一個興奮的訊息。以我的觀點,這個塗鴉提供了一個機會可以窺視未來網際網路、網頁、移動套用軟體和遊戲等發展趨勢。對於搜尋引擎最佳化,他開闢了我更多的想像,它讓我思考HTML5在SEO領域的潛力。網站轉移到HTML5標準對於SEO有什麼優勢?

HTML 5開發領域的領軍人物包括Sencha,Adobe,Appcelerator,appMobi及Facebook,亞馬遜,Google三大巨頭。不管你是想開發出新型視頻套用的開發商如Brightcover還是想開發新型音頻套用的開發商如Soundcloud,不論是桌面套用還是移動套用,HTML 5都是創新的主鏇律。

HTML5與SEO

一:使搜尋引擎更加容易抓取和索引

對於一些網站,特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。如果你有一個都是FLASH的站點,你就一定會看到切換到HTML5的 好處。首先,搜尋引擎的蜘蛛將能夠抓取你的站點和索引你的內容。所有嵌入到動畫中的內容將全部可以被搜尋引擎讀取。在搜尋引擎最佳化的基本理論中,這一方面將會驅動你的網站獲得更多的右擊流量。

二:提供更多的功能,提高用戶的友好體驗

使用HTML5的另一個好處就是它可以增加更多的功能。對於HTML5的功能性問題,我們從全球幾個主流站點對它的青睞就可以看出。社交網路大亨Facebook已經推出他們期待已久的基於HTML5的iPad套用平台,潘多拉也推出他們基於HTML5的音樂播放器的新版本。遊戲平台 Zynga也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的遊戲等等。每天都有不斷的基於HTML5的網站和HTML5特性的網站被推 出。保持站點處於新技術的前沿,也可以很好的提高用戶的友好體驗。

三:可用性的提高,提高用戶的友好體驗

最後我們可以從可用性的角度上看,HTML5可以更好的促進用戶於網站間的互動情況。多媒體網站可以獲得更多的改進,特別是在移動平台上的套用,使用 HTML5可以提供更多高質量的視頻和音頻流。到目前為止,事實就是iPhone和iPad將不會支持FLASH,同時ADOBE公司也公開聲明將 停止FLASH基於移動平台的開發,可以這么說——移動平台日後視頻音頻是HTML5的天下!

相關詞條

相關搜尋

熱門詞條

聯絡我們