用HTML5的十大原因,新形式带来新体验网页前端/web开发工程师

/ 福州大学环境科学与工程学院网页前端/web开发工程师 / 2017-03-18

    HTML5,用HTML5的十大原因

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。  

  

HTML5是web开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势。其实HTML5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。


目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处。随着更多这样的文章,以及Apple的支持, Adobe围绕HTML5的产品开发,以及移动flash的死亡,如此多网站的支持,对那些仍旧没有或者不想接受它的人说一些话。


我认为主要得原因是,它看起来像一个神秘的东西。很多感觉它像喷气背包或者飞行汽车。一个未经验证的非凡想法但是并不实际。但是事实上现在已近非常的实际了。

为了解密HTML5并且帮助顽固的开发设计人员,我这里写了列出了使用HTML5的十大原因,希望对大家有帮助!


第十大原因:易用性


两个原因使得使用HTML5创建网站更加简单:语义上及其ARIA。新的HTML标签像<header>, <footer>,<nav>,<section>, <aside>等等,使得阅读者更加容易去访问内容。在以前,即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。


ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“,通过角色属性来创建重要的页面地形例如,header,footer,navigation或者aritcle很有必要。这一点曾经被忽略掉了并且没有被广泛使用,因为事实上并不验证。然而,HTML5将会验证这样属性。


同时,HTML5将会内建这些角色并且无法不覆盖。更多的HTML5和ARIA讨论,请大家查看这里。


第九大原因:Doctype


没错,就是doctype,没有更多内容了。是不是非常简答?不需要拷贝粘贴一堆无法理解的代码,也没有多余的head标签。最大的好消息在于,除了简单,它能在每一个浏览器中正常工作即使是名声狼藉的IE6。


第八大原因:视频和音频支持


忘了flash和其它第三方应用吧,让你的视频和音频通过HTML5标签<video>和<audio>来访问资源。正确播放媒体一直都是一个非常可怕的事情,你需要使用<embed>和<object>标签,并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂,大堆得令人迷惑的代码。


而且HTML5视频和音频标签基本将他们视为图片:<video src=”"/>。但是其它参数例如宽度和高度或者自动播放呢?不必担心,只需要像其它HTML标签一样定义:<video src=”url” width=”640px” height=”380px” autoplay/>。


实际上这个过程非常简单,然而我们的老浏览器可能并不喜欢我们的HTML5,你需要添加更多代码来让他们正确工作。但是这个代码还是比<embed>和<object>来的简单的多。   


第七大原因:更清晰的代码


如果你对于简答,优雅,容易阅读的代码有所偏好的话,HTML5绝对是一个为你量身定做的东西。HTML5允许你写出简单清晰富于描述的代码。符合语义学的代码允许你分开样式和内容。看看这个典型的简单拥有导航的heaer代码:


<div id="header"> <h1>Header Text</h1> <div id="nav">  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </div></div>


是不是很简单?但是使用HTML5后会使得代码更加简单并且富有含义:


<header> <h1>Header Text</h1> <nav>  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </nav></header>


使用HTML5你可以通过使用语义学的HTML header标签描述内容来最后解决你的div及其class定义问题。 以前你需要大量的使用div来定义每一个页面内容区域,但是使用新的<section>,<article>,<header>,<footer>,<aside>和<nav>标签,需要你让你的代码更加清晰易于阅读。


第六大原因:更好的互动


我们都喜欢更好的互动,我们都喜欢对于用户有反馈的动态网站,用户可以享受互动的过程。输入<canvas>,HTML5的画图标签允许你做更多的互动和动画,就像我们使用Flash达到的效果。


除了<canvas>,HTML5同样也拥有很多API允许你创建更加好的用户体验并且更加动态的web应用程序。 这里有一个列表:

    Drag and Drop (DnD)

    Offline storage database

    Browser history management

    document editing

    Timed media playback


第五大原因:更聪明的存储


HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用因为支持多个windows存储,它拥有更好的安全和性能,即使浏览器关闭后也可以保存。


因为它是个客户端的数据库,你不用担心用户删除任何cookie,并且所有主流浏览器都支持。


本地存储对于很多情况来说都不错, 它是HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例    如:保存用户信息,缓存数据,加载用户上一次的应用状态。


第四大原因: 遗留及其跨浏览器支持


你的现代流行浏览器都支持HTML5(Chrome,Firefox,Safari,IE9和Opera),并且创建了HTML5 doctype这样所有的浏览器,即使非常老非常令人厌恶浏览器像IE6都可以使用。但是因为老的浏览器能够识别doctype并不意味它可以处理HTML5标签和功能。


幸运的是,HTML5已经使得开发更加简单了,更多支持更多浏览器,这样老的IE浏览器可以通过添加javascript代码来使用新的元素:

<!--[if lt IE 9]> <script src="<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">


公众号,微信

汇鱼网海峡创乐汇
汇鱼网海峡创乐汇