HTML5的新特性

最新推荐文章于 2024-04-09 15:36:07 发布

seven-yang

最新推荐文章于 2024-04-09 15:36:07 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/yangyixue123/article/details/79139455

版权

参考链接

requestAnimationFrame

可以和setTImeout和setInteral作比较,都属于定时器。
requestAnimationFrame:定时器，不用设置时间间隔，采用的是系统的时间间隔，由系统的刷新速度来决定何时执行回调函数。让动画有一致的刷新机制，节省资源，提高系统性能。

优势：

CPU节能：当页面未激活的时候，屏幕的刷新会停止，所以刷新动画也会停止。当页面被激活的时候，动画会从停止的地方开始
函数节流：可以防止一个刷新间隔内发生多次函数执行

缺点：目前兼容性不好，微信IOS小程序不支持这个属性

//添加一个小点

setTimeout和setInterval的互相模拟
setTimeout:指定毫秒数后调用函数或表达式（最短执行4ms）
setInterval:按照指定周期循环调用函数或者表达式，直到clearInterval，或者窗口关闭
* 模拟setInterval:

  function a() {
  setTimeout (function (){
     a()
  },4000)
}
function B (){
  a();
}

模拟setTimeout

function test(){
  clearId = setInterval(function(){
      A();
  })
}
function A(){
...
clearInterval(clearId);
}

webSocket

出现的原因：网络通信在websocket 出现之前使用HTTP连接，HTTP连接是半双工连接，基于request/response进行数据传输，所以不论是轮询、长轮询还是流模式都不是最好的解决方法。所以使用websocket全双工的双向通信通道，只用建立一次连接就会一直保持，而且客户端和服务端都可以主动通信

轮询：定期发送请求，立即接受请求，但是定期的时间不好确定
长轮询：在没有发送请求时，服务器一直等待，直到超时，而超时的时间也难以设置
流：建立连接后不会关闭，直到被关闭或者超时，但可能会被防火墙或者代码缓冲住response从而导致响应被延迟

webSocket
在单个 TCP 连接上进行全双工通讯的协议,允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。

客户端的设置

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

url:指定连接的URL
protocol可选，指定可接受的子协议
服务端设置

语义化标签

分类

行属性标签(span)：mark / time / output /
块属性标签(div): nav / main / header / footer / section / figure / details / aside / article
内联块标签(img): progress

article : 定义文章

aside : 定义和页面关联度较低的内容

datalist : 定义列表项

demo：

    <input list="browser">
    <datalist id="browser">
        <option value="IE">IE</option>
        <option value="Chrome">Chrome</option>
        <option value="Safari">Safari</option>
        <option value="Opera">Opera</option>
        <option value="FirFox">FirFox</option>
    </datalist>

details : 定义一小块区域，可以收起，可以展开 open属性代表默认展开
– 如果想要修改名称，使用summary标签

demo：

  <details open>
        <summary>点击展开</summary> 
        <p>我是隐藏的详细内容</p>
    </details>

figure : 包裹一块图片等信息

figcaption : 设置该区域的名称

demo：

<figure>
       <figcaption>图片区域标题</figcaption>
       <p>定义一块图片区域</p>
   </figure>

section : 定义文档中的某个区域类似于 div

header : 代表一块区域的头部

footer : 代表一块区域的尾部

main : 代表主要区域

nav : 定义导航部分

mark : 标记文本

time : 定义时间

progress : 进度条

output : 输出内容的标签

音频视频（audio、video）

音频audio

浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素，但是 Internet Explorer 8 及更早IE版本不支持<audio> 元素.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio>之间需要插入浏览器不支持的<audio>元素的提示文本。<audio>元素允许使用多个<source>元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

视频video

浏览器支持:nternet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.
注意: Internet Explorer 8 或者更早的IE版本不支持元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

元素提供了播放、暂停和音量控件来控制视频。
同时元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性或者浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
需要在标签之间插入的容是提供给不支持 video 元素的浏览器显示的。
元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

canvas画布API

处理图画模糊的方法：

将canvas绘制过程放大2倍，然后将整个canvas元素或者其父元素缩小两倍。

注意：

 canvas元素的宽和高为之前的两倍
 使用ctx.scale(2,2)将绘图放大两倍
 在父元素中添加的class中有放大缩小元素的zoom属性，0.5为缩小一倍。当然你也可以用css3中transform:scale(0.5,0.5)的办法去缩小，只是使用这种方法不会改变布局大小，即canvas虽然视觉上变小了，但它仍旧会占两倍的高和宽。

浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

画布在网页是一个矩形框，通过<canvas>元素来绘制

注意：标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小，可以在HTML页面中使用多个元素.

<canvas id="myCanvas" width="200" height="100" style="border:10px dotted #000000; background:#ddd;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

效果图：

这里写图片描述

canvas本身没有绘图能力，所有绘图工作必须在JS内部完成

demo：绘制一个红色矩形

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

分析：

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

绘制线条

moveTo(x,y) 定义线条开始坐标
ineTo(x,y) 定义线条结束坐标

注意：绘制线条我们必须使用到 “ink” 的方法，就像stroke().

demo：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

绘制园

arc(x,y,r,start,stop)
在绘制圆形时使用 “ink” 的方法, 比如 stroke() 或者 fill().

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
必须使用 fillText()

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

绘制渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

注意：使用渐变对象时，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient()

demo
线性渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

图像绘制

把一幅图像放置到画布上, 使用drawImage(image,x,y)

地理定位

用 getCurrentPosition() 方法来获得用户的位置。

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

demo：返回用户位置的经度和纬度:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + posit

分析：检测是否支持地理定位
     如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
     如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
     showPosition() 函数获得并显示经度和纬度

web存储

localStorage - 没有时间限制的数据存储,长期存储，除非主动删除
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。

检查浏览器是否支持localStorage 和 sessionStorage

if(typeof(Storage)!=="undefined")

  {

  // 是的! 支持 localStorage  sessionStorage 对象!

  // 一些代码.....

  }

else

  {

  // 抱歉! 不支持 web 存储。

  }

localStorage 对象

localStorage和 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

demo：创建localStorage

localStorage.sitename="W3Cschool在线教程"; 
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

 这个例子中，创建一个 localStorage 键/值对 key="sitename" 和 value="W3Cschool在线教程"，检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

sessionStorage 对象

针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

demo：创建并访问一个 sessionStorage

if (sessionStorage.clickcount) 
  { 
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; 
  } 
else 
  { 
  sessionStorage.clickcount=1; 
  } 
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

表单控件

添加了新的input类型：email、url、number、search、color、range、datetime-local

Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域

E-mail: <input type="email" name="email">

在提交表单时，会自动验证 email 域的值是否合法有效:

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

添加您的主页: <input type="url" name="homepage">

Input 类型: number

number 类型用于应该包含数值的输入域,还能设定对所接受的数字的限定

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

Input 类型: search

search 类型用于搜索域，比如站点搜索或 Google 搜索.

Search Google: <input type="search" name="googlesearch">

Input 类型: color

color 类型用在input字段主要用于选取颜色

选择你喜欢的颜色: <input type="color" name="favcolor">

Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

规定对数字类型的限定的属性：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

<input type="range" name="points" min="1" max="10"

Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区)

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

seven-yang

关注

0
点赞
踩
1

收藏

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

参考链接语义化标签分类行属性标签(span)：mark / time / output /块属性标签(div): nav / main / header / footer / section / figure / details / aside / article内联块标签(img): progressarticle : 定义文章aside : 定义和页面关联度较低...
复制链接

扫一扫