HTML5之美

時間 2019-11-29

標籤 html5 html 之美欄目 HTML5 简体版

原文原文鏈接

　　現在大熱的HTML5到底美在哪裏？HTML5到底能爲實際的移動開發帶來哪些改變？來自阿里云云手機服務運營部的前端開發工程師正邪（廖健）分享了他眼中的HTML5之美，主要講訴HTML5的常見原理並從CSS、JavaScript和框架三個方面作了細緻講解：javascript

　　說到HTML5通常都會提到它新增了一些新的標籤，這些標籤可以減小文檔的大小，也能夠節省一些CSS定義，可是這個好處不足以說明HTML5在技術變革上帶來的影響，咱們仍是先要明白HTML5的原理究竟是怎樣的，它帶來的變革爲何會這麼大？css

　　常見的原理

　　HTML5的產生以及它的設計徹底是遵循了一些常見的原理，這些原理在李鬆峯老師的博客上有詳細地闡述。html

　　首先第一條原理是：發送時保守、接收時開放。前端

　　做爲工程師，發送給瀏覽器的文檔應該儘可能的嚴謹，可是瀏覽器做爲接收方，應該持有一個開放的姿態，而不會由於某個文檔有問題，到瀏覽器窗口裏面就不顯示了，只是留下一片空白給用戶。既然HTML存在標籤沒有正常閉合的可能性，也存在屬性丟失的狀況，只要文檔沒有產生二義性，瀏覽器應該猜想到最終的行爲並作出正確處理，在技術層面瀏覽器有理由這麼作。html5

　　第二，避免沒必要要的複雜性。java

　　咱們在編寫的HTML的時候，可能會定義一個很長很長的文檔類型聲明，這個文檔類型聲明是給瀏覽器看的，若是可以簡化它，在創做的時候就能省下一些時間，並且也不用浪費力氣去記那些難記的字符。實際上，省略大多數字符，瀏覽器也能按照咱們指望的那樣去運行。算法

　　還有script標籤，咱們可能會設置它的type爲「text/javascript」，實際上也是沒必要要，若是type屬性沒有被聲明，默認就按JavaScript處理。相似的東西有不少，在文檔裏面能省掉的咱們就應該大膽地省掉，這樣不只是在創做這個文檔的時候，可以給咱們帶來這些方便，並且在共同維護的時候也能帶來一些益處。數據庫

　　第三，網絡價值同達到網絡用戶數量的平方成正比。canvas

　　如今HTML5這麼火，不少人就拿它跟Flash去作對比，說Flash多麼多麼爛，說HTML5多麼多麼好。實際上咱們創做的內容最後是給用戶去看的，若是這個東西用戶以爲好，無論用什麼技術我以爲都是次要的。後端

　　最後咱們要的是將服務推送到用戶面前，而不是要說某種技術多麼好，能夠殺死另外一個技術。實際上在這裏，它們的協同工做纔是符合HTML5的設計思想，在這個層面上我以爲Flash也是HTML5中的一員。

　　第四，大多數人的意見和可運行的代碼。

　　沒有HTML5規範的時候，瀏覽器廠商能夠各自爲陣，能夠加入了本身的標準，雖然這些標準不是W3C制定的，可是大多人都有這些需求，它們能解決實際問題。因此也刺激W3C加入到這些標準的制定中去。

　　技術細節

　　CSS

　　有位測試工程師報了個bug給開發工程師。說頁面上的單選框樣式太難看了，建議改一下，換個顏色。開發工程師當時就暈倒了，說這個是瀏覽器默認的，改不了。改不了怎麼辦？只能把bug打回去。

　　基於CSS3的特性，如今徹底能夠改變瀏覽器控件的默認外觀。

　　而後是佈局。改變樣式是CSS的強項，也是它的職責所在。咱們可使用百分比作彈性佈局。如今設備比較多，有iPad、iPhone、還有其各類屏幕尺寸的安卓，假如我想用HTML5的技術作一個應用，適用於全部平臺，這個時候百分百確定是不夠的，而精準的彈性佈局又顯得很重要。

　　CSS3有一個box-flex的屬性，假設有個容器，裏面有三個div，在設置了margin的同時將它們的box-flex設置成1，看到的效果就是三個元素均等分，我還能夠改變它的比例，好比將第一個元素固定寬度，剩下的兩個元素也能夠均等分。除了從左往右佈局，使用cloumn-count能夠作到從上往下佈局。

　　box-flex能夠解決一部分屏幕適配的問題，若是想作到更精準的佈局，好比說在小屏幕下的佈局是一個樣子，大屏幕下可能加入了更多的元素，或者更復雜了，甚至大小、顏色、位置都變了。這個時候可使用Media Queries的技術。咱們能夠先定義某個樣式，而後在某種屏幕上面覆蓋默認樣式，或者徹底使用另外一套樣式。

　　除了CSS3這些奇妙的屬性，用它來設計一些複雜背景也是很是適合的。這裏有一個我同事開發的Chrome插件叫Coda Cola，他還爲這個插件作了一個分享的網站。別人根據這個插件，作出了一些比較酷的CSS效果，能夠再分享出來。

　　JavaScript

　　說了CSS3，再說說JavaScript。你們說JavaScript美嗎？好像咱們對它的印象也不是很好。不只前端，後端對JavaScript的印象也好不到哪去，甚至會更糟糕。

　　首先它的執行效率比較慢。

　　而後它的API接口比較爛，好比我要查找某個元素，能夠用getElementById，getElementsByTagName, 這麼一長串。除了很長，我還要把第三個參數指定爲false。如今作應用的話，咱們通常都會選擇用框架來幫助本身進行開發，從那些複雜的語法中解脫出來。

　　再者，JavaScript調試比較困難，JavaScript邊解釋變執行，代碼一多，方法之間的調用層級變深，若是出錯，就很難定位到錯誤所在。特別是在沒有firebug等調試工具以前，找錯誤有時候就跟作噩夢通常。JavaScript雖然有這麼多弊病，可是它如今還在快速發展。到如今，咱們有不少種的框架能夠選擇，這裏面確定有你們喜好的框架。但在HTML5到來的時刻，咱們有一些更好的選擇。好比說作元素查找，之前可能用到框架，如今不用框架，使用原生的API也能夠很方便地作到。這是第一點，就是有些功能再也不須要框架作支持了。

　　第二，JavaScript中加入一些新的特性，好比說LocalStorage。沒有LocalStorage的時候，咱們可使用Cookie在客戶端記錄一些用戶相關的數據，可是Cookie記錄的容量有限，並且HTTP請求會攜帶cookie數據。在須要保存大量數據或者設計離線應用的時候，LocalStorage就很是有用了，LocalStorage的容量比較大，在移動平臺上，至少有2M的存儲空間。

　　框架

　　雖說有了一些原生的API，也有了一些新的功能，可是在開發的時候，咱們仍是要藉助一些框架來提升工做效率。有一個叫Zepto的框架，是咱們在項目中常常會用到的框架。它的API幾乎跟jQuery同樣，跟jQuery相比，Zepto去除了一些移動平臺上沒必要要的代碼。除此以外，它還支持了tap、swipe等手勢。在移動平臺上，咱們也可使用Canvas技術作一些遊戲。

　　在移動互聯網上，手機跟PC有一些特徵上的差別。用到手機特有的功能，咱們能夠作一些頗有意思的東西。好比說我想得到地理定位，還有傳感器、查詢通信錄、拍照，這些都是手持設備特有的功能，雖然W3C有制定這些API的規範，可是目前沒有瀏覽器已經完整實現。若是使用PhoneGap的話，咱們就能使用到這些API了。

　　我這裏有一個視頻，演示的是使用PhoneGap作的一個指南針應用。我在Chrome上裝了一個叫Ripple的插件，它是一個PhoneGap模擬器插件。裝好這個插件以後，就能夠在瀏覽器上進行中開發了，這個插件模擬了設備的大小和外觀，而且加入了device特性的調試環境。在界面上，左右都有很複雜的控件，操做它們能夠模擬device特性。就這樣一個應用，只須要大概20行代碼。

　　而後打包也很簡單，PhoneGap官方有個在線的打包工具，它架設在Amazon雲計算平臺上，咱們只須要把源代碼的zip包傳上去，而後就能下載打包好的應用程序安裝文件。

　　因此說，使用HTML5技術作一個安卓應用真的是很是簡單，基於PhoneGap，能夠連SDK也不用下，而且能作到直接開發、打包，不過一臺安卓手機仍是須要的，由於咱們仍是須要部署上去看看真實效果。

　　從HTML4誕生以來，整個互聯網環境、硬件環境都發生了翻天覆地的變化，開發者指望標準統1、用戶渴望更好體驗的呼聲愈來愈高。20年磨一劍，HTML5做爲下一代Web標準，它的新特性正在每一個新式瀏覽器的版本中快速的獲得支持和體現。隨着HTML5和CSS3的發展和完善，Web應用程序正在逐漸的表現出桌面應用的性能和功能，和桌面應用之間的區別將愈來愈模糊。將來不能用HTML5來實現的功能將愈來愈少，將來繪圖、視頻編輯、3D建模等也將從單機軟件轉到瀏覽器上經過Web應用程序來實現。

　　下文，我將結合實例，談談激動人心的HTML5之美。

　　一、語義之美

　　語義化很美，在合適的地方使用合適的標籤，把人和機器一視同仁。書寫語義化的頁面就像建造符合工業標準的建築，閱讀語義化的頁面像閱讀一本你熟識的優美著做。

　　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">  
</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>

　　至關簡單和清晰，我能夠不添加任何註釋，人和機器都明白它所要構建的結構和內容。

　　目前主要瀏覽器的新版本都支持HTML5語義化標籤（下圖從左到右依次爲IE、Chrome、Firefox、Opera、Safari、QQ瀏覽器5）。

　　二、人性之美

　　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>

　　顯示的文本以下：

　　Ruby標籤在中文、韓文和日文教科書和古文中很是有用，讀者們能夠方便了解文本的詳細讀音和含義。下面的詩句很美，而HTML5更美。

　　有趣的是在IE、Firefox或Opera中複製粘貼上面的文本到編輯器中，會顯示下面的文本，這是由於<rp>標籤的特殊做用：容許在不支持Ruby標籤的瀏覽器中優雅的降級，同時支持非格式化的複製和粘貼。

　　死生契 (讀音： qì ) 闊 (讀音： kuò ) ，與子成說。執子之手，與子偕老。

　　目前主要瀏覽器的新版本對於Ruby標籤的支持程度以下：除Fifrefox和Opera外均提供支持。

　　三、簡單之美

　　大道至簡，化繁爲簡是許多標準、規範、框架的終極目標。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等新屬性，它們簡單到根據名字就能夠揣測出用途。下面是效果圖。

　　HTML5表單在各瀏覽器裏的支持程度和表現並不一致，例如Search輸入框目前只被Webkit內核瀏覽器支持，而日期彈出框和拖動條刻度僅被Opera支持。以上的標籤類型和屬性目前沒有一個瀏覽器完美支持。

　　四、實用之美

　　HTML5的Web Worker、Web Socket、Web Storage等新API讓不少後臺的工做能夠放到前端來處理，Web Worker解決Javascript單線程和阻塞的問題，至關於提供了分佈式處理的框架；Web Socket提供了全雙工的長鏈接通訊，利用它，咱們能夠實現微博消息推送、新郵件推送、實時遊戲和聊天，減小了沒必要要的數據傳輸，提升了信息的實時性；Web Storage至關於前端的Memcached和數據庫。

　　而HTML5的Canvas是最強大的API之一，能夠動態生成圖形、圖像和動畫，在HTML5遊戲中使用的很是廣泛。在下面的例子中，我將展現HTML5 Canvas之美：實現圖像顏色漸變效果。

　　之前，咱們在網站上顯示灰度圖像到彩色圖像的漸變更畫有兩種實現方式：一、基於IE濾鏡的方案，缺點是沒法實現瀏覽器兼容；二、手動建立彩色圖像的灰度版本。如今，利用HTML5的Canvas畫布，咱們能夠高效簡單的實現此動畫效果。

　　將鼠標放在左邊的圖片上，圖片顏色將從灰度漸變到彩色，一切就在眼前鮮活起來。

　　核心的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 Javascript庫或者原生Javascript檢測當前瀏覽器是否支持，並提供替代性的解決方案：

if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext

　　$(document).ready(backupFunc);

}

　　目前主要瀏覽器的新版本都提供Canvas標籤的支持：

　　五、HTML5的不足

　　目前HTML5還有哪些不足之處？

　　一、安全：像以前Firefox 4的Web Socket和透明代理的實現存在嚴重安全問題，同時Web Storage、Web Socket這樣的功能很容易被黑客利用，來盜取用戶的信息和資料，另外HTTP的機制致使了Web應用安全性有所欠缺，這將在很長的時間內成爲問題。

　　二、性能：某些平臺上的引擎問題致使HTML5性能低下。同時在不加入GPU加速的狀況下，HTML5處理複雜音視頻、動畫的性能不盡如人意。

　　三、完善性：HTML5還在成熟和發展中，像以前曾經支持的Web SQL Database，W3C已經決定再也不維護。許多特性各瀏覽器的支持程度也不同，而地理定位API在國內的前途還不清晰。

　　四、技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像Web Worker、Web Socket、Web Storage等新特性要求對於後臺的技術須要有必定的瞭解，甚至須要深刻了解其後面原理和邏輯，而Canvas要求視覺和圖像算法的一些知識。傳統的前端開發者須要掌握更多算法、視覺、後臺甚至瀏覽器原理的知識，機遇的同時也是巨大挑戰。

　　六、總結

　　上面的大多數不足是HTML5發展過程的中間狀態致使的，從長期來看，瀏覽器廠商的支持、移動互聯網的蓬勃發展使得HTML5的前景一片光明，開發者對此必需要要有清楚的認識和長遠的目光，提早作好技術儲備。

　　對於HTML5，我認爲不只要了解技術細節，還要從根本上理解HTML5的架構，從更高的層面上理解它的深層次含義，它的設計理念，你會發現它的架構之美，對於我的架構設計能力和境界提高有很大幫助。

　　Web應用程序和移動互聯網是大勢所趨，IE6終將消亡，Web和瀏覽器標準終將統一，HTML5就是道之所藏、美之所在，讓咱們一塊兒迎接和擁抱HTML5的到來！