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 标签播放动画
/*这段代码可以实现播放动画功能*/
<video width="640" height="360" preload="auto" poster="hoge.png" controls autoplay>
<!-- 针对播放 webm 格式动画的浏览器 -->
<source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'>
<!-- 针对播放 ogv 格式动画的浏览器 ->
<source src="hoge.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- 针对播放 mp4 格式动画的浏览器 -->
<source src="hoge.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- 当浏览器无法使用 video 标签的时候 -->
<p> 无法播放动画。<a href="hoge.html"> 推荐环境请看这里。</a></p>
</video>
2.2 使用 audio 标签播放音频
/*这段代码可以实现音频播放功能*/
<audio controls loop>
<!-- 针对播放 ogg 格式音频的浏览器 -->
<source src="hoge.ogg">
<!-- 针对播放 wav 格式音频的浏览器 -->
<source src="hoge.wav">
<!-- 针对播放 mp3 格式音频的浏览器 -->
<source src="hoge.mp3">
<!-- 当浏览器无法使用 audio 标签的时候 -->
<p> 无法播放音频。<a href="hoge.html"> 推荐环境请看这里。</a></p>
</audio>
2.3 使用 Canvas 标签绘制图形
使用 Canvas 标签，只需要向 HTML5 里添加 Canvas 元素即可，代码如下 ：
<canvas id="myCanvas" width="200" height="100"></canvas>
另外，Canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript
内部完成。使用案例如下：
案例一：
/*这段代码可以绘制一个矩形*/
<canvas id="canvas" width="640" height="360"></canvas>
<script>
// 获取 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);
}
</script>
案例二:
/*这段代码可以须在 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 轻松取得当前的位置
/*这段代码可以获取当前位置的纬度和经度*/
<script>
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);
}
</script>
2.5 将大量的数据保存在客户端
/*这段代码中的 JavaScript 使用 LocalStorage 来保存大量的数据*/
<script>
// 用 localStorage 来保存数据
localStorage.key = ' 想要保存的值 ';
// 将 localStorage 中的值取出来
var hoge = localStorage.key;
//“想要保存的值”在页面上显示
document.write(hoge);
</script>
2.6 form 的强化
/*这段代码是form 的几个比较常用的功能*/
<!-- 验证用户输入格式是否正确，只需要改变 type 的类型即可 -->
<input name="email" type="email">
<!-- 对于必须输入的项目，只需给 input 标签加上 require 属性即可 -->
<input name="text" type="text" require>
<!-- 当失去焦点的时候给出相应的提示，只需给 input 标签加上 placeholder 属性即可 -->
<input name="text" type="text" placeholder=" 例 ：姓名 ">
三、致谢
感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦
作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！
网友评论