作為處于發展階段的新一代Web開發標準，HTML5正以其簡潔的書寫規范、良好的兼容性以及務實的原則為越來越多的網站所接受，這是WHATWG與W3C共同努力的結果，作為標準的參與制訂者，各瀏覽器廠商也在積極地為其提供支持。豆瓣一向熱衷于新技術的探索和創新，前端團隊在HTML5與CSS3方面也有過很多嘗試，從視覺效果到富媒體內容再到本地存儲等等，其中一部分已經應用于線上產品，還有一部分以瀏覽器擴展、客戶端、手持設備應用等形式服務于不同需求的用戶。下面我就來簡單介紹下：

在線上產品中的應用

豆瓣目前主要的流量來源依然是PC端的IE6，這是個頗具中國特色的無奈事實，但我們同時發現，豆瓣的Chrome和Firefox用戶量在不斷增長，特別是Chrome，目前已超過Firefox位居第二，這讓我們有了充足的理由在產品中加入 HTML5特性來提升用戶體驗。

勸導用戶升級瀏覽器是個需要耐心的工作，一般用戶并不會因只停留在單方游說層面的所謂更快、更安全、更符合標準做出任何反應，畢竟改變習慣是個痛苦的決定，引導方式不正確會讓用戶煩躁，甚至對標準瀏覽器反目成仇。那何不換個思路，先為一部分勇于嘗試新鮮事物的用戶提供更為友好的視覺、交互體驗，在他們享用的同時自然會對身邊使用過時瀏覽器的朋友產生一種更為直觀的影響。這雖然沒有游戲玩家在比對速度與3D特效后產生為電腦更新換代的念頭來得迅猛，但畢竟是種積極而不唐突的方式。

豆瓣確實這么做了。細心留意可以發現，在近期的產品UI中，圓角、陰影、背景漸變均由CSS3來完成，這也是視覺設計師與前端工程師加深交流的意義所在，使用CSS3來繪制界面節省了大量代碼與圖片，從而降低了工作量，也為公司節省了帶寬，設計師在設計的同時也考慮了在無法識別 CSS3 的瀏覽器下元素對應的樣式，讓低端瀏覽器用戶感受到另一種簡約的風格。

表單驗證方面，我們優先判斷Form 2.0中新增元素的默認屬性，比如type、placeholder、pattern、required等，腳本中對于類型、驗證規則的處理只在不支持這些屬性的瀏覽器中生效，讓高級瀏覽器用戶體會到原生的執行效率。在讀書、電影條目方面我們也開始加入Microdata來實現強大的語義結構，讓豆瓣不僅能夠提供數據，還能提供數據定義。

HSL是一個全新的色彩空間，它可以方便地定義色彩的色相、亮度、飽和度，這種定義方式對稱于亮與暗，更類似于人類感覺顏色的方式。豆瓣小站的風格是用戶自定義的，比如導航欄標簽的背景色，但標簽懸停時的顏色是由系統生成的，生成的規則便是增加當前背景色的飽和度，使其顏色比默認狀態下更深，這在傳統RGB色彩空間中是不方便做到的。

除此之外，豆瓣還在桌面客戶端、瀏覽器擴展、手機應用等方面大量使用了HTML5與CSS3特性，相較于傳統開發方式，這種利用前端技術實現的跨平臺跨設備的開發思路有其明顯的優勢：學習成本低（HTML & CSS & JS）、開發周期短（類似于網站前端開發）、代碼復用性強（除了針對不同設備的接口調用外，界面、邏輯部分大多可以復用），這也得益于瀏覽器廠商、手機廠商對于 HTML5 的充分肯定與積極支持。當然，Webkit這個優質的瀏覽器引擎功不可沒。

桌面客戶端

OneRing是由豆瓣首席架構師洪強寧開發的一款跨平臺桌面應用框架，它支持使用前端技術開發桌面客戶端。即將發布的豆瓣電臺桌面版（PC/Mac）便是基于OneRing 完成的，HTML5 新增的元素與相應的API在其中發揮了重要的作用，相信很快就會和大家見面。

豆瓣電臺桌面版（Mac）界面截圖

瀏覽器擴展

Douban Pulse是一個 Chrome 瀏覽器的豆瓣擴展，它可以讓用戶隨時關注友鄰動態、參與互動，同時收聽“豆瓣電臺”。整個擴展完全基于豆瓣API并結合HTML5與CSS3特性完成，除了使用代碼繪制界面，CSS Animation完成簡單動畫、元素實現電臺外，還使用了Web Storage與Web Database進行持久化本地存儲。

比如利用Local Storage來保存登錄信息與各種狀態，用以再次開啟擴展時迅速恢復關閉前的界面；之外還用于實時保存用戶輸入的文字信息，確保信息不會因網絡中斷、瀏覽器崩潰而丟失。比起Cookie，Local Storage的優勢顯而易見：存儲空間大、數據不會隨請求發送至服務器，存儲空間獨立等等，你還可以利用瀏覽器原生的 JSON 支持，用它來保存結構化對象。

Douban Pulse 偏好設置頁界面截圖

Douban Pulse 廣播列表界面截圖

Douban Pulse的歌曲信息是保存在Web Database中的，雖然這種使用SQL語句通過Web SQL Database API操作數據的方式在HTML5規范中存在一些爭議（W3C 也停止了該文檔的維護），但書寫SQL存儲復雜數據的方式還是讓前端開發者眼前一亮，Chrome從4.0開始至今對其有著良好的支持。

Douban Pulse 電臺已播放曲目列表截圖

手機應用

如今Webkit在智能手機平臺大行其道，iOS中的Safari Mobile、Android的Chrome Lite 都是很好的實踐者，這也為基于HTML5的web app的開發提供了便利，利用一些諸如PhoneGap的框架還可以輕松地將web app變成native app上架App Store。我也嘗試了這種方式并將Douban Pulse成功地移植到了iOS上：

Douban Pulse iPhone 版（Labs 產品，非官方應用）界面截圖

結束語

當然除此之外還有很多激動人心的 HTML5 特性沒有提及，比如通信方面的Web Sockets、 Web Workers、桌面提醒 Notifications 以及倍受 LBS 應用青睞的 Geolocation 等等，大家在日常開發中也可以嘗試使用，享受 HTML5 為我們帶來的驚喜與便利。

雖然正式標準預計要 2022 年才正式發布，但目前 HTML5 已經被廣泛實現，隨著規范的不斷完善、瀏覽器支持度的提高，其優勢也愈加明顯，也許會成為未來Web應用的核心。

轉載于:https://www.cnblogs.com/chu888chu888/archive/2011/12/25/2301393.html

總結

以上是生活随笔為你收集整理的HTML5在豆瓣的各种应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。