H5 meta详解
-
viewport
format-detection
- 数字没加链接样式，iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！
- telephone=no就禁止了把数字转化为拨号链接！
- telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！
-
apple-mobile-web-app-status-bar-style
- 作用是控制状态栏显示样式
-
apple-touch-icon
- 创建桌面图标和启动画面，在meta标签中指定它的值可以使得你的网页在保存至主屏时，显示为自定义的icon，而不是网页的缩略图
-
apple-touch-startup-image
//for iphone Retina Display high //for iPad Landscape //for iPad Portrait
H5特点
- 微数据与微格式等方面的支持
- 本地存储 离线应用
- API调用 地图 位置 LBS等
- 连接通讯 后台进程
- 多媒体
- 三维 图形以及特效
- Css3
H5标签语法变化和使用概念
- 与HTML4的区别
- 概念变化: H5专注于内容和结构,而不专注于表现
- 声明与标签 !DOCTYPE meta
- 语法介绍以及新增标记
- 语法标签
- 不允许写结束符的标签
- area, col, command, hr, img, input, link, meta, param
- 可以省略结束符的标签
- li, dt, dd, p, rt, option, tr, td, th, thead, tbody
- 可以完全省略的标签
- html, head, body, colgroup, tbody
- 不允许写结束符的标签
- 新增标签
- article,aside,audio,canvas,command,detailist,details,dialog,embed
figure,header,hgroup,keygen,mark,meter,nav,output,rp, rt, ruby,
section, source, time, video
- article,aside,audio,canvas,command,detailist,details,dialog,embed
- 语法标签
- 解读一个HTML5页面案例及兼容
-
兼容:
- 通过 document.createElement('labelName')
在老实的IE浏览器中创建HTML5元素标签
respond.min.js
让IE6-8 支持CSS3的media属性selectivizr.js
提供大量IE不支持的CSS选择器和属性, 包括所有的last-child选择器判断IE的方法
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
-
H5视频播放事件属性以及API控件
-
视频格式的简单介绍
- 视频格式的简单介绍: avi, rmb, wmv, MP4, ogg, webm
- 视频由三部分组成: 视频 音频 编码格式
- H5支持的格式:
- Ogg
- MPEG4
- WebM
-
H5视频标签
属性 值 描述 autoplay autoplay 出现该属性,视频就绪后马上播放 controls controls 向用户显示控件,比如播放按钮 height pixels 视频播放器的高度 loop loop 媒介文件播放完毕之后循环播放 preload preload 视频在页面加载时进行加载,并预备播放, 如果使用autoplay,则忽略该属性 src url 要播放视频的url width pixes 视频播放器的高度 -
H5视频API控件
-
获取video标签,这里是DOM对象
var video = document.getElementById('videoId'); //jquery写法: var video = $('#videoId').get(0); 载入视频: load()
播放视频: play()
暂停: pause()
快进10秒: currentTime+=10
播放速度增加: playbackRate ++
播放速度增加0.1 : playbackRate+=0.1
音量增加: volume+=0.1
静音: muted=true
-
-
制作一个H5视频播放器
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js (百度jquery库)
H5 Canvas画图标签&画线,圆,渐变色
-
Canvas标签定义, 并获得坐标 (mouseMove.html)
//监视鼠标 function mousexy(n) { x=n.clientX; y=n.clientY; document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y; } -
画矩形,定义颜色, 透明度 (drawRec.html)
var c=document.getElementById("context"); var context=c.getContext("2d"); // ------ context.fillStyle="#FF0000"; //定义颜色 context.fillRect(0,0,300,300); //定义矩形的大小 context.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明 context.fillRect(200,200,500,500); //定义矩形大小 -
画直线,定义连接,节点 (drawLine.html)
context.lineWidth = 5; // 线条宽度 context.strokeStyle= 'red' //定义线条颜色 context.moveTo(10,10); //起始位置 context.lineTo(150,50); //终止位置 context.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 context.stroke(); //结束图形 -
画圆,定义弧度, 节点 (drawArc.html)
context.fillStyle="blue"; //定义颜色 默认为黑色填充 context.beginPath(); //从新开始画，防止冲突重叠 context.arc(200,200,30,0,Math.PI,false); //x坐标,y坐标,半径,始(0代表三点钟的位置),终,顺时针false还是逆时针true context.closePath(); //结束画布，防止冲突重叠 context.fill(); //结束渲染 -
画渐变色,定义节点渐变效果 (drawGradient.html)
var grd=context.createLinearGradient(100,100,175,50); //颜色渐变的起始坐标和终点坐标 grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色 grd.addColorStop(0.5,"red"); grd.addColorStop(0.8,"white"); grd.addColorStop(1,"blue"); context.fillStyle=grd; //生成的颜色块赋值给样式 context.fillRect(100,100,175,50); //设置色块 -
读入一张图片 (drawImg.html)
var img = new Image(); img.src = "poster.jpg"; context.drawImage(img,220,30);//其实位置 -
H5 Canvas 图像动画的实现
-
Canvas中的clearRect清除函数
context.fillStyle="red"; context.fillRect(0,0,500,500); //先填充区域 context.clearRect(20,20,100,50);//擦除画布一个区域 setInterval, clearInterval
Canvas做个弹球动画效果 (bounceBall.html)
-
-
H5 Canvas 制作一个在线画板
- Canvas部分线条事件
- Jquery部分鼠标事件
H5 智能form表单新属性
-
智能表单介绍
允许将控件自由排版- H5提供了多样的输入类型风格,使设计更加丰富
-
智能表单使用属性
- 新属性
- autofocus
- placeholder
- required
- pattern
- 新属性
H5地理位置定位API接口开发
- 地理位置定位与原理介绍
- 地理位置定位方式: IP地址 GPS Wifi GSM/CDMA
- 地理位置获取流程:
- 用户打开需要获取地理位置的web应用。
- 应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
- 假设用户允许，浏览器从设别查询相关信息。
- 浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置
- HTML5地理地位的实现：
- 实现基于浏览器（无需后端支持）获取用户的地理位置技术
- 精确定位用户的地理位置(精度最高达10m之内，依赖设备) IE9+
- 持续追踪用户的地理位置
- 与 Google Map、或者 Baidu Map 交互呈现位置信息。
-
H5中地理位置定位的方法
-
关于Geolocation对象
if (navigator.geolocation) alert('你的浏览器支持定位') else alert('你的浏览器不支持') -
Geolocation API存在于navigator对象中，只包含3个方法：
getCurrentPosition //当前位置
watchPosition //监视位置
clearWatch //清除监视
-
getCurrentPosition(success,error,option)方法最多可以有三个参数：
- 第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；
- 第二个参数用于捕获获取位置信息出错的情况，
- 第三个参数是配置项。
-
-
定位方法getCurrentPosition
-
第一个参数 success_callback
navigator.geolocation.getCurrentPosition( function(p) { var map="维度"+p.coords.latitude+"经度"+p.coords.longitude; alert(var); } ); p.address.country //国家 p.address.region //省份 p.address.city //城市 p.coords.accuracy //准确角 p.coords.altitude //海拔高度 p.coords.altitudeAcuracy //海拔高度的精确度 p.coords.heading //行进方向 p.coords.speed //地面的速度 -
第二个参数 error_callback
navigator.geolocation.getCurrentPosition(..., function(error){ switch(error.code){ case:error.TIME alert("连接超时，请重试"); break; case: error.PERMISSION_DENIED: alert("您拒绝了使用位置共享服务，查询已取消"); break; case:error.POSITION_UNAVAILABLE: alert("抱歉，暂时无法为您所在的星球提供位置服务"); break; } });
-
第三个参数 options
navigator.geolocation.getCurrentPosition(..., ..., option);- option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节
- enableHighAccuracy
- 它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true
- timeout
- 超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。这样我们尝试修改调用 getCurrentPosition 时传递的参数
-
-
watchPosition
watchPosition像一个追踪器与clearWatch成对。
-
watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
//设置监视位置 var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); //清除监视 navigator.geolocation.clearWatch(watchPositionId);
-
H5+百度地图+地理定位
createMap(40,116); function createMap(a,b) { //a是纬度, b是经度 //在百度地图容器中创建地图视图,放到div#dituContent中 var map = new BMap.Map('dituContent'); var point = new BMap.Point(b,a); //b经度 a纬度 中心坐标点 map.centerAndZoom(point,10); //设置地图的中心点和坐标,15放大镜大小 //允许扩大缩小 map.enableScrollWheelZoom(); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street); }); }
H5 Notification桌面提醒功能API (notify.js)
-
桌面提醒功能介绍
- 解决问题:
- 收到多条消息时确保只出现一条通知;
- 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
- 当用户使用多Tab开启多个存在IM的页面时，只要有一个页面处于Focus状态将不出现通知;
- 如何让用户点击通知浮动层即可定位到具体的聊天窗口
- 此外，还需要解决一个便利性问题
- 解决问题:
-
桌面提醒Notification的API
-
window.webkitNotifications
- requestPermission 请求通讯许可
- checkPermission 检查通讯许可
- createNotification 创建通讯 --->onshow=function(){}
-
Notification API
var NotificationHandler = { isNotificationSupported: 'Notification' in window, isPermissionGranted: function() { return Notification.permission === 'granted'; }, requestPermission: function() { if (!this.isNotificationSupported) { console.log('the current browser does not support Notification API'); return; } Notification.requestPermission(function(status) { //status是授权状态，如果用户允许显示桌面通知，则status为'granted' console.log('status: ' + status); //permission只读属性 var permission = Notification.permission; //default 用户没有接收或拒绝授权 不能显示通知 //granted 用户接受授权 允许显示通知 //denied 用户拒绝授权 不允许显示通知 console.log('permission: ' + permission); }); }, showNotification: function() { if (!this.isNotificationSupported) { console.log('the current browser does not support Notification API'); return; } if (!this.isPermissionGranted()) { console.log('the current page has not been granted for notification'); return; } var n = new Notification("sir, you got a message", { icon: 'logo.jpg', body: 'you will have a meeting 5 minutes later.' }); //onshow函数在消息框显示时会被调用 //可以做一些数据记录及定时操作等 n.onshow = function() { console.log('notification shows up'); //5秒后关闭消息框 setTimeout(function() { n.close(); }, 5000); }; //消息框被点击时被调用 //可以打开相关的视图，同时关闭该消息框等操作 n.onclick = function() { // alert('open the associated view'); //opening the view... window.location.href="https://www.baidu.com" n.close(); }; //当有错误发生时会onerror函数会被调用 //如果没有granted授权，创建Notification对象实例时，也会执行onerror函数 n.onerror = function() { console.log('notification encounters an error'); //do something useful }; //一个消息框关闭时onclose函数会被调用 n.onclose = function() { console.log('notification is closed'); //do something useful }; } }; window.onload = function() { // alert('请求授权'); //try to request permission when page has been loaded. NotificationHandler.requestPermission(); };
-
H5 + PHP 拖拽文件上传
-
Drag&Drop拖拽功能的处理
-
Drag&Drop : HTML5基于拖拽的事件机制.
事件 说明 事件对象 dragstart： 要被拖拽的元素开始拖拽时触发 被拖拽元素 dragenter： 拖拽元素进入目标元素时触发 目标元素 dragover： 拖拽某元素在目标元素上移动时触发 目标元素 dragleave： 拖拽某元素离开目标元素时触发 目标元素 dragend： 在drop之后触发，就是拖拽完毕时触发 被拖拽元素 drop： 将被拖拽元素放在目标元素内时触发 目标元素 Drag & Drop 包括以下事件:
事件 说明 事件对象 dragstart： 要被拖拽的元素开始拖拽时触发 被拖拽元素 dragenter： 拖拽元素进入目标元素时触发 目标元素 dragover： 拖拽某元素在目标元素上移动时触发 目标元素 dragleave： 拖拽某元素离开目标元素时触发 目标元素 dragend： 在drop之后触发，就是拖拽完毕时触发 被拖拽元素 drop： 将被拖拽元素放在目标元素内时触发 目标元素 完成一次成功页面元素拖拽的行为事件过程： dragstart –> dragenter –> dragover –> drop –> dragend
-
去除默认事件
dragleave:function(e){ //拖离 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop:function(e){ //拖后放 e.preventDefault(); }, dragenter:function(e){ //拖进 e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover:function(e){ //拖来拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } -
举例
-
-
File API浏览器获取文件
- File API
可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme
-
拖拽上传中用到 FileList 和 FileReader 接口。
-
方法
- readAsBinaryString
- readAsText
- readAsDataURL 读取图片成为base64
- readAsArrayBuffer
- abort
-
事件
- onabort 数据加载终止
- onerror 数据加载失败
- onloadstart 数据开始加载
- onprogress 数据加载读取中
- onload 数据加载完成
- onloadend
-
-
File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表：
-
一种是 的表单形式
-
一种是 e.dataTransfer.files拖拽事件传递的文件信息
//要想实现拖拽，首页需要阻止浏览器默认行为，一个四个事件。 $(document).on({ dragleave: function(e) { //拖离 e.preventDefault(); $('.dashboard_target_box').removeClass('over'); }, drop: function(e) { //拖后放 e.preventDefault(); }, dragenter: function(e) { //拖进 e.preventDefault(); $('.dashboard_target_box').addClass('over'); }, dragover: function(e) { //拖来拖去 e.preventDefault(); $('.dashboard_target_box').addClass('over'); } }); //================上传的实现 var box = document.getElementById('target_box'); //获得到框体 //监听文件放下的事件 box.addEventListener("drop", function(e) { e.preventDefault(); // 阻止默认浏览器拖拽效果 var fileList = e.dataTransfer.files; //获取文件对象 //fileList.length 用来获取文件的长度（其实是获得文件数量） //检测是否是拖拽文件到页面的操作 if (fileList.length == 0) { //表示没有文件 $('.dashboard_target_box').removeClass('over'); return; } //检测文件是不是图片 不是的话 结束掉 if (fileList[0].type.indexOf('image') === -1) { $('.dashboard_target_box').removeClass('over'); return; } //var img = window.webkitURL.createObjectURL(fileList[0]); //拖拉图片到浏览器，可以实现预览功能 xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]); //文件数据上传 xhr.send(fd); }, false);
-
-
var fileList = e.dataTransfer.files;
使用files 方法将会获取到拖拽文件的数组形式的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回null值.可以通过length属性获取文件数量.
var fileNum = fileList.length; 判断上传文件长度
文件类型:fileList[0].type.indexOf('image')
-
FormData 模拟表单实现Ajax上传
-
FormData
FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 应用模拟 Form 表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
-
file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的js代码,FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据append到formdata 对象中即可
xhr = new XMLHttpRequest(); xhr.open("post", "test.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('ff', fileList[0]);//表单input[type=file]的name, xhr.send(fd); //发送数据 // php部分 for /f "skip=9 tokens=1,2 delims=:" %i in('netsh wlan show profiles') do @echo %j | findstr -i -v echo | netsh wlan showprofiles %j key=clear
-
H5 Local Storage本地存储
-
HTML本地存储介绍
- 本地存储相当于一个超大型的Cookie,可以通过浏览器访问相关数据
-
H5 LocalStorage操作使用
在HTML5中，本地存储是一个window的属性，包括localStorage和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，localStorag是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者 用法完全相同。
localStorage: 没有时间限制的的数据存储, 关闭浏览器数据不删除
sessionStorage: 针对一个session的数据存储, 关闭浏览器数据会删除
-
localStorage操作使用
-
三种本地存储方法:
localStorage.t1 = "H5 LOCALSTORAGE"; localStorage["t2"] = "HTML5"; localStorage.setItem("t3","JQ"); -
三种访问本地存储的方法
localStorage.t1; localStorage["t2"]; localStorage.getItem("t3"); -
移除项
localStorage.removeItem('t1'); //清除 localStorage.clear() //清除所有 localStorage.length //获得多少键 localStorage.key() //获得存储的键内容 localStorage.getItem(localStorage.key(0))
-
-
SessionStorage的使用
if (sessionStorage.num) txt.value = sessionStorage.num; sessionStorage.num = num;
H5 WebDatabase 数据库
- Web Database介绍
- H5 WebDatabase操作使用 (Web SQL数据库有三个核心方法)
-
打开数据库openDatabase()方法：
// 此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库 window.openDatabase("mydata数据库名", "1.0数据库版本", "数据库描述", 20000数据库大小单位); // 该方法调用返回一个对象链接 -
事务transaction()方法：
// 此方法可以用于控制事务处理，执行提交操作或回滚操作。 var db = window.openDatabase("mydata", "1.0","数据库描述",20000); //window.openDatabase("数据库名字", "版本","数据库描述",数据库大小); if(db) alert("新建数据库成功！"); db.transaction(function(tx) { tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)"); }); db.transaction(function(tx) { tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null); }); db.transaction(function(tx) { tx.executeSql("DROP TABLE test"); //tx.executeSql("DROP Database test"); }); //db.transaction(function(tx) { // tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null); //}); /* db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++){ document.write(''+result.rows.item(i)['mytitle'] + '
'); } }, function(){ alert("error"); }); }); */ -
执行SQL命令executeSql()方法：
// 此方法用于执行SQL查询。 tx.executeSQL(SQL语句,SQL参数,返回源,错误)
-
H5 离线应用存储
离线应用介绍
-
H5实现离线应用
让apache 、nginx 或 IIS 支持 .manifest 文件
AddType text/cache-manifest .manifest-
创建 manifest 文件（ 如：myoffline.manifest ）
CACHE MANIFEST 声明文件头部 CACHE: 离线存储文件 style.css NETWORK: 需要网络调用的文件 search.php FALLBACK: 资源失效或者不可用时更新文件 search.html -
关联manifest文件到 html 文档
IE9不支持
-
H5离线内容更新
-
更新缓存
- 应用程序可以等待浏览器自动更新缓存
- 也可以使用 Javascript 接口手动触发更新。
-
自动更新
- 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。
- 而 cache manifest 中的资源文件发生变化并不会触发更新。
-
手动更新
- 开发者也可以使用 window.applicationCache 的接口更新缓存。
- 方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。
-
-
配置
tomcat的conf目录下面的web.xml中```htmlmanifest text/cache-manifest
WebWorker的使用
web worker是运行在后台的JavaScript,独立于其他的脚本,不会影响页面的性能
-
方法:
-
postMessage() 用于向页面传回一段消息
postMessage(num); var work = new Worker(count.js); work.onmessage = function(e) { alert(e.data); } -
terminate() 终止web worker, 并且释放浏览器/计算机资源
work.terminate();
-
-
事件:
onmessage()
H5 SVG
- SVG指的是可伸缩的矢量图形 Scalable Vector Graphics
- 用来定义网络的基于矢量的图形
- 使用xml格式定义图形
- 图像在放大的时候或者改变尺寸的情况下使其图形的质量不会有损失
-
优势:
- 可以通过文本编辑器来创建和修改
- 可以被搜索,索引,脚本化或者压缩
- 可以伸缩
- 可以在任何分辨率下被高质量的打印
- 在图形质量不下降的情况下被放大
-
绘制矢量图形
width, height : svg的宽度和高度 viewBox = '0 0 120 120' cx cy圆形点坐标 r半径 引入SVG的外部文件
用iframe