HTML5HTML5十大特性总结一、语义标签二、增强型表单三、视频和音频四、Canvas绘图五、SVG绘图六

HTML5十大特性总结

一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、拖拉API

七、WebWorker

八、WebStorage

九、WebSocket

十、地理定位

一、语义标签

标签	描述
`<header>`	定义了文档的头部区域
`<footer>`	定义了文档的尾部区域
`<nav>`	定义文档的导航
`<section>`	定义文档中的节
`<article>`	定义文章
`<aside>`	定义页面以外的内容
`<details>`	定义用户可以看到或者隐藏的额外细节
`<summary>`	标签包含details元素的标题
`<dialog>`	定义对话框
`<figure>`	定义自包含内容，如图表
`<main>`	定义文档主内容
`<mark>`	定义文档的主内容
`<time>`	定义日期/时间

html5新增表单属性

属性	描述
`placehoder`	输入框默认提示文字
`required`	要求输入的内容是否可为空
`pattern`	描述一个正则表达式验证输入的值
`min/max`	设置元素最小/最大值
`step`	为输入域规定合法的数字间隔
`height/wdith`	用于image类型标签图像高度/宽度
`autofocus`	规定在页面加载时，域自动获得焦点
`multiple`	规定元素中可选择多个值

pattern用于描述一个正则表达式验证输入的值

<form action="">
    <input type="text" pattern="^[0-9]*[1-9][0-9]*$" placeholder="请输入正整数" required/>
   <input type="submit">
  </form>

在一个form表单中可以达到一个简单的用户校验规则

三、音频和视频

html5提供了音频和视频文件的标准，既使用元素。

音频：

<audio controls>  
    <source src="" type="audio">
  </audio>

视频：

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

四、Canvas绘图

<canvas>元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。

//基本语法
  <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
// 在使用canvas时需要设定一个高度跟宽度将画布定下
// 文中的信息为浏览器不支持canvas标签时显示的文字
 
// 当画布定下后开始用JS进行画图
<script>
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
    //  通过getContext("2d");获取到2d的上下文对象
var context = drawing.getContext("2d");
// 通过fillRect()方法 在画布上绘制的矩形填充指定的fillstyle颜色
    
//绘制红色矩形
context.fillStyle = "#ff0000";  //  它们的默认值都是”#000000”。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、 rgba、 hsl 或 hsla。
context.fillRect(10, 10, 50, 50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
    //  传四个参数分别是矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
}
</script>

www.runoob.com/w3cnote/htm…

五、SVG绘图

了解什么是SVG

SVG指可伸缩矢量图形，是一种使用 XML 描述 2D 图形的语言
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG的优势
SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的 SVG与Canvas区别

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用
随时随地绘制2D图形（使用javaScript）	基于XML的，意味这可以操作DOM，渲染速度较慢
改变某一个位置，整个画布会重绘。	发生改变，页面就会发生重绘

六、地理定位

使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务” 可以基于此实现计算位置距离

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

### 七、拖放API

 拖放是一种常见的特性，即捉取对象以后拖到另一个位置。

在html5中，拖放是标准的一部分，任何元素都能够拖放。

```

当元素拖动时，我们可以检查其拖动的数据。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本

八、Web Worker

Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。

基本使用：

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，

起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world");     //向worker发送数据
worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>

九、Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。 websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。客户端存储数据有两个对象，其用法基本是一致。 localStorage：没有时间限制的数据存储 sessionStorage:在浏览器关闭的时候就会清除。

localStorage.setItem(key,value);//保存数据
    let value = localStorage.getItem(key);//读取数据
    localStorage.removeItem(key);//删除单个数据
    localStorage.clear();//删除所有数据
    let key = localStorage.key(index);//得到某个索引的值

十、WebSocket

WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。主要有以下几个特点特点：

握手阶段采用HTTP协议，默认端口是80和443
建立在TCP协议基础之上，和http协议同属于应用层
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，为wss），如ws://localhost:8023