HTML5新特性

最新推荐文章于 2024-09-02 17:20:28 发布

agumr

最新推荐文章于 2024-09-02 17:20:28 发布

阅读量485

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_39682399/article/details/108537038

版权

一.语义化标签

HTML5提供了很多语义化标签

<header> 页眉内容
<nav> 导航
<section> 表示文档的一个区域，通过是否含一个标题作为子节点来辨识
<aside> 与文档无关的内容
<footer> 页脚内容
<article> 表示文档、页面、应用或网站中的独立结构
<address> 地址信息

语义化标签的优点:
1. 在丢失样式的时候，仍然会显示出清晰的结构
2. 方便搜索引擎检索，有利于SEO
3. 方便其他设备解析（如屏幕阅读器，移动设备）
4. 增强代码的可读性，方便开发与维护，有利于团队协作

二.表单增强

HTML5提供了更多的input输入类型，可以更好进行输入控制与验证。新增了一些form表单标签以属性。

新增的input类型：

color 颜色
number 数字
range 范围
url URL输入
datetime 日期（UTC）
datetime-local 日期（无时区）
date 日期
month 月
week 周
time 时间
email 邮件
tel 电话
search 搜索

新增的表单标签

<datalist> 用户在输入时可以看到的可选项列表
<progress> 展示进度条
<meter> 刻度值，温度，分数，重量等
<keygen> 用于验证，生成一个公钥与私钥
<output> 展示输出结果

新增的属性

placeholder input默认展示是的文本
required 输入内容是否可以为空
pattern 用一个正则表达式验证输入的值
min/max 设置最大最小值
step 数字间隔 <input type="number" min="0" max="10" step = ‘1’>
width/height <input type="image" width="100px" height="100px" >
autofoucs 页面加载成功时，域自动获得焦点
multiple input标签可以选择多个值

三. 拖放API

拖拽： drag
释放： drop

事件

被拖拽的源对象可以触发的事件：
1. ondragstart：源对象开始被拖动
2. ondrag：源对象被拖动过程中
3. ondragend：源对象被释放
拖拽的目标对象触发的事件：
1. ondragenter 拖拽源对象进入目标对象
2. ondragover 拖拽源对象悬停在目标对象上方
3. ondragleave 拖拽源对象离开目标对象
4. ondrop 拖拽源对象在目标对象上释放

数据传输

HTML5提供了一些方法可以在拖拽源对象与目标对象之间传递数据

e.datatransfer() 数据传输对象
e.datatransfer().setData(K,V) 源对象上保存数据 K，V都是字符串
e.datatransfer().getData(K,V) 目标对象上读取数据

三.音频和视频

html5提供了视频和音频标签用来播放视频和音频。

视频

支持的视频格式：ogg,MPEG 4,WebM 三种格式。由于版权原因，不同浏览器支持的格式不同。

video标签的使用十分简单。

<video src="./video/video.mp4" controls></video>

//多浏览器支持的方案
<video controls>
	<source src="./video.video.ogg">
	<source src="./video.video.mp4">
	你的浏览器不支持HTML视频播放功能
</video>

可以通过附加属性来实现更好的交互效果。

autoplay 自动播放
controls 默认播放控件
loop 循环播放
width/height 宽高

音频

支持的音频格式： mp3,ogg,wav.不同的浏览器支持的格式不同

audio标签的使用也十分简单

	<audio src="./audio/audio.mp3"></audio>

	//支持多数浏览器的方案
	<audio controls>
		<source src="./src/a.mp3">
		<source src="./src/b.ogg">
		<source src="./src/c.wav">
	</audio>

可以通过附加属性来实现更好的交互效果。
autoplay 自动播放
controls 默认播放控件
loop 循环播放
width/height 宽高

API

方法
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
requestFullScreen() 全屏
cancelFullScreen() 取消全屏
属性
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量
事件
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据，但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
常用的方法

	var video = $('video')[0];
	//播放
	$('button').eq(0).click(function(){
		video.play();
	});
	//暂停
	$('button').eq(1).click(function(){
		video.pause();
	});	
	//快进10s
	$("button").eq(2).click(function () {
        v.currentTime += 10;
    });
    //后退10s
	$("button").eq(3).click(function () {
        v.currentTime -= 10;
    });
    //二倍速
    $("button").eq(4).click(function () {
        v.playbackRate = 2;
    });
    //音量
    $("button").eq(5).click(function () {
       	if(v.volume>=1){
       		v.volume = 1;
       	}else{
       	    v.volume += 0.1;
       	}
    });
    //静音
    $("button").eq(6).click(function () {
        if(v.muted){
            v.muted = false;//开音
        }else {
            v.muted = true;
        }
    });
    //全屏
    $("button").eq(7).click(function () {
        //有兼容性问题. 在js中使用驼峰命名法来设置
        v.webkitRequestFullScreen();s
    });

四.Canvas

Canvas 画布，用于图形的绘制。通过脚本（javascript）来实现。

Canvas 容器

<canvas id="cvs" width="100" height="100">

脚本

var cvs = document.querySelector('#cvs');
var ctx = cvs.getContext('2d')

ctx.beginPath();
ctx.lineWidth="5";     // 线宽
ctx.strokeStyle="red"; // 红色路径

ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();          //绘制

五.SVG绘图

什么是SVG
SVG 是可伸缩矢量模型。
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
优点
SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；
SVG 示例

<svg xmls="http://www.w3.org/2000/svg" version="1.1" height="500px" width="500px">
	<circle cx="200" cy="100" r="100" stroke="#afeedd"
	      stroke-width="5" fill="#f0ddff" />
</svg>

在这里插入图片描述

是SVG中用来创建圆形的标签，cx 和 cy 属性定义圆中心的 x 和 y 坐标，如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r属性定义圆的半径；
stroke 和 stroke-width 属性控制如何显示形状的轮廓，fill 属性设置形状内的颜色；

Canvas 与 SVG的区别与联系
1. SVG适用于描述XML中的2D图形的语言
2. Canvas随时随地绘制2D图形（使用javaScript）
3. SVG是基于XML的，意味这可以操作DOM，渲染速度较慢
4. 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
5. Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。
6. Canvas
  依赖分辨率
  不支持事件处理器
  能够以.png或.jpg格式保存结果图像
  文字呈现功能比较简单
  最合适图像密集的游戏
7. SVG
  不依赖分辨率
  支持事件处理器
  复杂度会减慢搞渲染速度
  适合大型渲染区域的应用程序
  不适合游戏应用

六.地理API

通过geolocation.getCurrentLocation() 获取位置信息，以实现LBS服务

 function getLocation() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var longtitude = position.coords.longitude,
                    latitude = position.coords.latitude;
                showObject(position.coords,0);
            },function (error) {
                switch (error.code) {
                    case '1':
                        alert("位置服务被拒绝");
                        break;
                    case '2':
                        alert("暂时获取不到位置信息");
                        break;
                    case '3':
                        alert("获取信息超时")
                        break;
                    default :
                        alert("未知错误")
                        break;
                }
            },{
                enableHighAccuracy: true,
                maximumAge: 100,
                accuracy:100
            })
        } else {
            alert("你的浏览器不支持使用HTML5获取位置信息")
        }
    }
    function showObject(obj,k) {
        if(!obj) return ;
        for(var i in obj) {
           if(typeof obj[i] !== "object" || obj[i] === null) {
               for(var j=0;j<k;j++) {
                   document.write('&nbsp &nbsp&nbsp &nbsp');
               }
               document.write(i + " : " + obj[i] + "<br/>");
           } else {
               document.write(i + " : " + obj[i] + "<br/>");
               showObject(obj[i],k+1);
           }
        }

    }
    getLocation();

七.WebStorage

WebStorage 是HTML5提供的持久化解决方案，意于解决本来不该由cookie解决的本地存储问题。
WebStorage提供了两种API，localStorage和sessionStorage。localstorage 用于永久性的数据存储，数据一直存在，除非手动清除。
sessionstorage 用于临时性的数据存储，只在会话期间有效，关闭浏览器后会自动删除
API
localStorage sessionStorage 两个全局对象两个对象有相同的API
- length 键值对的数量
- key根据index 获取键名
- getItem 根据key获取value
- setItem 添加键值对
- removeItem 根据key删除键值对
- clear 清空storage
事件
HTML5 规定了一个storage事件，在WebStorage发生变化时触发。

	window.addEventListener('storage',function(e){
	 	console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
        console.log(e.storageArea ==localStorage);
	})

相比于Cookie

容量上，Webstorage 有大概5M的大小，虽然存储图片，视频不够，但绝大多数操作足够了。
安全性：Webstorage 并不会在HTTP Header中附加数据，所以相对来说安全。
Webstorage 不会在每次请求中都发送数据，可以节省不必要的流量。

注意点

浏览器兼容性，HTML5几乎被大多数浏览器兼容，IE7，IE6可以使用IE user data 实现。
WebStoage 中键值对都是字符串的形式，其他类型的数据可以使用JSON对象的stringfiy和parse方法进行转换。

八.WebWorker

WebWorker 是HTML5提供的一个javascript多线程解决方案。可以通过传递一个javascript 文件给WebWoker，从而实现多线程执行。

使用方法

Web Worker的基本原理是，在当前文件中使用Worker类加载一个javascript文件来开辟一个新线程。同时提供了数据交换的接口：postMessage和onMessage。

worker = new Worker(url);
worker.postMessage(data);
worker.onmessage(function(data){
	console.log(data)
})
worker.terminate();  //终止执行

//worker.js
onmessage = function(data) {
	console.log(data);
}
postMessage(data);

Worker可以用来做什么

利用Worker可以在前端执行一些复杂的大量运算而不会影响页面的展示。
可以通过importScripts(url) 加载另外的脚本文件
可以使用setTimeout setInterval
可以使用XMLHTTPRequest来发送请求
可以访问navigator的部分属性。

局限性

不能跨域加载JS
worker内代码不能访问DOM
兼容性与差异，FireFox支持在Worker中创建新的worker ，chrome中不行

九.WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

websocket 出现的原因

为了实现推送技术,很多网站采用了AJAX轮询的技术.轮询值得是以特定的事件间隔,有浏览器向服务器发送HTTP请求,服务器返回最新的数据给浏览器.这种模式有明显的的缺点.浏览器需要不断地发送求,HTTP请求可能包含较长的头部,真正有效的数据可能只占一小部分,会浪费较多的带宽资源.
使用WebSocket ,服务器与浏览器的连接只需要进行一次握手,就可以进行数据的相互传送.

API

var socket = new WebSocket(url,[protocol]);

属性
- socket.readyState
  只读属性 readyState 表示连接状态，可以是以下值：
  0 - 表示连接尚未建立。
  1 - 表示连接已建立，可以进行通信。
  2 - 表示连接正在进行关闭。
  3 - 表示连接已经关闭或者连接不能打开。
- Socket.bufferedAmount
  只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
事件
- Socket.onopen 连接建立时触发
- Socket.onmessage 客户端接收服务端数据时触发
- Socket.onerror 通信发生错误时触发
- Socket.onclose 连接关闭时触发
方法
- Socket.send() 使用连接发送数据
- Socket.close() 关闭连接

参考链接

https://www.jianshu.com/p/132b58273e27
https://www.cnblogs.com/binguo666/p/10928907.html
https://www.cnblogs.com/dolphinX/p/3348469.html
https://www.cnblogs.com/feng_013/archive/2011/09/20/2175007.html

agumr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新特性

HTML5 新特性一.语义化标签二.表单增强三. 拖放API事件数据传输一.语义化标签HTML5提供了很多语义化标签<header> 页眉内容<nav> 导航<section> 表示文档的一个区域，通过是否含一个标题作为子节点来辨识<aside> 与文档无关的内容<footer> 页脚内容<article> 表示文档、页面、应用或网站中的独立结构<address> 地址信息语义化标签的优点:在丢失
复制链接

扫一扫