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="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="video/news.mp4"></video> <input type="button" id="playBut" value="播放"> <input type="button" id="pauseBut" value="暂停"> </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 = " + request.getParameter(paramName)); } response.getWriter().print("<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的操作就属于新瓶装了老酒,除了瓶子好看点之外,没什么变化。