首页 > 代码库 > HTML5新特性
HTML5新特性
1、HTML5简介
在之前一直使用的是HTML 4.0标准，而且一直到现在为止，HTML4.0依然作为整个行业的最广泛的使用标准。所谓的HTML5指的就是HTML的第5.0版本，但是对于HTML 5.0标准基本上是让人觉得期待了很久。而且对于HTML5技术与传统的HTML 4最大的差别在于移动端的支持上。例如，在HTML 5之中支持了GPS的取得（可以取得当前移动端的经度和纬度两个信息），那么就可以轻松的实现定位的需要，当然，这一切的操作都必须有一个前提：浏览器要支持。到现在为止一直制约HTML5发展的都已经集中在客户端上，因为有些人不懂的更新。IE纯粹是一个捣乱的，因为微软一直在定义自己的开发标准。在整个HTML 5之中的确包含了许多的新特性：DOM解析的支持、Canvas绘图、Form API、GPS、WEB存储、加强版Ajax、WebSocket。
新特性：
DOM解析的支持
Canvas绘图
FormAPI
GPS
WEB存储
加强版Ajax（不如直接使用jQuery）
WebSocket（更优秀的反向Ajax支持）
如果要想使用HTML5非常容易，只需要在每一个页面的最上面增加以下一段代码即可：
加一句
<!DUCTYPE html>
2、DOM操作新支持
【元素选择器】
DOM操作
最初：
getElementById();
getElementByTagName();
增加
取得单一document.query.Selector();
取得一组document.query.SelectorAll();
范例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>HTML5 Demo</title>
<style type="text/css">
.infocls {background: red ;color: yellow;}
</style>
<script type="text/javascript">
window.onload = function() {
document.querySelector("#msg").setAttribute("class","infocls") ;
}
</script>
</head>
<body>
<span id="msg">淄博你好</span>
</body>
</html>
这种操作与jQuery的功能是一样的，但好像还是jQuery使用更加简短点。
选择一组元素示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>HTML5 Demo</title>
<style type="text/css">
.infocls {background: red ;color: yellow;}
</style>
<script type="text/javascript">
window.onload = function() {
var allElems = document.querySelectorAll("span,div,p") ;
for (var x = 0 ; x < allElems.length ; x ++) {
allElems[x].setAttribute("class","infocls") ;
}
}
</script>
</head>
<body>
<span>淄博</span>
<p>淄博</p>
<div>淄博</div>
<span>淄博</span>
<div>淄博</div>
<p>淄博</p>
</body>
</html>
如果使用jQuery操作，那么此时就可以直接设置了，但是HTML5的DOM操作依然没有脱离掉DOM操作的本质的特点，那么此时必须进行循环的方式才可以完成。而且在此选择器里面可以设置“*”表示权限，或者使用“.样式名称”根据样式选择。
总结HTML 5增强了DOM元素的选择功能，这一点要比传统的DOM操作都容易。
3、利用Canvas绘制图形
在HTML5技术之中如果要想开发游戏，可以使用Canvas去完成。如果要想使用Canvas那么首先应该开辟出一块绘图的空间，也就是说所有需要绘制图形的操作都在此空间完成。但是这个空间必须考虑到浏览器不支持的情况。
<canvas id="can" width="300" height="300"> 当前浏览器不支持Canvas，请更换浏览器。 </canvas>
如果此时浏览器不支持Canvas，那么就会出现错误的提示信息。如果说现在只是有了一个空间，那么还无法进行图形的展示，因为还需要编写代码。
范例：准备绘制
<script type="text/javascript">
window.onload = function() {
try {
var canvasObj = document.getElementById("can"); // 取得画板
var ctx = canvasObj.getContext("2d"); // 只支持2D图形} catch (e) {
alert("错误，当前的浏览器不支持本页操作！") ;
}
}
</script>
但是在支持的浏览器上，此时的代码是没有任何问题的，只不过在不支持的浏览器上程序就会出现错误。
4、视频播放支持
最早所有的视频网站使用的都是Flash技术，但是Flash技术现在的兼容性很差，那么后来当HTML5出现之后，里面的视频播放技术就成为了现在许多视频网站的首选技术。
范例：播放一个视频
<video id="vid" src="http://www.mamicode.com/video/news.mp4" controls></video>
虽然这种控制的操作很好，但是从现实来讲，所有的视频网站它的视频一定不是固定的。现在所有的控制都是系统自动完成的，如果用户有需要也可以自己完成控制编写。
范例：实现自己的视频控制
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Demo</title>
<script type="text/javascript">
window.onload = function() {
var videoObj = document.getElementById("vid") ; // 取出视频对象
document.getElementById("playBut").addEventListener("click",function(){
if (videoObj.paused) { // 如果当前没有播放
videoObj.play() ; // 播放视频}},false);
document.getElementById("pauseBut").addEventListener("click",function(){
if (videoObj.played) { // 正在播放videoObj.pause() ;}},false) ;}
</script>
</head>
<body>
<video id="vid" src="http://www.mamicode.com/video/news.mp4"></video>
<input type="button" id="playBut" value="http://www.mamicode.com/播放">
<input type="button" id="pauseBut" value="http://www.mamicode.com/暂停">
</body>
</html>
这种控制的本身是比较麻烦的，因为在整个的视频过程之中，需要控制的内容挺多。
总结HTML5中的视频播放只能够说是提供了一个基础的支持，等于是现在可以直接在页面上进行播放了，但是所有的视频播放网站都不可能这么简单，就包括HTML5本身来讲，也是存在有限制的。
定位服务
在现在的开发之中，地理位置的信息实际上已经越来越重要了。包括吃饭、娱乐都需要地理位置的支持。在想取得地理位置操作之前，首先需要判断一下浏览器是否支持GPS定位。
范例：判断浏览器是否支持GPS定位
<script type="text/javascript">
window.onload = function() {
if (navigator.geolocation) {
alert("恭喜您，您的浏览器支持GPS定位！") ;}
else {
alert("悲催了，换浏览器吧，不支持定位服务！") ;
}
}
</script>
就算你的浏览器支持定位操作，那么你的硬件设备可能也不支持你的定位操作。
范例：取出坐标
<script type="text/javascript">
window.onload = function() {
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(postion) {
var lo = postion.coords.longitude ; // 取得经度坐标
var la = postion.coords.latitude ; // 取得纬度坐标
alert("经度= " + lo + "，纬度= " + la) ;} , function(e) { // 出现错误的处理
alert(e.code) ;}) ; // 取出坐标
} else {
alert("悲催了，换浏览器吧，不支持定位服务！") ;
}
}
</script>
在进行坐标操作的过程之中，如果出现了定位的错误编码，那么可选的值有如下几种：
·0：表示没有错误；
·1：表示用户的浏览器设置中拒绝取得GPS坐标；
·2：尝试取出坐标，但是失败；
·3：超过了预计的处理时间。
如果要想进行GPS定位需要有服务器的支持，否则无法取出。现在有了位置信息：·经度坐标：116.332474·纬度坐标：40.099399如果要想进行坐标位置的定义，那么可以利用GIS系统完成，比如说可以使用Google Map（FQ）或者是百度Map（需要注册）。注册完成之后会给你一个自己的ak信息
总结位置的服务一定需要GPS模块的支持。
1、本地数据存储；
2、session数据存储。
Form API
1、HTML5中的各个增强表单组件的使用（基本不用）；
2、HTML5中的验证操作的使用。
XMLHttpRequest Level 2的使用。
从Ajax诞生到今天，几乎所有的项目都一定要使用到异步数据处理。而在传统的Ajax操作上会发现许多的处理并不是很人性化，所以从HTML5开始增加了新的Ajax处理支持，目的是希望使用一些更简单的操作进行Ajax的处理。既然要进行Ajax的处理，那么必然要牵扯到服务器端的程序代码，那么下面定义一个Servlet，并且让这个servlet返回XML数据。
范例：定义servlet处理异步操作
@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml");
Enumeration<String> enu = request.getParameterNames() ; // 取得全部参数
while (enu.hasMoreElements()) {
String paramName = enu.nextElement() ;
System.out.println("*** 【参数名称】paramName = " + paramName + "，【参数内容】paramValue = "http://www.mamicode.com/+ request.getParameter(paramName));"<info>");
response.getWriter().print("<url>淄博</url>");
response.getWriter().print("</info>");
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
this.doGet(request,response);
}
}
本程序里面可以接收参数，也可以进行参数数据的回应，而且回应的数据类型使用XML文本。
范例：定义ajax操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>HTML5 Demo</title>
<script type="text/javascript">
window.onload = function() {
var xmlHttpRequest = new XMLHttpRequest() ; // 直接创建交互对象
if (xmlHttpRequest.withCredentials) { // 现在浏览器不支持
alert("对不起，当前的浏览器不支持Ajax操作") ;
} else {
var mid = "10050" ; // 参数内容
var name = "盖伦" ; // 参数内容
xmlHttpRequest.open("post","AjaxServlet") ; // 打开处理路径
xmlHttpRequest.setRequestHeader("Context-Type","form-url") ; // 设置类型的头信息
xmlHttpRequest.send("mid=" + mid + "&name=" + name) ;
xmlHttpRequest.onprogress= function(e) { // 当前正在进行处理
alert("正在进行处理，处理进度：" + (e.loaded / e.total)) ;
} ;
xmlHttpRequest.onload = function(e) {
alert("数据处理完毕，服务器返回信息：" + xmlHttpRequest.responseText) ;} ;
}
}
</script>
</head>
<body>
</body>
</html>
此类代码与传统的Ajax处理几乎改观不大，唯一的区别是将处理的操作进度由最早的状态，变为了匿名处理的函数。
总结整个Ajax的操作就属于新瓶装了老酒，除了瓶子好看点之外，没什么变化。
HTML5新特性