HTML5知识点小记

Canvas

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

HTML5Shiv

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

SVG

• 代表组

• defs 定义将来要使用的功能， 来调用

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

传输和控制

• dataTransfer 对象

Web Workers

创建

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

• 内联