H5新特性与用法大全

最新推荐文章于 2024-08-12 22:44:37 发布

qq_42951233

最新推荐文章于 2024-08-12 22:44:37 发布

阅读量415

点赞数 2

CC 4.0 BY-SA版权

文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_42951233/article/details/99673772

所有主流浏览器都支持H5，IE9以上有选择的支持，IE8 完全不支持
解决办法：
1、创建元素-》转换元素
2、引入第三方插件 html5shiv.min.js

1、语义化标签

header nav footer mian article aside

2、input 新增属性与表单新增元素

 1）新的input type    h4和h5对比！  

            H4中input type ：text /password /radio /checkbox/ sybmit/ reset / file /hidden / image/  

             H5中的input type ：email/url/number/tel/search /range /color/month/week /date

 2）新的表单元素

            H4中表单元素 ：input/textarea/select，option/label  

             H5中新增的表单元素：datalist /progress/meter/output
3）h5中 新增的表单元素 -- datalist 建议列表
<input type="" list="subject">
<datalist id="subject">
	<option value="">
	<option value="">
	<option value="">
<datalist>
4) h5中 新增的表单元素 -- progress 进度条
有两种形式：bootstrap里面有progress插件样式
  <form>
  	网络连接中<progress></progress><br>
  	下载进度<progress id="p3" value="0"></progress>
  	<input type="number" value="1">
  <form>
  <script type="text/javascript">
/*settimeout和setInterval区别在于settimeout执行一次，setInterval每隔一段时间执行一次*/
var t=setInterval(function(){
   var v = p3.value;
   v += 0.1;
   p3.value = v;
   if(v>=1){
    clearInterval(t);
    alert("下载完成");
     }
},500);
 5)  h5中 新增的表单元素 -- meter
机油含量：<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value="50"></meter>
PM值：<meter id="m2" min="0" max="500" low="100" high="300" optimum="150" value="750"></meter>
meter:度量衡/刻度尺/，用于标示一个所处的范围：不可接受（红色）/可以接受（黄色）/非常优秀（绿色）
<meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="当前值" ></meter>

3、音频audio和视屏video

一、flash被H5取代体现在哪些方面

flash 绘图（AS/FLEX） =>Canvas/SVG
flash 动画 => 定时器+Canvas
视频和音频播放 => VIDEO/AUDIO
flash 客户端存储 => WebStorage

它本身是一个300*150的行内块元素
备注：写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一，有些浏览器例如有些浏览器支持mp4格式，那么它就播放第一个mp4格式的视频，如果它不支持就检查是不是支持下面的ogg视频，如果支持就播放，不支持的话继续向下，下面没有source了，那么就显示“您的浏览器不支持VIDEO播放！”。

<video id="v2" src="" autoplay controls loop muted poster="2.jpg" preload="auto"></video>

autoplay：false，是否自动播放默认false
controls：false，是否显示播放控件，默认为false
loop：false ，是否循环播放，默认为false
muted：false，是否静音播放，默认为false
poster：’’，在播放第一帧之前显示的海报，可以是图片。默认为空没有
preload：视频预加载策略，可取值： auto：预加载视频的元数据以及缓冲一定时长，绝对不可以在手机端使用（尺寸/时长。第一帧内容，缓冲时长）（预加载浪费流量）
metadata：仅预加载视频的元数据（尺寸/时长，第一帧内容，）没有缓冲时长，适合手机 none：不预加载任何数据
currentTime:当前播放的时长
duration:总时长
paused:true,当前视频是否处于暂停状态 true是暂停，false是播放
volume：1 默认值是1，当前音量
playbackRate：1 ，回放速率大于1表快放，小于1表慢放
play（）：播放视频
pause （）：暂停播放
成员事件： onplay：当视频开始播放时触发的事件
onpause：当视频暂停时触发的事件
音频播放器和视屏一样，没有海报属性

4、canvas画布

1、创建画布

<canvas width="500" height="400">您的浏览器不支持canvas</canvas>

var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象

ctx.beginPath() //开始一条新路径
ctx.closePath() //闭合当前路径
ctx.moveTo(x,y) //移动到指定点
ctx.lineTo(x,y) //从当前点到指定点画直线
ctx.arc(cx,cy,r,start,end) ； //绘制圆拱路径 
//cx cy 是圆心坐标xy r是半径 ，start 开始角度，end结束角度

5、svg绘图

一、SVG绘图使用标签进行绘图，可以直接绑定事件监听

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
   <rect width="100" height="100"></rect>
</svg>

二、如何js创建一个svg标签！

/var r1 = document.createElement('rect'); 创建不了这个svg元素 因为有年限和命名空间  （就是说这样不行 要用下面的方法创建！！！！）
var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');
r1.setAttribute('width','50');
r1.setAttribute('height',300);
s1.appendChild(r1);

6、地理位置

Geolocation：地理定位，使用JS获取当前浏览器所在的地理坐标（经度，维度，海拔，速度）数据，用于实现LBS应用（Location Based Service），如饿了么，高德导航…

手机浏览器如何获得定位信息：

1）首选手机中的GPS芯片与卫星通信，定位精度在米
2）次选手机基站进行定位获取，定位精度在公里（违法的）
PC浏览器如何获得定位信息：
1）通过IP地址进行反向解析，定位精度取决于IP地址库的大小

HTML5中提供了一个新的对象，用于获取当前浏览器的定位信息：
    window.navigator.geolocation{
      getCurrentPosition:fn, //获得当前定位信息
      watchPosition:fn, //监视定位数据的改变
      clearWatch ：fn // 取消监视
    }

应用实例：

<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位实例</title>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>

<script type="text/javascript">

    window.onload = function() {
        var x,y;
        if(navigator.geolocation) {
            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
            // 百度地图API功能
            var map = new BMap.Map("container");
            var point = new BMap.Point(x,y);
            map.centerAndZoom(point,12);
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
                else {
                    alert('failed'+this.getStatus());
                }
            },{enableHighAccuracy: true})
            return;
        }
    };
</script>

2、扩展：在网页中如何嵌入百度地图

1）注册百度开发者账号 map.baidu.com —> lbsyun.baidu.com
2）创建一个网站；登录百度地图，为网站申请一个地图的AccessKey
3）在自己的网页中嵌入百度地图提供的API，嵌入百度地图

这里不多讲这个如何嵌入了！（要记住用百度地图必须注册账号，然后引用人家的库就对了！）

7、拖放API

draggable=“true” ，图片和链接默认可以拖拽
重点：拖拽事件
被拖拽元素：ondrag/ondragstart/ondragleave/ondragend
目标元素：ondragenter/ondragover/ondrop/ondragleave
preventDefault()阻止默认事件

8、websocket

web socket 是一个可以在服务器与客户端之间建立一个非http的双向连接！

这个连接是实时的，也是永久的。

服务器可以主动推送消息。

服务器不在需要轮询客户端的请求，服务器与客户端之间通信无需重新建立连接。

也就是可持续性的来回通讯。

var webSocket = new WebSocket （“ws://localhost:8005/socket”）;
//url 必须以“ws” 或者“wss” 文字作为开头：因为不是http  是websocket吗，人家自己的标识，加密传送，记住就好了。
webSocket.send() //发送文本数据，只可以发送文本。（使用json对象把js对象转换文本数据后进行发送）
webSocket.close();//关闭切断通讯连接。
webSocket.onmessage= function(event){
　　var data=event.data;
}  // 接收服务器传来的消息
webSocket.onopen =function(event){
　　//开始通讯时的处理
}
webSocket.onclose =function(event){
　　//通讯结束时的处理
}

9、储存

Cookie存储在用户本地终端上的数据。cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。这使得 cookie 速度很慢而且效率也不高。

//创建
function setCookie(key, value, iDay) {
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = key + '=' + value + ';expires=' + oDate;
}
//删除
function removeCookie(key) {
	setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
//获取
function getCookie(key) {
	var cookieArr = document.cookie.split('; ');
	for(var i = 0; i < cookieArr.length; i++) {
		var arr = cookieArr[i].split('=');
		if(arr[0] === key) {
			return arr[1];
		}
	}
	return false
}

HTML5 提供了两种在客户端存储数据的新方法：localStorage sessionStorage
两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；
localStorage ：没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。
sessionStorage ：针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
localStorage 方法：
localStorage.clear(); //清空
localStorage.length; //数据数量
存储和修改数据：
localStorage.setItem(“name”,“str”);
name若存在即为修改，否则为添加
localStorage.name = “str”;
如果想存储对象类型的数据，需要先用JSON.stringify()将其转成字符串再存储
读取数据：
localStorage.getItem(“name”);

cookie ：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效，储存4K左右
与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题，使用时需要程序员自己封装，源生的Cookie接口不友好。
localStorage：除非被清除，否则永久保存。
sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除
相同点：
一般为5MB
仅在客户端（即浏览器）中保存，不参与和服务器的通信
源生接口可以接受，亦可再次封装来对Object和Array有更好的支持