HTML5新增了很多新的元素及功能：图形绘制，多媒体，页面结构标签，拖放，定位，缓存，history，网络通讯等
- 语义化标签：
| 标签 | 描述 |
|---|---|
<hader></header> | 文档的头部区域 |
<footer></footer> | 文档的尾部区域 |
<nav></nav> | 文档的导航 |
<section></section> | 文档中的节 |
<article></article> | 页面独立的内容区域 |
<aside></aside> | 页面的侧边栏内容 |
<detailes></detailes> | 文档或文档某个部分的细节 |
<summary></summary> | 标签包含 details 元素的标题 |
<dialog></dialog> | 对话框，比如提示框 |
- 增强型表单
HTML5提供了input输入类型，更好的输入控制和验证
| 类型 | 描述 |
|---|---|
| color | 用于选取颜色 |
| date | 日期选择器 |
| datetime-local | 类型允许你选择一个日期和时间 (无时区). |
| 类型用于应该包含 e-mail 地址的输入域 | |
| month | 选择月份 |
| number | 搭配max， min ，maxlength使用 校验数值的输入域 |
| range | max, min, value指定范围的滑动条 |
| time | 类型允许你选择一个时间。 |
| url | URL 地址的输入域 |
- 新增的表单属性
| 类型 | 描述 |
|---|---|
| autocomplete | 自动填充 |
| autofocus | 页面加载自动聚焦 |
| form | 规定输入域所属的一个或多个表单 |
| form action | 描述表单提交的URL地址 |
| formenctype | 描述了表单提交到服务器的数据编码 (只针对method为post的表单) |
| formmethod | 定义了表单提交的方式 |
| formnovalidate | 表单提交时无需被验证 |
| formtarget | |
| height 与 width | 规定用于 image 类型的 标签的图像高度和宽度 |
| list | list 属性规定输入域的 datalist |
| min 与 max | 数字或日期的 input 类型规定限定 |
| multiple | email 和 file 类型元素中可选择多个值 |
| pattern (regexp) | 正则表达式用于验证 |
| placeholder | 输入提示 |
| required | 必填校验 |
| step | 数值增减幅度 |
- 视频和音频
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签（浏览器不支持时显示文本）
</video>
control 属性供添加播放、暂停和音量控件
也可以通过video DOM对象的 pause play 控制播放和暂停
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
- 图形标签 canvas
canvas是一个图形容器
指定一个id属性 (用于脚本中引用)
width 和 height 属性定义的画布的大小
通过 JavaScript 来绘制 2D 图形
// 1. 首先，找到 <canvas> 元素:var c=document.getElementById("myCanvas");
// 2. 创建 context 对象var ctx=c.getContext("2d");// 3. fillStyle属性可以是CSS颜色，渐变，或图案ctx.fillStyle="#FF0000";// 4. fillRect(x,y,width,height) 方法定义了矩形当前的填充方式ctx.fillRect(0,0,150,75);// 5. 绘制路径
ctx.moveTo(0,0); // 开始坐标
ctx.lineTo(200,100); // 结束坐标
ctx.stroke(); // 绘制// 6. arc(x,y,r,start,stop) 绘制圆形
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); // 绘制边
ctx.stroke(); // 填充颜色
// 7. 文本定义
ctx.font="30px Arial"; // 定义文本字体
ctx.fillText("Hello World",10,50); // 定义文本内容
ctx.strokeText("Hello World",10,50); // 内容描边// 8.创建渐变
// createLinearGradient(x,y,x1,y1) - 创建线条渐变
// createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// 绘制容器， 填充为渐变对象
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);// 9. drawImage(image,x,y) 绘制图片
var img = new Image(); //创建图片对象
img.src = 'img/timg.jpg';
img.onload = function() {ctx.drawImage(this,20,80);
}
常用属性方法：https://www.runoob.com/tags/ref-canvas.html
-
SVG 定义可缩放矢量图形，使用 XML 描述 2D 图形的语言
-
拖放API
draggable: ture, 可拖动属性
ondragstart: 拖动对象绑定拖动事件，ev.dataTransfer.setData(“Text”,ev.target.id) 方法设置被拖数据的数据类型和值
ondragover: 事件规定在何处放置被拖动的数据,这要通过调用 ondragover 事件的 event.preventDefault() 方法
ondrop: 放置事件，ev.dataTransfer.getData(“Text”) 方法获得被拖的数据, ev.target.appendChild(document.getElementById(data)) -
Geolocation（地理定位）
function getLocation()
{if (navigator.geolocation){// 返回用户位置的经度和纬度navigator.geolocation.getCurrentPosition(showPosition, showError);// 第一个参数showPosition中规定的函数返回一个包含经纬度的对象// 第二个参数用于处理错误}else{x.innerHTML="该浏览器不支持获取地理位置。";}
}function showPosition(position)
{x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;
}
function showError(error)
{switch(error.code) {case error.PERMISSION_DENIED:x.innerHTML="用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:x.innerHTML="位置信息是不可用的。"break;case error.TIMEOUT:x.innerHTML="请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:x.innerHTML="未知错误。"break;}
}
-
Web 存储localStorage（长久保存） 和 sessionStorage （临时保存）
可以存储大量的数据，而不影响网站的性能，可使用的API都相同，常用的有如下几个
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index); -
网络通讯：
持久连接：websoket,
向服务器推送事件： server sent events
即时通讯： webRTC,
异步请求；XMLHTTPRequest -
Web Workers是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
检测浏览器是否支持 Web Worker:if(typeof(Worker)!=="undefined")
创建web worker 对象：w=new Worker("demo_workers.js");, 脚本存储于 “demo_workers.js” 文件中
终止:w.terminate();
回收对象：w = undefined;
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：
. window 对象
. document 对象
. parent 对象
