HTML5新特性

来源：互联网发布：华为软件开发编辑：程序博客网时间：2024/06/03 21:49

HTML5 是下一代的HTML,将成为 HTML、XHTML 以及 HTML DOM 的新标准。主要是关于图像，位置，存储，多任务等功能的增加，主要有以下特性：

(1)绘画 canvas;

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>元素上绘图主要有三步：
获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
调用CanvasRenderingContext2D对象进行绘图。

<!DOCTYPE html><html><head>    <title></title></head><body><canvas id="myCanvas"></canvas><script type="text/javascript">    var canvas=document.getElementById('myCanvas');    var ctx=canvas.getContext('2d');    ctx.fillStyle='#FF0000';    ctx.fillRect(0,0,80,100);</script></body></html>

效果如下：

(2)用于媒介回放的 video 和 audio 元素;

在HTML5中，新增了两个元素——video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不需要再使用其他插件了，只要使用支持HTML5的浏览器就可以了，同时在开发的时候也不再需要书写复杂的object元素和embed元素了。

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用，存储在浏览器端。

<script type="text/javascript">    localStorage.lastname="Smith";    document.write(localStorage.lastname);</script>

(4)sessionStorage 的数据在浏览器关闭后自动删除;

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

<script type="text/javascript">    sessionStorage.lastname="Smith";    document.write(sessionStorage.lastname);</script>

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

<header>：描述了文档的头部区域，于定义内容的介绍展示区域
<nav>：定义导航链接的部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常包含了一组内容及其标题。
<article>：定义独立的内容。
<aside>：定义页面主区域内容之外的内容（比如侧边栏）。
<figure>：标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>：定义 <figure> 元素的标题。
<footer>：述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

在一个网页中，这些新的语义标签元素位置如下图所示：

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure{    display: block;}

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的html5 elements.可以使用Html5 Shiv来解决这个问题：

<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]-->

(6)表单控件，date、time、email、number，url、search;

date：日期控件，选择日期

time：时间控件，选择时间

email：邮件地址格式化控件

number：数字控件，只能输入数字

URL：网址控件

search：搜索控件，输入框会有删除图标
(7)新的技术webworker, websocket, Geolocation;

webworker：

HTML5引入了一个工作线程（webWorker）的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的响应。
简而言之，就是允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。
从而，可以用webWorker来处理一些比较耗时的计算。

websocket：

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端，双方建立socket通信。

Geolocation：

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

<!DOCTYPE html><html><head>    <title></title>    <!--[if lt IE 9]>    <script src="html5shiv.js"></script>    <![endif]--></head><body><div id="demo"></div><script>    var x=document.getElementById("demo");    getLocation();    function getLocation()    {        if (navigator.geolocation)        {            navigator.geolocation.getCurrentPosition(showPosition);        }        else{x.innerHTML="Geolocation is not supported by this browser.";}    }    function showPosition(position)    {        x.innerHTML="Latitude: " + position.coords.latitude +                "<br />Longitude: " + position.coords.longitude;    }</script></body></html>

结果如图所示：

阅读全文

0 0