H5新特性

最新推荐文章于 2024-06-24 14:21:19 发布

weixin_42069386

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量173

点赞数 1

本文链接：https://blog.csdn.net/weixin_42069386/article/details/87919226

版权

HTML5： HTML、XHTML 以及 HTML DOM 的新标准

一.语义特性

增加了<nav>, <header>, <footer> 以及 <figure>等标签

二.多媒体

用于媒介回放的 video 和 audio 元素

video视频元素

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
width	无单位	设置宽度
height	无单位	高度
loop	loop	循环播放
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url

DOM方法：play()，pause()，load()

属性：currentSrc，currentTime，videoWidth，videoHeight，duration，muted，volume，height，width

audio音频元素

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
audio 元素允许包含多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
</audio>

三.（drag,drop）拖放

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
全局属性draggable设置元素为可拖动的

<img draggable="true">

事件：1.ondragstart （元素开始拖动）， 2.ondragover（规定在何处放置被拖动的数据。ps：默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，调用事件的 event.preventDefault() 方法。），3.ondrop（放置被拖数据时）
方法：event.dataTransfer.setData()（设置被拖数据的数据类型和值）

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);//text为数据类型，id为拖动的数据
}

四.图像效果

1.canvas元素

canvas：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像；画布是一个矩形区域；canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建canvas

<canvas id="can" width="200" height="100"></canvas>

通过JS绘制

var can=document.getElementById("can");
var cxt=can.getContext("2d");  //创建context对象

//方法和属性
cxt.strokeStyle= '';   //设置边框颜色
cxt.fillStyle= ''；  //设置填充颜色
cxt.lineWidth=1; 
cxt.beginPath();  //开始绘制路径
cxt.moveTo(x,y);  //移动点位置
cxt.lineTo(x,y); //绘制线段
cxt.stroke();   //边框
cxt.fill();  //填充

closePath();  //在fill()和stroke()前使用。使和起始点闭合路径

cxt.beginPath();
cxt.rect(x,y,width,height);  //绘制矩形
cxt.fill();

cxt.fillRect(x,y,width,height);   //绘制填充的矩形
cxt.strokeRect(x,y,width,height);  //绘制边框矩形

cxt.lineJoin = "bevel";  //lineJoin属性值为折角bevel或圆角round.
ctx.strokeRect(10,10,100,100);  //只适用于带边框的矩形

clearRect(x,y,width,height);  //清除指定区域的矩形内容

cxt.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);  //绘制圆
//anticlockwise为true,逆时针；反之为顺时针。
//角度为弧度制。按右下左上右的顺序，弧度分别为0pi,0.5pi,1pi,1.5pi,2pi.

var img=new Img();
img.src="flower.png"
cxt.drawImage(img,0,0);  //画布上放置图像

2.svg元素

SVG(Scalable Vector Graphics)：可伸缩矢量图形。用于定义用于网络的基于矢量的图形。使用 XML 格式描述2D图形的语言，且图像在放大或改变尺寸的情况下其图形质量不会有损失。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

五.离线 & 存储

对本地离线存储的更好的支持,localStorage,sessionStotage,Cookies等

六.地理（Geolocation）API

支持地理位置的API的浏览器会定义navigator.geolocation
方法：getCurrentPosition() （获取用户当前位置），watchPosition() （获取并不断监视当前位置，一当有更改就会触发指定函数，clearWatch() （停止监听用户位置）

if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(showPosition);  //获取当前位置
}
function showPosition(position)
{
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
}

getCurrentPosition(showPosition,showError,opts)：若getCurrentPosition()运行成功，则向第一个参数中规定的函数返回一个coordinates对象；第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数；第三个参数为一个配置对象。该对象的属性指定是否需要高精度的位置信息，该位置的过期时间，以及系统在多长范围内获取位置信息。

七.应用程序缓存

HTML5 引入了应用程序缓存。这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

优点：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

<!DOCTYPE HTML>
<html manifest="demo.appcache">  //如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性.并编写manifest文件
...
</html>

八.Web Workers

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以点击、选取内容等等，而此时 web worker 在后台运行。

九.Page Visibility API

document.hidden：表示页面是否隐藏的布尔值。（页面在后台标签页或浏览器最小化）
document.visibilityState：表示浏览器的状态
visibilitychange事件：当文档在可见和不可见间切换时调用

weixin_42069386

关注

1
点赞
踩
0

收藏

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

HTML5： HTML、XHTML 以及 HTML DOM 的新标准一.语义特性增加了&lt;nav&gt;, &lt;header&gt;, &lt;footer&gt; 以及 &lt;figure&gt;等标签二.多媒体用于媒介回放的video 和audio 元素video视频元素属性值描述 autoplay autoplay 如果出现该...
复制链接

扫一扫