首頁  >  文章  >  web前端  >  暢談HTML5 到底是什麼?

暢談HTML5 到底是什麼?

零下一度
零下一度原創
2017-05-04 15:14:501247瀏覽

 在這篇文章中, W3C 瀏覽器技術核心標準工作成員Mike Smith 談論了HTML5 到底是什麼,並給出了一些對開發人員有用的資源,可以讓他們跟進不斷演化的標準。

暢談HTML5 到底是什麼?

        我們正處於 Web 平台更新換代的過程之中。 HTML5通常被用來描述這個過程,儘管更新換代中的技術並不局限於 HTML5 標準所定義的特性。

        我使用了「Web 平台」(Web platform)這個術語,代指能被 Web 瀏覽器支援的一系列協定、格式以及 APIs。開發者使用這些特性來建構時新的一些應用,這些應用支援社會交互,並且充分利用了設備的能力,例如照相功能、麥克風功能以及 GPS 功能。 HTTP、TLS 以及 WebSockets 是 Web 平台中的一部分協定;HTML、CSS 以及 Javascript 是 Web 平台格式中的一些範例。 Web 平台中的 APIs 包括 Geolocation API 以及針對

        最終,如果一個特性能被廣泛實現,並且開發人員經常使用它來創建穩定的用戶體驗,那麼這個特性就成為了 Web 平台的一部分。 World Wide Web Consortium (W3C)功不可沒,它讓股東們坐到一起,統一開發一些免費標準,並創建配套資源,如測試集以及驗證程序。

        標準作為共享協定來說,是非常有用的,但 Web 平台包含大量不同成熟度的技術,這些技術並沒有都標準化。當開發者使用這些技術的時候,就會遇到一些實際的問題了,其中包括:

  • 我該如何減少 special-case code?

  • 哪些程式碼現在是夠穩定可以讓我使用的?

  • 對於那些沒有最新瀏覽器的用戶,我該如何處理?

這些問題的答案隨著時間而變化,因此開發者已經制定了切實可行的解決方案,例如fallback 和「polyfills」(這將在稍後進一步解釋)這些方案能讓內容在舊的瀏覽器以及最新的瀏覽器中都可使用。在這篇文章中,我並沒有關注 HTML5 標準的狀態,而是探討了一些有用資源,這些資源可用幫助開發者開始使用現在的開放 Web 平台技術(Open Web Platform technology)。這些資源闡明了使用 HTML5 的“原理與實現方法”,對標準進行了補充,並最終加快部署。

        platform.html5.org

        對一個忙碌的開發人員來說,他該如何追蹤的話)是可以用的?我編輯了一個網站, platform.html5.org,它可以讓你了解構成 Web 平台的最新技術。 (它是由 github repository 支援的,我非常鼓勵你來幫助維護這個站點,只需要使用 forking the repo 就可以了,並發送更新請求)。

        這個網站將技術進行了分類,如繪圖和排版、多媒體以及儲存。網站上的圖示代表了每個技術的成熟度。綠色的小旗幟表示一個特性可以使用了。黃色閃電代表「需要謹慎使用」。然而,這些都只是很粗略的指示;要真正了解這些特性,你需要點擊後面的一些有用的鏈接,如下所示:

  • HTML5 Please

  • When Can I Use…

  • MDN (Mozilla Developer Network)

        特別的,HTML5 Please site 值得進一步的評論。它是由 H5BP  developer collective( HTML5 Boilerplate 背後的開發者小組)創建的。它根據名字列出了各個特性,並對每個特性的成熟度做出了高屋建瓴的描述。它也展現了一個狀態面板,其中顯示了各個特性的狀態信 息(可以使用/小心使用/避免使用, use/caution/avoid)。在某些情況下,”caution” 和”use”關鍵字後面附加了”with fallback” 或 “with polyfill”。在有」with fallback」的情況下,你可以擴大該面板以查看究竟如何為該特性提供 fallback。

        polyfill 是指一段 Javascript 程式碼,某種以特性的 shim;也就是說,它模擬了一個將來的 API,這個 API 為舊的瀏覽器提供 fallback 功能。

        HTML5 Please 的網站管理者讓任何人都可以輕鬆地為這個網站做貢獻,他們在每個面板上都提供了一個「編輯該資訊」(」Edit this info」)的鏈接,讓你可以建立頁面內容的副本,並將其提交給該網站。 (該機制是由 a github repository 支援的,任何人對內容的修改都會作為 pull requests 提交)。該網站的維護者將對內容進行審查並合併內容。

        有時候你希望能看見比 HTML5 Please 所提供的資訊更詳細的一些狀態資訊。例如,你也許想確切知道哪些瀏覽器支援某個特定的瀏覽器,以及每個瀏覽器的哪些版本支援它,或者在行動瀏覽器中,特性受到什麼程度的支持,以及那些瀏覽器的OS 版本是什麼。這時候,你就需要查看 When Can I Use…網站了。

        When Can I Use 是 Alexis Deveria 所維護的。他跟進大量特性的狀態,並在新版本的瀏覽器發佈時更新網站。如果有某種功能是你想要了解但 When Can I Use 網站上還沒有的,你可以 建議該網站加上。

        現在記錄在When Can I Use 上的每個功能都有一個表,表中有一列是主流的桌面瀏覽器(IE, Firefox, Chrome, Safari 以及Opera),一列是主流的移動瀏覽器(iOS Safari, Opera Mini, Opera Mobile 以及Android Browser),每一行是每個瀏覽器的版本號碼。和其他網站一樣,用顏色標示了每個特定瀏覽器版本對一個特性的支持度( support/partial (部分支援) , support/no (不支援) , support/unknown (不確定是否支援))。

        例如,以查看  CSS Counters 所受的支持程度。充滿綠色條目的表格說明該特性受到很好的支援。其他支援不是很好的特性是用紅色標示的。

        When Can I Use 站點中的每個特性表都提供了一個”see-also”鏈接到相關特性的表,還有到第三方站點的鏈接,這些第三方站點提供了這些特性的使用信息,教你如何使用這些特性進行開發。

        MDN (Mozilla Developer Network)是 platform.html5.org 和 When Can I Use 都加了連結的網站。可以將 MDN 看作”how can I use”特性使用指南。例如,如果你想要實作 Web Workers,需要一些程式碼範例以及連結到有詳細資訊的資源,那麼,MDN 上就有個頁面是關於  使用 Web Workers 的,它對於入門非常有幫助。

        和HTML5 Please, When Can I Use 以及platform.html5.org 一樣,MDN 也是非常歡迎大家做貢獻的,並讓這個過程比其他網站更快簡單:整個網站就是一個wiki,所以一旦你建立了一個帳戶,你就能編輯任何頁面。

        測試集(Test Suites)

        對於評估一個特性的成熟度來說,沒有任何方法比擁有完整的測試集更好了。你可以自己運行測試集,並分析結果。對於Web 平台來說,並沒有一個集中的庫,也沒有一個單獨的地方可以讓你看到所有結果,但是W3C 已經開始著手建立一個共享測試框架站點,W3C CSS Working Group 也在建立一個針對CSS 的測試框架網站。

        這些網站讓你瀏覽各個瀏覽器以及個別瀏覽器版本對不同測試集的結果。你也可以在你自己的瀏覽器中執行測試集,並提交結果,讓結果整合到框架結果資料庫中去。例如, CSS 的多列佈局模組測試集的結果數據,或者  可以讓你自己在瀏覽器中執行測試集的啟動頁面。

        

#        在前面所提及的站點可協助您追蹤與新出現的 Web 平台。我希望隨著平台的成熟以及更多人分享他們的程式碼和經驗,更多有用的網站能夠出現。我很樂意你去使用我提到的這些站點,並將你自己的發現提交到這些站 點,以便讓關於 Web 平台的高質量的、最新的信息讓大家都能共享。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#

以上是暢談HTML5 到底是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn