HTML5之美一 --- 轉載

時間 2019-11-17

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

原文原文鏈接

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

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

　　一、語義之美前端

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

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

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

　　二、人性之美安全

　　HTML5設計理念中的通用訪問體現了人性化之美。通用訪問包括可訪問性、媒體中立和國際化支持三個概念。可訪問性考慮了對殘障用戶的支持，媒體中立爲全部的平臺和終端上（例如Android和iPhone的平臺上）創建統一標準；而國際化的支持體如今不一樣的語言和書寫習慣上。ruby

　　就像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的到來！

原文網址：http://blog.csdn.net/hfahe/article/details/6554925