现在的位置: 首页html5>正文
HTML5新特性
2013年10月06日 html5 暂无评论 ⁄ 被围观 5,540 view+

目前,对 HTML5 支持最好的是 Chrome,Safari 次之,Firefox 和 Opera 旗鼓相当,IE从IE9终于开始拥抱标准。

鉴于这种情况,假如你想使用Html5创建一个先锋体验式站点,现在的 HTML5 可以让你实现,假如你想大规模应用于实际项目,现在还为时过早。

主流浏览器对HTML5 图形和内嵌内容支持情况:

主流浏览器对HTML5 Web 应用程序的支持情况:

新的Doctype

只需要使用

<!DOCTYPE html>

尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染,再也不用使用长长的永远无法记住的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

script和link不再需要type

不再需要type了,以后你可以这样写了。

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

HTML5移除的元素

Html语言的作用是标记文本的结构,而非用于网页表现,所以用于网页表现的front,center等可以用CSS达到同样目的的元素被移除,其他被移除的元素还有:font, center, strike, big, s, u, acronym, applet, dir等。此外还有一些无用或者不被使用的元素属性被移除,例如link的traget属性,这个属性几乎不被浏览器支持。还有script的language属性,html4.01推荐使用type属性替代language属性,该属性将被废弃使用,所以language属性没有存在的价值,还有其他的一些属性例如link和a元素的rev属性,body元素的alink,link,text和vlink属性等因为类似的原因被移除。

HTML5的基本布局(语义上的标记)

HTML是用来描述网页的一种语言,它是一种标记语言,标记语言就是一套标记标签,比如用来描述一段文字是标题的h1,标记一个图像的image等。html4中使用没有任何语义的div用于内容分块,所以html4的网页基本布局是这样的,许多div加上用于命名区块的class或者id。

<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

在HTML5中,这种情况将被改变,html5新增了若干个明确语义化的标签,在html5中,<div id="header">将会被简洁的header代替如下:

<article>
    <header></header>
    <section></section>
    <section></section>
    <aside></aside>
    <footer></footer>
</article>

其中的section和article标签值得注意,section标签用来分组相类似的信息,而article标签则应该是用来放置诸如一篇文章或是博客一类的信息,你可以在artile中嵌入header,section,footer等内容。article标签,正如它的名称所暗示的那样,提供了一个完整的信息包。相比之下,section标签包含的是有关联的信息,但这些信息自身不能被放置到不同的上下文中,因为这样的话其所代表的含义就会丢失。
一个普通的Html 5页面结构会如下所示:

<!DOCTYPE html>
<html>
    <title>标题</title>
    <body>
        <header></header>
        <nav>导航</nav>
        <article>
            <section>区块</section>
        </article>
        <aside>侧边栏</aside>
        <footer>页脚</footer>
    </body>
</html>

HTML5对表单的支持

HTML5新增了多个控件类型,如输入网址的url类型,输入电子邮箱地址的email类型,用于输入日期的date类型,更有用于输入颜色的color类型等等。更为神奇的是这些类型还内建表单验证,如required属性就说明该表项不能为空,max属性提供了该表项输入允许的最大值,当然在html4中这些功能也可以通过javascript来实现,但是的内建在html5中的表单验证优越性不言而喻。需要注意的是,现在Html5的输入类型还没有被所有浏览器所支持。

测试代码:

<form>
    Email:<input type="email" required />
    Number:<input type="number" max="10" />
    Date :<input type="date">
    File:<input type="file" accept="image/png" />
    <input type="submit">
</form>

再也不用为输入验证头痛了… 浏览器不支持怎么办?

input元素新曾的属性

1)placeholder 还记得我们如何用javascript实现文本框或文本域中的提示信息吗? 以后不需要了, html5直接就有了。

<input id="name" type="text" placeholder="请输入您的用户名" size="26" />

2)autofocus 自动获得焦点

<input id="name" type="text" placeholder="请输入您的用户名" size="26" autofocus>

3)required 该输入域不能为空

<input id="name" type="text" placeholder="请输入您的用户名" size="26" autofocus required>

4)pattern 用于验证该输入域的正则表达式

<input type="text" pattern="[A-Z]{3}">

5)min max step 用于number, date等类型的限定. max属性规定输入所允许的最大值, min规定输入允许的最小值, step规定数字间隔(step=“2”, 则合法的数是 …, -2,0,2,4, …)

HTML5中的Media

HTML5 的另一大特点就是不借助其他插件就可播放视频和音频文件,在网页中添加如下代码就可以用一个宽度为320像素、高度为240像素的带控制条的浏览器内置播放器来播放”movie.mp4″视频文件,而不再需要使用Adobe Flash播放器。

<video src="movie.mp4" width="320" height="240" controls="controls">
    Your browser does not support the video tag.
</video>

当然这种直接使用视频源文件的方法会牵扯到视频文件格式的版权问题,所以各主流浏览器都做不到对所有的视频格式都完全支持,这时就需要使用如下的代码来实现视频播放:

<video>
    <source src="movie.mp4">
    <source src="movie.ogv">
    <object data="movie.swf">
        <a href="movie.mp4">Download</a>
    </object>
</video>

video之间插入的内容是供不支持 video 元素的浏览器显示的,由于视频格式的版权问题,不同的浏览器支持不同的视频格式,所以video 元素含有允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。在上面的那个程序里:

如果浏览器支持video元素,也支持H264(mp4格式),那么就使用第一个视频;

如果浏览器支持video元素,不支持H264(mp4格式)但支持Ogg,那么用第二个视频;

如果浏览器不支持video元素,那么就播放Flash;

如果浏览器不支持video元素,也不支持Flash,那么就给出了下载链接,这下就该没有问题了吧。

不得不提,html5的支持媒体播放的特性会冲击adobe flash在网络媒体中的地位,Adobe公司已经深刻意识到了这个问题,更多信息参见关于Adobe最新的Flash/HTML5策略的问答

终于可以不用Flash来播放了…

<video src=movie.ogv width=320 height=240 controls>
</video>

详细请点击 这里

HTML5的动画元素Canvas

HTML5 的 canvas 元素可以使用 JavaScript 直接在网页上绘制图像。在canvas中,画布是一个很重要的概念,画布是一个矩形区域,利用canvas可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素十分简单,只需要向 HTML5 页面添加 canvas 元素,规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

然后通过 JavaScript 来绘制,canvas 元素本身是没有绘图能力的,因此所有的绘制工作必须在 JavaScript 内部完成:

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

JavaScript 使用 id 来寻找 canvas 元素:

var c=document.getElementById("myCanvas");

然后,创建 context 对象:

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

illStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布从左上角开始 (0,0)绘制一个 150×75 的矩形,很简单吧。上面的例子是最简单的例子,canvas是十分强大的,现在大多数html5的Demon页面都是在展示html5强大的动画能力,通过canvas完全可以实现与flash动画相媲美的页面,下面的几个网页供大家惊叹:

HTML5的Drag&Drop

HTML5为元素新增了用于拖拽的属性draggable,这个属性决定了元素是否能被拖拽, 如果draggable=”true”,则元素可被拖拽,否则只能选择元素的文本。下面几行简单的代码可以简单的说明Html5的Drag&Drop特性:

<section>
    <p draggable="true" ondragstart="dragstartHandler(event)">
    Drag me!Drag me!!</p>
    <p draggable="false">Don’t drag me!!</p>
</section>

Section区块中包含两行文本,第一行文本的draggable = true,即可拖拽的,且声明了发生dragstart事件是调用的函数;第二行文本draggable = false,即不可拖拽的。下面的script实现了发生dragstart事件时调用的函数,显示一个提示框。

function dragstartHandler(e) {
        alert('dragstart');
}

运行这段代码可以发现,当拖拽第一行文本时会弹出一个提示框,而拖拽第二行文本时除了复制文本以外没有任何反应,这是因为当拖拽第一行文本时会触发ondragstart事件,从而调用相应的处理函数产生一个提示框。同样的定义其他拖拽事件如ondragenter、ondragover、ondragover、ondrop等的动作函数就可以完成一个完整的拖拽动作,实现想要实现的目的。

下面是一个网络上的demon供大家尝鲜:把本地文件直接拖拽上传

HTML5的Application Cache

现在,web应用的火爆已经是不折不扣的现实,并且相对传统的应用,web应用不需要安装,所占空间小的特性使其具备传统软件应用所不具备的优势,然而,目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上,汽车上,火车上,有很多地方都无法被网络信号所覆盖,因此web应用也就无法使用。

HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存,会生成一个清单文件(manifest file),这个清单文件实质就是一系列的URL列表文件,这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。

一个Mainfest file实例:

–  CACHE MANIFEST
   /demo/test/style.css
   /demo/test/jquery.min.js
   /demo/test/test.html

当使用离线应用时,应用会引入这一清单文件,浏览器读取这一文件,下载相应的文件,并将其缓存到本地。使得这些web应用能够脱离网络使用,而用户在离线时的更改也同样会映射到清单文件中,并在重新连线之后将更改返回应用,工作方式与我们现在所使用的网盘有着异曲同工之处。

HTML5的Web Storage

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的数据则可以使用Web Storage。

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

下面一段代码同时包含sessionStorage和localStorage用于统计页面的访问次数:

if (sessionStorage.pagecount) {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
} else {
    sessionStorage.pagecount=1;
}
document.write("Visits "+ sessionStorage.pagecount + " time(s).");
if (localStorage.pagecount) {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
    localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");

多次刷新页面locaStorage.html可以发现,两种计数每刷新一次就增加1,如果把页面关闭然后再打开,那么sessionStorage计数将会从0开始重新计数,而localStorage仍然继续上次的计数。这正是因为sessionStorage仅仅存储本次会话中的数据,而localStorage则会持久的存储数据。
详情请看这里:http://prisoner.github.com/2011/03/05/html5_webstorage_api
.html

HTML5的Web Worker

在后台运行脚本而不阻塞用户交互. 详细请点击这里

HTML5的PostMessage

跨文档消息传输这里

HTML5的一些效果

Rome(很精美的html5动画页面)纽约时报Html5 Readiness

HTML5的参考资料

Html5中文网Html5研究小组W3C Html5教程

给我留言

留言无头像?


×
腾讯微博