html5的新特性

HTML5想必大家都很熟悉了，因为太多的媒体在讨论这一技术。然而，你能准确地说出HTML5带来了哪些新特性吗？本文总结了HTML5带来的15项你必须知道的新特性。

一起来看下：

1.新的文档类型 (New Doctype)

目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"

在HTML5中，上面那种声明方式将失效。下面是HTML5中的声明方式：

<!DOCTYPE html>

2.脚本和链接无需type (No More Types for Scripts and Links)

在HTML4或XHTML中，你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。

而在HTML5中，你不再需要指定类型属性。因此，代码可以简化如下：

3.语义Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中，你需要用下面的代码来声明“Header”和“Footer”。

在HTML5中，有两个可以替代上述声明的元素，这可以使代码更简洁。

4.Hgroup

在HTML5中，有许多新引入的元素，hgroup就是其中之一。假设我的网站名下面紧跟着一个子标题，我可以用<h1>和<h2>标签来分别定义。然而，这种定义没有说明这两者之间的关系。而且，h2标签的使用会带来更多问题，比如该页面上还有其他标题的时候。

在HTML5中，我们可以用hgroup元素来将它们分组，这样就不会影响文件的大纲。

<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>

5.标记元素 (Mark Element)

你可以把它当做高亮标签。被这个标签修饰的字符串应当和用户当前的行动相关。比如说，当我在某博客中搜索“Open your Mind”时，我可以利用一些JavaScript将出现的词组用<mark>修饰一下。

<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

6.图形元素 (Figure Element)

在HTML4或XHTML中，下面的这些代码被用来修饰图片的注释。

<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>

然而，上述代码没有将文字和图片内在联系起来。因此，HTML5引入了<figure>元素。当和<figcaption>结合起来后，我们可以语义化地将注释和相应的图片联系起来。

<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>

7.重新定义<small> (Small Element redefined)

在HTML4或XHTML中，<small>元素已经存在。然而，却没有如何正确使用这一元素的完整说明。在HTML5中，<small>被用来定义小字。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>可以正确地诠释这些信息。

8.占位符 (Placeholder)

在HTML4或XHTML中，你需要用JavaScript来给文本框添加占位符。比如，你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。

而在HTML5中，新的“placeholder”就简化了这个问题。

9.必要属性 (Required Attribute)

HTML5中的新属性“required”指定了某一输入是否必需。有两种方法声明这一属性。

当文本框被指定必需时，如果空白的话表格就不能提交。下面是一个如何使用的例子。 <form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> <button type="submit">Go</button> </form>

在上面那个例子中，如果输入内容空且表格被提交，输入框将被高亮显示。

10.Autofocus 属性 (Autofocus Attribute)

同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”或聚焦，默认情况下，我们现在可以利用自动聚焦属性。

11.Audio 支持 (Audio Support)

目前我们需要依靠第三方插件来渲染音频。然而在HTML5中，<audio>元素被引进来了。

<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio>

当使用<audio>元素时请记得包含两种音频格式。FireFox想要.ogg格式的文件，而Webkit浏览器则需要.mp3格式的。和往常一样，IE是不支持的，且Opera 10及以下版本只支持.wav

格式。

12.Video 支持 (Video Support)

HTML5中不仅有<audio>元素，而且还有<video>。然而，和<audio>类似，HTML5中并没有指定视频解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式的视频，Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，指定HTML5的视频时，你必须提供这两种格式。

<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>

13.视频预载 (Preload attribute in Videos element)

当用户访问页面时这一属性使得视频得以预载。为了实现这个功能，可以在<video>元素中加上preload=”preload”或者只是preload。

14.显示控制条 (Display Controls)

如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。

15.正规表达式 (Regular Expressions)

在HTML4或XHTML中，你需要用一些正规表达式来验证特定的文本。而HTML5中新的pattern属性让我们能够在标签处直接插入一个正规表达式。

<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>

结论

事实上，还有很多新元素和特性，上面提到的只是一些我认为网站开发中常用的，剩下的就由你们自己去摸索啦。

第二篇：Html5新特性

HTML5新特性

概述................................................................................................................................. 1

1.新特性................................................................................................................... 1

1.1 语义化标记 ................................................................................................. 1

1.2 表单增强..................................................................................................... 1

1.3无需插件支持的视频/音频 ........................................................................... 2

1.4 画布............................................................................................................ 3

1.5可编辑内容、拖放 ....................................................................................... 4

1.6 稳健的数据存储 .......................................................................................... 4

2 废弃的标签............................................................................................................ 5

3.缺点 ...................................................................................................................... 5

3.烟草集团数据中心与HTML5 .................................................................................... 5

3.1 兼容性 ........................................................................................................ 5

3.2 应用方面..................................................................................................... 5

4 画布报表 ............................................................................................................... 5

4.1 传统报表解决方案....................................................................................... 6

4.2 方案比较..................................................................................................... 6

概述

随着浏览器厂商对互联网浏览器思路的改进，从而诞生了HTML标准的原型，通过这几年的发展HTML标准已经到第五代。近期用HTML5取代Flash或Shockwave的呼声越来越高。虽然HTML5将会对互联网的很多方面做出改进，使网站具备更丰富的功能、让互联网访问变得更加安全和高效。但距离HTML5成为标准还有很长的差距，目前包含IE在内的主流浏览器对HTML5的支持还不是完美，不过值得我们期待的是，新一代的IE9、Chrome 6、Firefox4等浏览器都已经开始全面的扩展对HTML5的支持。

1.新特性

Html5新特性主要体现在: 语义化标记、Form 表单增强功能、视频/音频、画布（Canvas）、可编辑内容、拖放、稳健的数据存储等方便，HTML5其实是关于图像，位置，存储，速度的优化和改进。初步体验感受：简洁、华丽。

1.1 语义化标记

简洁的 DOCTYPE，有意不使用版本，因此文档将会适用所有版本的HTML。简单易记的语言标签，写法上较之前更为简洁。在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。

新增的一些新标签更具语义，不过大多数都是原有标签的替代，提过得额外功能不是很多。

1.2 表单增强

HTML5 为表单提供了几个新的属性、input 类型和标签。例如：color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, 和 url 1

等，使用这些标签将大大简化开发复杂度，比如使用date标签，我们将不再需要利用外包js就可以选择日期。

同时Html自带表单验证功能，可以减少开发者对表单验证功能的代码编写。

Html5新特性

1.3无需插件支持的视频/音频

使用HTML5的 <audio> 和 <video>标签，我们将不再需要使用插件或者工具即可直接播放视频和音频。当然，不同的浏览器提供商对音频/视频格式的也是不同。目前已知格式：音频: ogg (ogg, oga), mp3, wav, AAC 视频: ogg (ogv), H.264 (mp4)。

1.4 画布

HTML5 中最让人兴奋的特性是 <canvas> 那个用来作画的工具。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。本文档中也讲使用画布展示HTML5的这一特性。

Html5新特性

1.5可编辑内容、拖放

使用HTML5你可以在页面的某个地方，允许用户编辑页面，使用该特性之后，你的页面将允许用户编辑、删除、插入内容，并且你可以用 Javascript 来添加保存或应用样式的功能。

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。图片和超链接默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放。

1.6 稳健的数据存储

除了常规的页面存储，HTML5 规范还定义了离线存储规范，当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。这个特性现在被 Firefox 3.5+, Chrome 4.0+, Safari 4.0+ and Mobile Safari 3.1+ 所支持。你可以通过提供一个 manifest 文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个 manifest 版本。它将下载并缓存所有的涉及到的文件，并且当 manifest 相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。

Html5新特性

2 废弃的标签

下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp>。

3.缺点

目前支持HTML5的浏览器为IE9、Firefox 3.5+，IE7与IE8可装载插件支持。20xx年，将会由W3C发布候选推荐版，这个版本的发布就代表着HTML5的规范编写已经完成了。而20xx年推出的计划推荐版，则意味着至少会有两个浏览器会完全的支持HTML5的所有特性。当然，20xx年听起来似乎很遥远，但通过观察现阶段chrome, firefox , safari，IE等浏览器对HTML5的支持程度，可以看出各大浏览器厂商都非常积极。应该不需要到20xx年就会有至少两个浏览器支持HTML5。因此现在关注和讨论HTML5，了解HTML5的新特性，为以后的产品规划并非毫无意义。

3.烟草集团数据中心与HTML5

3.1 兼容性

由于数据中心开发环境为老版本IE浏览器，故如果需要使用HTML5规范，将需要进行整体改造。

例如，HTML5废弃了<frame>标签，经检测，数据中心整体框架也受到影响，需要调整后方能使用

3.2 应用方面

HTML5诸多特征，主要针对整个WEB环境而言。在如数据中心一类的REP系统中，主要注重稳定和效率以及表现形式和运行速度。HTML5提供的画布这一特性，在商业领域主要用来绘制报表等，此特性用在数据中心将较为合适。

4 画布报表

4.1 传统报表解决方案

服务器端生成图表方案，比如通过jfreechart。（目前数据中心使用） ? 使用云计算的方式，比如通过google提供的chart api，可以参见使用

google chart生成动态图；

? 使用flash的免费开源应用，比如fusioncharts，在浏览器端生成图表，

效果可见：/free/demos/

? 使用html5的canvas api在浏览器端生成图表。 ?

其中前3种是通过服务器端生成的，后两者是通过客户端生成的。

4.2 方案比较

? 图表缺乏交互性，比如折线图，鼠标放在某个点上，希望看到该点的值，就做不到；带宽和流量问题，比如通过手机访问，手机是按流量计费的，对服务器端也会有影响，当大规模访问的时候挤占服务器端带宽；服务器端性能，当大规模访问的时候服务器端生成图表性能下降 flash的解决方案，无法在手机浏览器中显示，起码目前情况是这样的，android 2.2版本的设备还很少，iphone是肯定不会支持目前的html5方案，还没有在效果上能超过flash的。但是是趋势，因为

浏览器内置了（除了ie）本地支持，不依赖flash的插件。将来的覆盖终端更多。

基于html5的Rgraph报表方案参见：/

本例基于数据中心框架做了简单的特性展示，点击查看。注意：需要IE9支持。

相关推荐

html5的新特性

第二篇：Html5新特性

专栏推荐