HTML5知识点小记

2016-09-19 本文已影响0人 _MChao

Canvas

对于不支持自定义新标签的浏览器（IE9以下）的，可以使用如下方式

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->

canvas绘制圆时，弧度的位置是不变的，都是从逆时针的0,0.5PI,1PI,1.5PI,2PI

SVG

<g> 代表组
defs 定义将来要使用的功能，<use> 来调用

Communication API

postMessage
XHR2 支持跨域和进度事件

WebSocket API

基本用法

连接

  w = new WebSocket(url, protocol);
  或 w = new WebSocket(url, ["proto1", "proto2"]);

事件

  open 连接建立时
  message 收到消息时
  close 连接关闭时
  error 错误发生时

发送消息
```
  w.send(msg);
```

Forms

控件

tel
email
url
search
range
number
progress
color
datetime
time
week
month

特性

placeholder 提示
autocomplete 自动填充
autofocus 页面载入后，自动获取焦点
spellcheck 检查拼写
datalist和list 通过通过list和datalist，用户可以构造一张选值列表
step 指定值递增的粒度
valueAsNumber 控件值类型与文本的转换

表单验证

获取ValidityState对象

var valCheck = document.myForm.myInput.validity;

验证

valCheck.valid;

valueMissing

  目的：确保表单控件已填写
  用法：加require

typeMismatch

  目的：保证与控件类型（email,url,number）匹配
  用法：给input加type类型

patternMismatch

  目的：保证控件的值是否为有效格式
  用法：给pattern添加匹配规则

tooLong

  用法：避免输入过多字符
  用法：添加maxLength属性

customError

  目的：自定义产生的错误信息
  用法：setCustomValidity(Msg);

关闭验证

    在标签添加 formnovalidate

拖动

事件

dragstart 开始拖动时触发
drag 拖动时触发
dragenter 鼠标进入放置框或拖动元素时触发
dragleave鼠标离开放置框或拖动元素时触发
dragover 鼠标在移动时
drop 释放鼠标是触发
dragend 拖动的最后一个事件

设置可拖动
给标签添加可拖动属性draggable

<div id="myDragSource" draggable="true">

传输和控制

dataTransfer 对象

Web Workers

创建

var worker = new Worker("myJS.js");

内联

<script id="myWorker" type="javascript/worker">

共享

var shareWorker = new SharedWorker("sharedWorker.js");

多个JS文件的加载和执行

importScript("file1.js", "file2.js");

会顺序加载和执行

Web Storage

cookies
生命周期由用户自己设置

localStorage
生命周期很长

sessionStorage

设置与获取数据

sessionStorage.setItem("myKey", "myValue");
sessionStorage.myKey = "myValue";
sessionStorage["myKey"] = "myValue";

当浏览器或者标签关闭时清除

openDatabase

IndexDB

App Cache

manifest

<html manifest="application.appcache">