HTML5

一.关于HTML5的规则

1.新特性应该基于HTML,CSS,JS以及DOM。
2.减少对外部插件的需求
3.更优秀的错误处理
4.更多取代脚本的标记
5.HTML5应该独立于设备
6.开发进程对外公开透明

二.HTML5中的新特性（重要）

用于绘画的canvas元素
用于媒介回放的video和audio元素
对本地离线存储有更好的支持
新的特殊内容元素
新的表单控件，类似：calendar,data,time,email,url,search

三.相关的特性

video的特性

1.浏览器格式支持
2.video相关的属性
3.video对象（js DOM 中Video对象的创建document.getElementcreate，属性，方法，事件）

audio的特性（与video类似）

1.浏览器格式支持
2.属性
3.audio对象（创建document.getElementcreate，属性，方法，事件）

拖放（Drag和drop）过程的实现

需要拖动的元素要设置draggable属性为true
ondragstart 事件调用了一个函数设置拖动元素的属性，dataTransfer.setData()设置被拖动元素的数据类型和值；
ondragover事件规定在何处放置被拖动的数据，dataTransfer.getData（）该方法获取被拖动的数据
涉及到的事件
ondrop 放置事件
ondragover 放到何处
ondragstart 规定拖动的元素数据类型的事件

Canvas画布

使用js在网页上绘制图像，canvas本身没有绘图能力，所以必须在js的内部完成
1.属性（较多）
2.方法（较多）
3.对象：有一个基于 JavaScript 的绘图 API
canvas对象：

属性：height和width
方法：getContext(contextID)方法返回一个用于在画布上绘图的对象，该对象提供了用于在画布上画图的属性和方法
参数： contextID 指定了想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
返回值：一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中

Geolocation地理位置定位

用于定位用户的位置，需要用户许可
方法：getCurrentPosition() 用来获取用户的位置；该方法返回一个对象

HTML5在Web端的存储

之前都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高
HTML5提供了两种方法：

localStorage:没有时间限制的数据存储，即关掉网页下次打开还可以查看到。
sessionStorage:针对一个session的数据存储。关闭页面存储的数据会被删除

localStorage的使用

localStorage只支持string类型的的存储，在对我们日常比较常见的JSON对象类型需要一些转换
localStorage 本质上对字符串的读取，如果存储的内容多会消耗内存，造成页面的卡顿

1.localStorage 的写入
localStorage.setItem(‘myCat’, ‘Tom’);
2.localStorage的读取
let cat = localStorage.getItem(‘myCat’);
3.localStorage的移除
localStorage.removeItem(‘myCat’);
4.清除所有的localStorage
localStorage.clear();

需要注意的
一般会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式；这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

localStorage.setItem(key, JSON.stringify(value))

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法：

JSON.parse(localStorage.getItem(key))

Application Cache应用缓存

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

使用：需在文档标签中包含manifest属性

<html manifest="xxx.appcache"> </html>

每个指定了manifest的页面在用户对其访问时都会被缓存，manifest 文件的建议的文件扩展名是：".appcache"。
使用manifest文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置

关于manifest 文件
manifest是简单的文本文件，它告知浏览器需要和不需要缓存的内容，分为三部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的（/theme.css /logo.gif /main.js）
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存；可以使用星号来指示所有其他资源/文件都需要因特网连接：
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

页面被加载后，如下情况能更新缓存：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

Web Worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能
1.要检测浏览器是不是支持这个功能

typeof(Worker)!=="undefined")

2.创建web worker对象（先检测是否存在worker）

if(typeof(w)=="undefined")
  {
  w=new Worker("xxx.js");
  }

3.终止Web Worker

w.terminate()

4.由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

四.HTML5表单输入类型

在html5中input的type新增的类型，提供了更好的输入控制和验证

email
用于应该包含 e-mail 地址的输入域，在提交表单时会自动检测值是否为邮箱
url
用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。
number
用于包含数值的输入域，能够设定对所接受的数字的限定

<input type="number" name="points" min="1" max="10" value="6" step="3" />

属性分析：
max：最大值 min：最小值
value:input表单显示的默认值
step:规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）

range
用于应该包含一定范围内数字值的输入域，ange 类型显示为滑动条。
属性同上number
Date pickers (date, month, week, time, datetime, datetime-local)
日期选择器(会根据type类型出现可以选择的选择框)

HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

search
用于搜索域，比如站点搜索或 Google 搜索，显示为常规的文本域
color

HTML5表单元素

datalist
规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的
keygen
提供一种验证用户的可靠方法
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
output
用于不同类型的输出，比如计算或脚本输出

HTML5表单属性
新增的属性较多

原文链接：https://blog.csdn.net/qiuqiubili/article/details/106410849