一，HTML5简介
17日至18日，×××在河南省委书记郭庚茂、省长<mark>谢伏瞻</mark>陪同下，深入农村和窗口服务单位，同干部群众交流座谈、听取意见和建议，
实地指导兰考县教育实践活动。
</div>
1.1 HTML5应用简介
诞生于2004,2007年被w3c采纳，增加了多媒体，画布的标记，并且新增了很多非常有用的js api（如离线存储，地理位置），
可以让前端程序员开发出用户体验良好的客户端效果，随着移动端浏览器对Html5的强力支持，html5的发展势头越来越好！
html5的目标：
减少外部插件支持（flash）
用功能标签取代脚本
不基于某款设备
html5优势：开发效率高，成本低；移动端也支持，且风格基本统一，几乎所有现代浏览器都支持，并且可以通过phonegap等工具转成移动版本
html5劣势：不是所有native功能，硬件设备都支持，也难以实现复杂的UI
1.2 html5与html4,css3与css2对比
html5相比较html4新增了很多标签和api，css3是新一代样式语言，比css2更加动态。
1.3 开发前准备（浏览器与开发工具）
目前IE9+ google chrome等浏览器都支持html5，但是不可避免的存在兼容性问题，最好采用最新版
开发工具：记事本，editplus，WebStorm（前端开发神器）
webstorm7.0下载地址：
http://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases
二，HTML5常用元素
2.1 根元素
<!DOCTYPE html>
在这个标签前面不要留空白字符，否则可能导致有的浏览器不能正确解析html5元素
2.2 节点元素(section,article,header,footer,nav,address)
html5新增了很多节点元素，用于区分页面内容，这些节点元素都是语义性质的，没有特别的效果
2.2.1 <section>:标记文档中的区域段落，比如文章的章节，页眉页脚等
<section draggable="true">
<h1>张三</h1>
</section>
这个元素的作用和div类似
2.2.2 <article>:独立完整的内容区域，可以有更细分的内容
<article>
<section>
<h2>标题一</h2>
<p>内容一</p>
</section>
<section>
<h2>标题二</h2>
<p>内容二</p>
</section>
</article>
2.2.3 <header>:文档或区域的头部
<article>
<header>简介一</header>
<p>内容一</p>
<header>简介二</header>
<p>内容二</p>
</article>
2.2.4 <nav>:表示页面的导航元素
<nav >
<a href="http://www.baidu.com">百度</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.sogou.com">搜狗</a>
</nav>
2.2.5 <address>:定义文档作者的相关联系方式或地址
<address>by 张三</address>
会有斜体效果
最好不要在<address>,<footer>,<header>元素内嵌套<header>,否则可能无法正确解析
2.3 列表元素(ul,ol,dl)
<ul>
<li>音乐</li>
<li>程序设计
<ul>
<li>java</li>
<li>c++</li>
<li>c#</li>
</ul>
</li>
<li>体育</li>
</ul>
这类标签可以嵌套。
<ol start="2" >
<li>***思想</li>
<li>三个代表</li>
<li>八荣八耻</li>
</ol>
ol新增了start和reversed两个属性，前者定义开始的编号，后者用于设置列表是否反序
<dl>
<dt>html5</dt>
<dd>新一代html</dd>
<dt>jquery</dt>
<dd>前端框架</dd>
<dd>支持移动端</dd>
</dl>
dt后面可以有多个dd
2.4 其他元素（mark,cite）
mark元素的功能是在文本中高亮显示某些文字，比如
<div>
根据中央统一安排，中央政治局常委在第二批教育实践活动中分别联系一个县，<mark>×××</mark>联系兰考县。
17日至18日，×××在河南省委书记郭庚茂、省长<mark>谢伏瞻</mark>陪同下，深入农村和窗口服务单位，同干部群众交流座谈、听取意见和建议，
实地指导兰考县教育实践活动。
</div>
cite元素是一个引用标记，比如参考文献或者报纸的引用说明。
比如：
<cite>摘自人民日报</cite>，此时会出现斜体样式
2.5 元素属性（draggable,hidden,contenteditable）
draggable:支持拖拽
hidden:隐藏属性(hidden="hidden")
contenteditable:可以使内容可编辑
三，HTML5表单
3.1 input表单及其重要属性
<input type="email" />：email输入框
<input type="url" />：url输入框
<input type="number" min="2" max="30" step="2.5" value="5"/>：数字输入框,最小值是2，每步可增减2.5，默认值是5,最大值是30
<input type="range" min="0" max="255" value="150"/>:数字滑动条
<input type="date"/>：日期选择器
<input type="search"/>：搜索输入框，与普通输入框并无不同，只是在输入框后面加一个“叉”，用于删除搜索关键字
重要属性
placeholder：输入提醒
required：非空验证
autofocus：自动得到焦点
3.2 新支持的表单之datalist
<input type="text" list="listWork" />
<datalist id="listWork">
<option value="c++"></option>
<option value="java"></option>
<option value="javascript"></option>
</datalist>
目前google最新浏览器支持
四，文件接口及拖放
4.1 文件选择
<input type="file" name="myfile" id="myfile" multiple />
multiple属性支持多选,当把鼠标移上去后，会出现文件名的列表
accept属性可以控制所选的文件类型，比如：accept="p_w_picpath/png"，但是也可以选择其他文件
4.2 Blob接口
Blob表示二进制数据。
4.2.1 获取文件类型与大小
html5代码：
<input type="file" name="myfile" id="myfile" multiple οnchange="getFileList(this.files)" />
js代码：
function getFileList(fs){
for(var i=0;i<fs.length;i++){
var f=fs[i];
//文件名 文件类型 文件大小(字节)
alert(f.name+" "+f.type+" "+ f.size);
}
}
4.3 使用FileReader接口读取文件
该接口既可以读取文本文件，还可以读取二进制文件
4.3.1 使用readAsDataURL方法预览图片
function previewImgs(fs){
if(typeof FileReader == 'undefined'){
alert("浏览器不支持FileReader对象");
}
var previewDiv=document.getElementById("previewDiv");
for(var i=0;i<fs.length;i++){
var f=fs[i];
var reader=new FileReader();
reader.readAsDataURL(f);
reader. previewDiv.innerHTML+="<img src='"+ e.target.result+"' /><br/>";
}
}
}
4.3.2 使用readAsText方法读取文本文件
function readTxt(fs){
if(typeof FileReader == 'undefined'){
alert("浏览器不支持FileReader对象");
}
var txtDiv=document.getElementById("txtDiv");
for(var i=0;i<fs.length;i++){
var f=fs[i];
var reader=new FileReader();
reader.readAsText(f);
reader. txtDiv.innerHTML+= "<pre>"+e.target.result+"</pre>";
}
}
}
<pre>标签会原样输出空格或回车
4.4 使用DataTransfer对象拖拽上传文件
html代码：
<div id="uploadDiv" style="border: 1px solid;height: 200px" οndrοp="dropFile(event)" οndragenter="return false" οndragοver="return false">
上传图片
</div>
<br/>
<div id="imgDiv">
这里预览图片
</div>
javascript代码：
function fileUpload(fs){
var imgDiv=document.getElementById("imgDiv");
for(var i=0;i<fs.length;i++){
var f=fs[i];
var reader=new FileReader();
reader.readAsDataURL(f);
reader. // alert(e.target.result);
imgDiv.innerHTML += "<img src='"+e.target.result+"' />";
}
}
}
function dropFile(e){
//alert(e.dataTransfer);
fileUpload(e.dataTransfer.files);
//停止事件传播
e.stopPropagation();
//阻止默认事件的发生，否则拖拽上去后会触发其他拖拽事件
e.preventDefault();
}
4.5 html5上传功能服务器接收实现
可以采用common-fileupload接收上传文件
其中，拖拽上传由于不是form表单提交数据，所以目前只能采用ajax方式上传，在html5中，我们可以通过FormData对象封装数据
html5核心代码如下：
function uploadForm(){
var formData=new FormData();
for(var i=0;i<files.length;i++){
var f=files[i];
formData.append(f.name,f);
}
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
alert("上传成功");
}
}
xhr.open("post","<%=path%>/upservlet",true);
xhr.send(formData);
}
servlet核心代码如下：
FileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
List<FileItem> list=upload.parseRequest(request);
处理代码省略...
五，HTML5多媒体播放
5.1 音频播放
<audio src="莫文蔚 - 电台情歌.mp3" autoplay="autoplay" controls="controls" >浏览器不支持音频播放</audio>
pc端：IE9+可以支持的不错，chrome不能拖拽进度，手机端支持良好
autoplay：自动播放
controls：生成控制条
loop:循环播放
5.2 视频播放
<video src="Hadoop体系介绍.mp4" autoplay="autoplay" controls="controls">浏览器不支持视频</video>
IE9不支持mp4，chrome支持，移动端支持良好
5.2.1 poster属性
该属性可以在视频播放前（时）显示指定的图片（完全是为广告做准备的啊有木有）
比如： <video src="Hadoop体系介绍.mp4" poster="MEINV.jpg" autoplay="autoplay" controls="controls">浏览器不支持视频</video>
我们也可以在视频暂停(onpause事件)的时候播放图片：
_this.setAttribute("poster","xiaoqingxin.jpg");
5.2.2 networkState属性
通过这个属性可以在onprogress事件中得到视频加载状态
首先给标签加上 οnprοgress="videoProgress(this)"
js函数如下：
function videoProgress(_this){
var stateDiv=document.getElementById("stateDiv");
var state=_this.networkState;
if(state==0){
stateDiv.innerHTML="正在初始化";
}
if(state==1){
stateDiv.innerHTML="数据加载完成";
}
if(state==2){
stateDiv.innerHTML="正在加载中";
}
if(state==3){
stateDiv.innerHTML="数据加载失败";
}
}
5.2.3 播放开始和结束事件
onplaying：暂停后开始会重新触发此事件
onended：视频结束时触发
5.2.4 播放进行时事件 ontimeupdate
视频对象有两个与播放时间相关的属性：currentTime和duration，前者表示当前播放时间（单位：秒），后者表示时间总量（单位：秒）
我们可以让ontimeupdate事件与这两个属性配合起来使用，动态的得到当前播放时间
5.2.5 canPlayType函数
通过这个函数可以判断支持的媒体类型
var arrtype=["audio/mov",'audio/mp4;codecs="mp4a.40.2"'];
var myvideo=document.getElementById("myvideo");
for(var i=0;i<arrtype.length;i++){
alert(myvideo.canPlayType(arrtype[i]));
}
返回结果说明：
""空字符串表示不支持
maybe表示可能支持
probably表示最可能支持
六，Html5 Canvas
6.1 画布简介
canvas可以帮助我们创建一个画布，使用js的api可以构建出任意的图形（或导入图片）
6.1.1 矩形示例
html:<canvas id="cnvMain" width="280px" height="190px"></canvas>
javascript:
function pageload(){
var cnv=document.getElementById("cnvMain");
//得到上下文环境
var ctx=cnv.getContext("2d");
//设置背景色
ctx.fillStyle="red";
//矩形参数(x,y,width,height)
ctx.fillRect(10,50,150,80);
}
6.1.2 设置边框
//设置边框背景色
ctx.strokeStyle="blue";
//边框参数(x,y,width,height)
ctx.strokeRect(10,50,150,140);
其中y和height不能大于canvas的height
6.1.3 绘制路径
html：
<canvas id="cnv" width="250px" height="180px"></canvas>
javascript：
var cnv=document.getElementById("cnv");
var ctx=cnv.getContext("2d");
//起点坐标
ctx.moveTo(100,50);
//终点坐标
ctx.lineTo(100,100);
ctx.lineTo(200,300);
ctx.lineWidth=3;
ctx.stroke();
6.1.4 绘制圆形
绘制实心圆
html:<canvas id="cnv" width="280px" height="190px"></canvas>
javascript:
function createArc(){
var cnv=document.getElementById("cnv");
var ctx=cnv.getContext("2d");
//清除画布原有图形
ctx.clearRect(0,0,280,190);
//开始画实体图
ctx.beginPath();
//参数：x坐标，y坐标，半径，开始角度，结束角度，是否按顺时针绘制
ctx.arc(60,60,50,0,Math.PI*2,true)
//关闭
ctx.closePath();
//填充背景色
ctx.fillStyle="red";
//填充
ctx.fill();
}
绘制边框圆时只需把api换成：
ctx.strokeStyle="red";
ctx.stroke();就可以了
七，数据存储
7.1 web Storage
在html5之前通常使用cookie来做客户端存储，但是cookie限制了数据空间大小（web storage数据大小限制在5M），保密性较差，代码操作比较复杂，所以html5中提供了两种数据存储方式：
web storage和web sql，其中web storage包括sessionStorage和localStorage
7.1.1 sessionStorage对象
这个对象保存了一次会话中的数据
保存数据：setItem([key],[value]);比如 sessionStorage.setItem("myname","aking");
得到数据：getItem([key])，比如var myname=sessionStorage.getItem("myname"); 数据只能在自己窗口或保存数据页面新开的窗口访问到
清除某个数据：sessionStorage.removeItem("myname");
清除所有数据：sessionStorage.clear();
得到数据项的个数：sessionStorage.length
通过下标得到key：sessionStorage.key([index])
循环所有数据项示例：
for(var i=0;i<sessionStorage.length;i++){
var k=sessionStorage.key(i);
alert(k+" "+sessionStorage.getItem(k));
}
7.1.2 localStorage对象
localStorage可以在客户端长期保存数据，它的API和sessionStorage一样
7.2 web sql数据库
webDB即客户端本地提供的关系型数据库，用于实现本地存储，它支持javascript操作sql，非常方便
7.2.1 webDB核心API
openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction：这个方法允许我们根据情况控制事务提交或回滚。
executeSql：这个方法用于执行真实的SQL语句。
7.2.2 创建（打开）数据库
openDatabase(name,version,displayName,estimatedSize,creationCallback)
参数释意：
name:数据库名称
version:版本号
displayName：描述信息
estimatedSize：数据库大小（以字节为单位，比如5M=5*1024*1024）
creationCallback：创建成功之后的回调函数(可以省略不写)
7.2.2 数据库操作
在webDB中，执行数据的crud需要事务的支持，事务的api如下：
transaction(callback,errorCallback,successCallback)
参数释意：
callback：事务回调函数（执行sql的地方）
errorCallback：sql执行失败的回调函数
successCallback：sql执行成功的回调函数
7.2.2.1 建表：
oadb.transaction(function(tx){
tx.executeSql("create table if not exists userinfo (toid int,username text ,age int )");
},
function(){},
function(){
alert("表创建成功");
});
其中executeSql函数的api如下：
executeSql(sqlStatement,arguments,callback,errorCallback)
参数释意：
sqlStatement：sql语句
arguments：参数列表，数组类型
callback：成功后回调函数
errorCallback：失败后回调函数
7.2.2.2 新增数据
var toid=parseInt(document.getElementById("toid").value);
var username=document.getElementById("username").value;
var age=parseInt(document.getElementById("age").value);
var oadb=window.openDatabase("oa","1.0","OA管理系统",1024*1024);
oadb.transaction(function(tx){
tx.executeSql("insert into userinfo values(?,?,?)",[toid,username,age],
function(){
alert("添加成功");
}
);
});
7.2.2.3 删除数据
var oadb=window.openDatabase("oa","1.0","OA管理系统",1024*1024);
oadb.transaction(function(tx){
tx.executeSql("delete from userinfo where toid=?",[toid],
function(){
alert("删除成功");
}
);
});
修改同新增/删除，此处不再赘述
7.2.2.3 查询数据
oadb.transaction(function(tx){
tx.executeSql("select * from userinfo",[],
function(tx,rs){
for(var i=0;i<rs.rows.length;i++){
alert(rs.rows.item(i).toid+" "+rs.rows.item(i).username+" "+rs.rows.item(i).age);
}
}
);
});
八，重要的API
8.1 地理位置API（Geolocation API）
要得到地理位置需要使用window.navigator.geolocation的api：
getCurrentPosition(successCallback,errorCallback,options)
参数释意：
successCallback:成功回调函数，此方法可以接受一个Position类型的参数，该对象可以用来描述
地理位置的详细信息。Position对象包含两个属性timestamp和coords，timestamp属性表示获取地理位置
时的时间，coords包含以下值：
属性值描述 latitude 纬度 longitude 经度 accuracy 地理位置精确度 altitudeAccuracy 海拔精确度 heading 前进方向 speed 前进速度（米/秒） altitude 海拔高度
errorCallback:失败回调函数，此方法可以接受一个error类型的参数，该对象有两个属性code,message
code值描述 0未知错误 1用户拒绝了定位服务 2没有获取正确的地理位置 3获取超时
options:可选的对象，可选项包含timeout,maximumAge，enableHighAccuracy三个属性
timeout：超时限制（毫秒）
maximumAge:设置地理位置缓存时间（毫秒），超过设定时间，则获取最新时间
下面是示例代码：
window.navigator.geolocation.getCurrentPosition(function(pos){
alert("纬度："+pos.coords.latitude);
alert("经度："+pos.coords.longitude);
//alert("当前经纬度的精度："+pos.coords.accuracy);
},function(error){
alert(error.code+" "+error.message);
},{
timeout:1000
});
监控地理位置api：watchPosition
var loca=document.getElementById("locaDiv");
var watchId=navigator.geolocation.watchPosition(function(pos){
loca.innerHTML="经纬度：("+pos.coords.latitude+","+pos.coords.longitude+","+pos.coords.speed+")";
navigator.geolocation.clearWatch(watchId);
},function(){});
使用google map定位
在实际项目中，使用google map首先需要去官网申请key，但是它也支持免key测试。
google map的使用步骤如下：
1，导入
js <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
2，使用google map api
function getMap(la,lon,divid){
//创建一个中心点
var centerLL= new google.maps.LatLng(la,lon);
var mapOptions = {
center: centerLL,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//渲染的位置
var map = new google.maps.Map(document.getElementById(divid),
mapOptions);
//撒点
var marker = new google.maps.Marker({
position: centerLL,
title:"我在这里"
});
marker.setMap(map);
}
3，把geolocation得到的经纬度传入到center和marker中
8.2 postMessage实现跨域通信
使用postMessage可以实现不同域名和端口下的文档之间进行数据交互，postMessageAPI如下：
postMessage([message],[targetOrigin]),message表示发送的数据，targetOrigin表示发送数据的url来源
下面新建两个html文档，A文档嵌入一个iframe，该iframe引用B文档，看看怎样实现这两个文档之间进行数据交互
A网页：
<div id="contentDiv"></div>
<input type="text" id="num" name="num" />
<br>
<input type="button" value="提交" <br>
<iframe id="idFrm" src="postMessage2.html"></iframe>
A网页javascript：
var originUrl="http://localhost:63342";
window.addEventListener('message',function(event){
if(event.origin==originUrl){
document.getElementById("contentDiv").innerHTML=event.data;
}
},false)
function sendClick(){
var num=document.getElementById("num").value;
document.getElementById("idFrm").contentWindow.postMessage(num,originUrl);
}
代码解释：首先添加接收信息的监听事件，用于从B页面接收信息。event.origin会返回B页面发送过来的域名端口信息，为了安全起见，这里
需要判断信息来源，event.data可以返回对方发送过来的信息
document.getElementById("idFrm").contentWindow得到iframe中window的句柄,postMessage函数发送数据和域名端口信息
B网页javascript：
var originUrl="http://localhost:63342";
window.addEventListener('message',function(event){
if(event.origin==originUrl){
var mydata=event.data;
event.source.postMessage(mydata+" hello",event.origin);
}
},false);
代码解释：event.source返回发送方的window句柄，通过句柄的postMessage将信息发送回去
8.3 Web Socket API
web Socket可以使网页成为一个socket客户端，使网页与客户端建立长时间的socket连接，下面是一个简单示例
html代码：
<input type="text" name="username" id="username" />
<br/>
<input type="button" value="提交" <br/>
<div id="contentDiv"></div>
javascript代码：
function sendMsg(){
var contentDiv=document.getElementById("contentDiv");
var username=document.getElementById("username").value;
//创建socket对象
var socket=new WebSocket("ws://localhost:1998");
//开启socket
socket.onopen=function(event){
alert("开启");
}
//接收数据
socket.onmessage=function(event){
contentDiv.innerHTML=event.data;
}
//关闭连接
socket.onclose=function(event){
contentDiv.innerHTM="关闭了"
}
}
完整socket应用需要服务端的支持，目前javaee6支持
转载于:https://blog.51cto.com/7915791/1412201
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
