HTML5之美 · Web前端-關注HTML5與CSS3

? 作者注：此文章原為2011年4月的《程序員》HTML5專刊所做，現刊登于此，以饗讀者。 **HTML5**之美 ? 從HTML4誕生以來，整個互聯網環境、硬件環境都發生了翻天覆地的變化，開發者期望標準統一、用戶渴望更好體驗的呼聲越來越高。20年磨一劍，HTML5作為下一代Web標準，它的新特性正在每個新式瀏覽器的版本中快速的得到支持和體現。隨著HTML5和CSS3的發展和完善，Web應用程序正在逐漸的表現出桌面應用的性能和功能，和桌面應用之間的區別將越來越模糊。未來不能用HTML5來實現的功能將越來越少，未來繪圖、視頻編輯、3D建模等也將從單機軟件轉到瀏覽器上通過Web應用程序來實現。 ? 下文，我將結合實例，談談激動人心的HTML5之美。 **1**、語義之美 ? 語義化很美，在合適的地方使用合適的標簽，把人和機器一視同仁。書寫語義化的頁面就像建造符合工業標準的建筑，閱讀語義化的頁面像閱讀一本你熟識的優美著作。 ? HTML5的語義化標簽包括： - <section>-代表文檔中的一段或者一節； - <nav>-用于構建導航； - <article>-表示文檔、頁面、應用程序或網站中一體化的內容； - <aside>-代表與頁面內容相關、有別于主要內容的部分； - <hgroup>-代表段或者節的標題； - <header>-頁面的頁眉； - <footer>-頁面的頁腳； - <time>-表示日期和時間； - <mark>-文檔中需要突出的文字。 ? 和采用css+div進行頁面布局的方式相比，這些新標簽明確的表現了頁面元素的結構和含義。下面的代碼展示了這樣的一個示例： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>HTML5</title> <link rel="stylesheet" href="html5.css" mce_href="html5.css"></head><header> <h1>Title</h1> <h2>Subtitle</h2></header><aside> <nav> <h2>Nav1</h2> <ul> <li>Link1</li> <li>Link2</li> </ul> </nav> <nav> <h2>Nav2</h2> <ul> <li>Link3</li> <li>Link4</li> </ul> </nav></aside><article> <header> <hgroup> <h1>HTML5 is beautiful</h1> <h2>Semantic, Natural, Simple and Useful</h2> </hgroup> </header> <section> <h2>Semantic</h2> <p>HTML5 is Semantic.</p> </section> <section> <h2>Natural</h2> <p>HTML5 is Natural.</p> </section></atricle><footer> <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a></footer></html>? ~~~ 相當簡單和清晰，我可以不添加任何注釋，人和機器都明白它所要構建的結構和內容。 ![](https://box.kancloud.cn/2016-08-09_57a9a29b24b0c.jpg) ? 目前主要瀏覽器的新版本都支持HTML5語義化標簽（下圖從左到右依次為IE、Chrome、Firefox、Opera、Safari、QQ瀏覽器5）。 ![](https://box.kancloud.cn/2016-08-09_57a9a29b3ad38.jpg) **2**、人性之美 ? HTML5設計理念中的通用訪問體現了人性化之美。通用訪問包括可訪問性、媒體中立和國際化支持三個概念。可訪問性考慮了對殘障用戶的支持，媒體中立為所有的平臺和終端上（例如Android和iPhone的平臺上）建立統一標準；而國際化的支持體現在不同的語言和書寫習慣上。 ? 就像CSS3中對國際化的支持體現在padding-start,padding-end（在Chrome新版本的設置中心中可以看到它的應用）等新屬性一樣，HTML5引入了Ruby標簽。Ruby標簽允許為一個或者多個文本添加附加注釋（其命名來源于Ruby字符），例如下面的代碼： ~~~ <p>Hello, <ruby> <rb>HTML5</rb> <rp> (</rp> <rt>Hyper Text Mark-up Language 5</rt> <rp>) </rp> </ruby></p>? ~~~ 顯示的文本如下： ![](https://box.kancloud.cn/2016-08-09_57a9a29b4edcc.jpg) ? Ruby標簽在中文、韓文和日文教科書和古文中非常有用，讀者們可以方便了解文本的詳細讀音和含義。下面的詩句很美，而HTML5更美。 ![](https://box.kancloud.cn/2016-08-09_57a9a29b62aff.jpg) ? 有趣的是在IE、Firefox或Opera中復制粘貼上面的文本到編輯器中，會顯示下面的文本，這是因為<rp>標簽的特殊作用：允許在不支持Ruby標簽的瀏覽器中優雅的降級，同時支持非格式化的復制和粘貼。 *死生**契 (**讀音： q**ì ) **闊 (**讀音： ku**ò ) **，與子成說。執子之手，與子偕老。* ? 目前主要瀏覽器的新版本對于Ruby標簽的支持程度如下：除Fifrefox和Opera外均提供支持。 ![](https://box.kancloud.cn/2016-08-09_57a9a29b814c8.jpg) **3**、簡單之美 ? 大道至簡，化繁為簡是許多標準、規范、框架的終極目標。HTML5很好的詮釋了這一點，例如以瀏覽器原生能力支持和代替復雜的Javascript代碼、提供簡單而強大的新API。 ? HTML5自身即跨瀏覽器的JS庫，使得開發者的工作更容易：例如新的表單標簽和屬性、內置拖拽事件使得完全不需要Javascript的支持就能實現許多常用的功能。 ? 我們再來看HTML5表單，它實現了許多簡單易用的原生屬性和控件，可以輕松的構建強大的表單，幫我們節約大量的Javascript代碼。下面是一個HTML5表單的示例： <form> <p> <label for="email">電子郵箱：</label> <input type="email" required autofocus name="email" id="email" placeholder="您的電子郵箱"> </p> <p> <label for="username">用戶名：</label> <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符"> <input type="search" placeholder="用戶名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search"> </p> <p> <label for="username-search">生日：</label> <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10"> </p> <p> <label for="blog">博客地址：</label> <input type="url" name="blog" placeholder="您的博客地址" id="blog"> </p> <p> <label for="mobile">手機：</label> <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手機號"> </p> <p> <label id="label-working-year" for="working-year">工作年限：</label> <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3"> </p> <p> <label for="age">年齡：</label> <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年齡"> </p> <p> <label for="avatar">頭像：</label> <input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="點擊選擇頭像"> </p></form>? 示例中包含了email、search、date、url、range、number、image類型的輸入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新屬性，它們簡單到根據名字就可以揣測出用途。下面是效果圖。 ![](https://box.kancloud.cn/2016-08-09_57a9a29b9c288.jpg) ? HTML5表單在各瀏覽器里的支持程度和表現并不一致，例如Search輸入框目前只被Webkit內核瀏覽器支持，而日期彈出框和拖動條刻度僅被Opera支持。以上的標簽類型和屬性目前沒有一個瀏覽器完美支持。 ![](https://box.kancloud.cn/2016-08-09_57a9a29bb267a.jpg) **4**、實用之美 ? HTML5的Web Worker、Web Socket、Web Storage等新API讓很多后臺的工作可以放到前端來處理，Web Worker解決Javascript單線程和阻塞的問題，相當于提供了分布式處理的框架；Web Socket提供了全雙工的長連接通信, 利用它，我們可以實現微博消息推送、新郵件推送、實時游戲和聊天，減少了不必要的數據傳輸，提高了信息的實時性；Web Storage相當于前端的Memcached和數據庫。 ? 而HTML5的Canvas是最強大的API之一，可以動態生成圖形、圖像和動畫，在HTML5游戲中使用的非常普遍。在下面的例子中，我將展示HTML5 Canvas之美：實現圖像顏色漸變效果。 ? 以前，我們在網站上顯示灰度圖像到彩色圖像的漸變動畫有兩種實現方式：1、基于IE濾鏡的方案，缺點是無法實現瀏覽器兼容；2、手動創建彩色圖像的灰度版本。現在，利用HTML5的Canvas畫布，我們可以高效簡單的實現此動畫效果。 ![](https://box.kancloud.cn/2016-08-09_57a9a29bc6f5f.jpg) ? 將鼠標放在左邊的圖片上，圖片顏色將從灰度漸變到彩色，一切就在眼前鮮活起來。 ? 核心的Javascript代碼如下： ~~~ // 加載時就進行處理 $(window).load(function(){ var img = $('#color-img'); // 復制圖像 img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img); img.attr('src', grayscale(img.attr('src'))); // 圖像的淡入 $('#color-img').mouseover(function(){ $(this).stop().animate({opacity: 1}, 1000); }) // 圖像的淡出 $('.gray-img').mouseout(function(){ $(this).stop().animate({opacity: 0}, 1000); }); }); // 創建灰度版的圖像 function grayscale(src) { // 取得canvas元素及其繪圖上下文 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); // 繪制一副圖像 var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 獲取之前的數據 for(var x = 0; x < imgPixels.height; x++){ for(var y = 0; y < imgPixels.width; y++){ var i = (x * 4) * imgPixels.width + y * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 計算灰度值 imgPixels.data[i] = avg; // rgb中的r imgPixels.data[i + 1] = avg; // rgb中的g imgPixels.data[i + 2] = avg; // rgb中的b // i + 3是alpha通道，我們現在不需要 } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); }? ~~~ ? 針對不支持的舊瀏覽器，我們可以使用[Modernizr](http://www.modernizr.com/) Javascript庫或者原生Javascript檢測當前瀏覽器是否支持，并提供替代性的解決方案： ~~~ if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext $(document).ready(backupFunc);}? ~~~ ? 目前主要瀏覽器的新版本都提供Canvas標簽的支持： ![](https://box.kancloud.cn/2016-08-09_57a9a29b3ad38.jpg) **5**、**HTML5**的不足 ? 目前HTML5還有哪些不足之處？ ? 1、安全：像之前Firefox4的Web Socket和透明代理的實現存在嚴重安全問題，同時Web Storage、Web Socket這樣的功能很容易被黑客利用，來盜取用戶的信息和資料，另外HTTP的機制導致了Web應用安全性有所欠缺，這將在很長的時間內成為問題。 ? 2、性能：某些平臺上的引擎問題導致HTML5性能低下。同時在不加入GPU加速的情況下，HTML5處理復雜音視頻、動畫的性能不盡如人意。 ? 3、完善性：HTML5還在成熟和發展中，像之前曾經支持的Web SQL Database，W3C已經決定不再維護。許多特性各瀏覽器的支持程度也不一樣，而地理定位API在國內的前途還不清晰。 ? 4、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像Web Worker、Web Socket、Web Storage等新特性要求對于后臺的技術需要有一定的了解，甚至需要深入了解其后面原理和邏輯，而Canvas要求視覺和圖像算法的一些知識。傳統的前端開發者需要掌握更多算法、視覺、后臺甚至瀏覽器原理的知識，機遇的同時也是巨大挑戰。 **6**、總結 ? 上面的大多數不足是HTML5發展過程的中間狀態導致的，從長期來看，瀏覽器廠商的支持、移動互聯網的蓬勃發展使得HTML5的前景一片光明，開發者對此必須要要有清楚的認識和長遠的目光，提前做好技術儲備。 ? 對于HTML5，我認為不僅要了解技術細節，還要從根本上理解HTML5的架構，從更高的層面上理解它的深層次含義，它的設計理念，你會發現它的架構之美，對于個人架構設計能力和境界提升有很大幫助。 ? Web應用程序和移動互聯網是大勢所趨，IE6終將消亡，Web和瀏覽器標準終將統一，HTML5就是道之所藏、美之所在，讓我們一起迎接和擁抱HTML5的到來！