HTML5的代码清单

2019-08-16 本文已影响0人广陵周惊蛰

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=" 例 ：姓名 ">

三、致谢

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

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