HTML5之美

作者: 蔣宇捷發布時間: 2013-02-01 15:58 閱讀: 17598 次推薦: 90 原文鏈接 [收藏]

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

　　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>

　　顯示的文本如下：

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

　　有趣的是在IE、Firefox或Opera中復制粘貼上面的文本到編輯器中，會顯示下面的文本，這是因為<rp>標簽的特殊作用：允許在不支持Ruby標簽的瀏覽器中優雅的降級，同時支持非格式化的復制和粘貼。

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

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

　　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等新屬性，它們簡單到根據名字就可以揣測出用途。下面是效果圖。

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

　　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畫布，我們可以高效簡單的實現此動畫效果。

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

　　核心的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標簽的支持：

　　5、HTML5的不足

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

　　1、安全：像之前Firefox 4的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的到來！

標簽：HTML5