`
charrysong
  • 浏览: 48926 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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进行页面布局的方式相比，这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例：(运行代码时请使用支持HTML5浏览器)

Html代码运行
  1. <!DOCTYPE html>    
  2.   
  3. <html>    
  4.   
  5. <head>  
  6. <meta charset="utf8">  
  7. <title>HTML5</title>  
  8. <link rel="stylesheet" href="html5.css" mce_href="html5.css">  
  9. </head>  
  10. <header>  
  11. <h1>Title</h1>  
  12. <h2>Subtitle</h2>  
  13. </header>  
  14. <aside>  
  15. <nav>  
  16. <h2>Nav1</h2>  
  17. <ul>  
  18. <li>Link1</li>  
  19. <li>Link2</li>  
  20. </ul>  
  21. </nav>  
  22. <nav>  
  23. <h2>Nav2</h2>  
  24. <ul>  
  25. <li>Link3</li>  
  26. <li>Link4</li>  
  27. </ul>  
  28. </nav>  
  29. </aside>  
  30. <article>  
  31. <header>  
  32. <hgroup>  
  33. <h1>HTML5 is beautiful</h1>  
  34. <h2>Semantic, Natural, Simple and Useful</h2>  
  35. </hgroup>  
  36. </header>  
  37. <section>  
  38. <h2>Semantic</h2>  
  39. <p>HTML5 is Semantic.</p>  
  40. </section>  
  41. <section>  
  42. <h2>Natural</h2>  
  43. <p>HTML5 is Natural.</p>  
  44. </section>  
  45. </atricle>  
  46. <footer>  
  47. <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>  
  48. </footer>  
  49. </html>    
<!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>

相当简单和清晰，我可以不添加任何注释，人和机器都明白它所要构建的结构和内容。


    目前主要浏览器的新版本都支持HTML5语义化标签（下图从左到右依次为IE、Chrome、Firefox、Opera、Safari、QQ浏览器5）。

 

2、人性之美

    HTML5设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持，媒体中立为所有的平台和终端上（例如Android和iPhone的平台上）建立统一标准；而国际化的支持体现在不同的语言和书写习惯上。

    就像CSS3中对国际化的支持体现在padding-start, padding-end（在Chrome新版本的设置中心中可以看到它的应用）等新属性一样，HTML5引入了Ruby标签。Ruby标签允许为一个或者多个文本添加附加注释（其命名来源于Ruby字符），例如下面的代码：(运行代码时请使用支持<b><span style="color: #b22222">HTML5浏览器</span></b>)

Html代码运行
  1. <p>Hello,   
  2.   
  3. <ruby>  
  4. <rb>HTML5</rb>  
  5. <rp> (</rp>  
  6. <rt>Hyper Text Mark-up Language 5</rt>  
  7. <rp>) </rp>  
  8. </ruby>  
  9. </p>   
<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表单的示例：

Html代码
  1. <form>  
  2. <p>  
  3. <label for="email">电子邮箱：</label>  
  4. <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">  
  5. </p>  
  6. <p>  
  7. <label for="username">用户名：</label>  
  8. <input type="text" pattern="^\w{6,12}$" required name="username" placeholder="6到12位的英文字符">  
  9. <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5" name="username-search" id="username-search">  
  10. </p>  
  11. <p>  
  12. <label for="username-search">生日：</label>  
  13. <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">  
  14. </p>  
  15. <p>  
  16. <label for="blog">博客地址：</label>  
  17. <input type="url" name="blog" placeholder="您的博客地址" id="blog">  
  18. </p>  
  19. <p>  
  20. <label for="mobile">手机：</label>  
  21. <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">  
  22. </p>  
  23. <p>  
  24. <label id="label-working-year" for="working-year">工作年限：</label>  
  25. <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">  
  26. </p>  
  27. <p>  
  28. <label for="age">年龄：</label>  
  29. <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">  
  30. </p>  
  31. <p>  
  32. <label for="avatar">头像：</label>  
  33. <input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="点击选择头像">  
  34. </p>  
  35. </form>   
<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代码如下：

Javascript代码
  1. // 加载时就进行处理   
  2.   
  3. $(window).load(function(){   
  4. var img = $('#color-img');   
  5. // 复制图像   
  6. img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);   
  7. img.attr('src', grayscale(img.attr('src')));   
  8.   
  9. // 图像的淡入   
  10.   
  11. $('#color-img').mouseover(function(){   
  12. $(this).stop().animate({opacity: 1}, 1000);   
  13. })   
  14.   
  15. // 图像的淡出   
  16.   
  17. $('.gray-img').mouseout(function(){   
  18.   
  19. $(this).stop().animate({opacity: 0}, 1000);   
  20.   
  21. });   
  22.   
  23. });   
  24.   
  25.   
  26.   
  27. // 创建灰度版的图像   
  28.   
  29. function grayscale(src) {   
  30.   
  31. // 取得canvas元素及其绘图上下文   
  32.   
  33. var canvas = document.createElement('canvas');   
  34.   
  35. var ctx = canvas.getContext('2d');   
  36.   
  37. var imgObj = new Image();   
  38.   
  39. imgObj.src = src;   
  40.   
  41. canvas.width = imgObj.width;   
  42.   
  43. canvas.height = imgObj.height;   
  44.   
  45.   
  46.   
  47. ctx.drawImage(imgObj, 0, 0); // 绘制一副图像   
  48.   
  49. var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据   
  50.   
  51. for(var x = 0; x < imgPixels.height; x++){   
  52.   
  53. for(var y = 0; y < imgPixels.width; y++){   
  54.   
  55. var i = (x * 4) * imgPixels.width + y * 4;   
  56.   
  57. var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值   
  58.   
  59. imgPixels.data[i] = avg; // rgb中的r   
  60.   
  61. imgPixels.data[i + 1] = avg; // rgb中的g   
  62.   
  63. imgPixels.data[i + 2] = avg; // rgb中的b   
  64.   
  65. // i + 3是alpha通道，我们现在不需要   
  66.   
  67. }   
  68.   
  69. }   
  70.   
  71. ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);   
  72.   
  73. return canvas.toDataURL();   
  74.   
  75. }  
// 加载时就进行处理

$(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检测当前浏览器是否支持，并提供替代性的解决方案：

Javascript代码
  1. if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext      
  2.          $(document).ready(backupFunc);      
  3. }  
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的到来！

转自：http://www.ok22.org/art_detail.aspx?id=162

分享到：
| 如何在[IE9] 开启IE9的GPU硬件加速
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5代码实例

    很好的HTML5实例，相信会对初学者有很大的帮助，同时大家也可以看看外国人的网站怎么做的

    html5 简单实例源代码

    html5 简单实例源代码

    html5网站实例

    html实现一个网站的布局、登录、内容

    html5项目例子

    html5开发的项目例子html5开发的项目例子

    html5简单实例

    一个简单的html5实例，jquery mobile

    html5 基础实例

    html5 实例，对刚开始学习html5的同学有非常大的帮助

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔，内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点，几乎每个知识点都将配一个精心...

    精妙无比 8款HTML5动画实例及

    今天要给大家带来8款精妙无比的HTML5动画实例，每一个动画演示都有源代码提供下载，非常方便大家学习HTML5的相关知识，一起来看看吧。 1、基于HTML5 Canvas的图表插件Chart.js chart.js是一款基于HTML5 Canvas的...

    html5 画布例子

    html5 canvas画布例子，一个连线的游戏

    一个简单的HTML5小例子

    对于一个初学者来说，最消耗时间的地方就是基础，因此希望通过此例子的一些注释讲解能让初学者更快的了解html5

    HTML5学习实例打包

    网上搜集的关于HTML5的各种实例，有特效也有游戏，学习HTML5的不要错过。

    html5一些例子

    关于html5的一些设计,可以拿来研究研究，效果很好，但是html5不支持在ie6

    html5 实例详解

    HTML5 实例详解

    HTMl5简单例子

    HTMl5兴起之后,其许多绚丽的效果让好多网站开发者欣喜.本例是基于HTMl5的基础做了一些示例,展示文稿也采用网页展示,其中大量用了Jquery动画,不足之处,...由于HTML5大多数浏览器支持的还不是很好,建议使用chrome浏览器.

    html5画布应用实例

    html5 canvas应用实例 简单的示例页面 画点，画线，画圆，都有，可以看看

    html5离线存储实例

    html5离线存储实例，两个简单的小实例

    html经典布局实例

    html经典布局实例 html经典布局实例

    html5和css3实例教程pdf及源代码

    《html5和css3实例教程》pdf电子版及其该书源代码。《html5和css3实例教程》pdf电子版及其该书源代码。

    HTML5+CSS3网页设计实例教程实例源代码.rar

    HTML5+CSS3网页设计实例教程实例源代码

    Web存储 HTML5 实例

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 ...HTML5 使用 JavaScript 来存储和访问数据。

Magicbox
Global site tag (gtag.js) - Google Analytics