html5设置清单,HTML5的代码清单

HTML5 有很多令人心动的特性和新功能，这里罗列了一些HTML5新特性的示例代码。包含使用 video 标签播放动画、使用 audio 标签播放音频、使用 Canvas 标签绘制图形、取得当前的位置、将大量的数据保存在客户端、form 的强化

一、HTML5新特性

强化了Web网页的表现性能，增加了本地数据库等 Web 应用的功能，以及图像操作等。

HTML5 在图像上引入了 Canvas 标签，通过 Canvas，用户可以动态生成各种图形图像、图表以及动画，而不再依赖于 Flash、silverlight 等插件了。

HTML5 在地理位置操作上引入了 Geolocation API，其特点在于 ：

本身不去获取用户的位置，而是通过第三方接口来获取，例如 IP、GPS、WIFI 等方式。

用户可以随时开启和关闭，在被程序调用时也会首先征得用户同意，保证了用户的隐私。

HTML5 还在数据储存上增加了本地数据库，可以使用 WebSQL 来储存数据，并且引入了 web storage API 实现了离线缓存功能，以此替代了 cookies，使得数据保存空间更

大、更安全。

二、HTML5新特性代码清单

2.1 使用 video 标签播放动画

/*这段代码可以实现播放动画功能*/

无法播放动画。 推荐环境请看这里。

2.2 使用 audio 标签播放音频

/*这段代码可以实现音频播放功能*/

无法播放音频。 推荐环境请看这里。

2.3 使用 Canvas 标签绘制图形

使用 Canvas 标签，只需要向 HTML5 里添加 Canvas 元素即可，代码如下 ：

另外，Canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript

内部完成。使用案例如下：

案例一：

/*这段代码可以绘制一个矩形*/

// 获取 context 对象

var canvas = document.getElementById('canvas');

if(canvas.getContext){

var context = canvas.getContext('2d');

// 设置颜色

context.fillStyle = 'rgb(255,0,0)';

// 从坐标 (20,30) 开始，画一个 64×36 大小的矩形

context.fillRect(20,30,64,36);

}

案例二:

/*这段代码可以须在 JavaScript 内部实现绘制一个矩形*/

onload = function() {

draw();

};

function draw() {

/* 使用 id 来寻找 Canvas 元素 */

var canvas = document.getElementById('canvassample');

/* 验证 Canvas 元素是否存在，以及浏览器是否支持 Canvas 元素 */

if ( ! canvas || ! canvas.getContext ) return false; /* 创建 context 对象 */

var ctx = canvas.getContext('2d');

/* 画一个红色矩形 */

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

}

2.4 轻松取得当前的位置

/*这段代码可以获取当前位置的纬度和经度*/

window.addEventListener('load'. function () {

// 判断可否使用 geolocation

if(navigator.geolocation){

// 定期获取所在地

navigator.geolocation.watchPosition(update);

}

}, false);

// 取得位置并表示

function update(position){

// 纬度

var lat = position.coords.latitude;

// 经度

var lng = position.coords.longitude;

// 把纬度和经度显示出来

document.write(' 纬度 ：'+lat+'，经度 ：'+lng);

}

2.5 将大量的数据保存在客户端

/*这段代码中的 JavaScript 使用 LocalStorage 来保存大量的数据*/

// 用 localStorage 来保存数据

localStorage.key = ' 想要保存的值 ';

// 将 localStorage 中的值取出来

var hoge = localStorage.key;

//“想要保存的值”在页面上显示

document.write(hoge);

2.6 form 的强化

/*这段代码是form 的几个比较常用的功能*/

三、致谢

感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦

作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！