HTML5笔记

文章概述

本篇文章记录HTML5笔记。

视频

video

语法格式

controls 属性供添加播放、暂停和音量控件。
video标签中间可插入文本作为浏览器不支持时的错误提示；
video元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

视频格式

当前，video 元素支持三种视频格式：

1
2
3

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

标签属性

autoplay=”autoplay”：如果出现该属性，则视频在就绪后马上播放。
controls=”controls”：如果出现该属性，则向用户显示控件，比如播放按钮。
loop=”loop” 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload=”auto”

如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。

可能的值：
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

src=”url”：要播放的视频的 URL。
height：设置视频播放器的高度。
width：设置视频播放器的宽度。
poster=”url”：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
muted=”muted”：规定视频的音频输出应该被静音。

DOM控制

HTML5 video元素同样拥有方法、属性和事件。
方法用于播放、暂停以及加载等。
属性（比如时长、音量等）可以被读取或设置。
DOM 事件能够通知您，比方说，video 元素开始播放、已暂停，已停止，等等。

音频

audio

语法格式

controls 属性供添加播放、暂停和音量控件。
audio标签中间可插入文本作为浏览器不支持时的错误提示；
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式；

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

音频格式

audio 元素支持三种音频格式：

Ogg Vorbis
MP3
Wav

标签属性

autoplay=”autoplay”：如果出现该属性，则视频在就绪后马上播放。
controls=”controls”：如果出现该属性，则向用户显示控件，比如播放按钮。
loop=”loop” 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload=”auto”

如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。

可能的值：
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

src=”url”：要播放的视频的 URL。
muted=”muted”：规定视频的音频输出应该被静音。

拖放

概述

即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放步骤

配置被拖动元素

1
2

1. 设置元素为可拖放：draggable="true"
2. 元素被拖动时，指定事件：ondragstart="drag(event)",设置被拖动的数据类型和值：ev.dataTransfer.setData("Text",ev.target.id)。

配置目标容器

容器设置放置被拖动的数据: ondragover=”allowDrop(event)”

1 2	ondragover默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须通过event.preventDefault()阻止对元素的默认处理方式。

放置被拖数据时发生ondrop事件，指定处理方法：ondrop=”drop(event)”

1
2
3

1> drop需要调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）；
2> 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
3> 把被拖元素追加到放置元素（目标元素）中

示例代码

<script>
    function drag(ev){
        // setData方法设置被拖数据的数据类型和值：
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function allowDrop(ev){
        // 元素默认无法防止，阻止默认处理方式；
        ev.preventDefault();
    }
    function drop(ev){
        // 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
        ev.preventDefault();
        // 获得被拖的数据
        var data=ev.dataTransfer.getData("Text");
        // 被拖元素追加到放置元素（目标元素）中
        ev.target.appendChild(document.getElementById(data));
    }
</script>

<div id="divX" 
    ondrop="drop(event)"
    ondragover="allowDrop(event)">
</div>

<img id="dragX" 
    draggable="true" 
    ondragstart="drag(event)" />

参考

DataTransfer

DataTransfer(MDN注释) 对象用来保存，通过拖放动作，拖动到浏览器的数据；
这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建。

方法

obj.setData(type,data)：
设置被拖数据的数据类型和值；

为一个给定的类型设置数据。
如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。
如果已经存在的数据类型，替换相同的位置的现有数据。
就是，当更换相同类型的数据时，不会更改类型列表的顺序。

Canvas

概述

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
Canvas可以用JavaScript在上面绘制各种图表、动画等。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
JavaScript 使用 id 来寻找 canvas 元素;
js通过getContext(“2d|3d”)创建用于绘制的对象；

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d"); 
</script>

与svg比较

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

Canvas支持

由于浏览器对HTML5标准支持不一致，通常在

1
2
3

<canvas id="test-stock" width="300" height="200">
    <p>Current Price: 25.51</p>
</canvas>

js判断浏览器是否支持Canvas，用canvas.getContext；

<!-- HTML代码 -->
<canvas id="test-canvas" width="200" heigth="100">
    <p>你的浏览器不支持Canvas</p>
</canvas>

<script>
    var canvas = document.getElementById('test-canvas');
    if (canvas.getContext) {
        console.log('你的浏览器支持Canvas!');
    } else {
        console.log('你的浏览器不支持Canvas!');
    }
</script>

2D图

2D Canvas对象

getContext(‘2d’)方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

1	var ctx = canvas.getContext('2d');

坐标系统

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。

绘制线条

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    // 把路径移动到画布中的指定点，不创建线条
    cxt.moveTo(10,10);
    // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
    cxt.stroke();
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

路径图形

var canvas = document.getElementById('test-shape-canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
// 创建弧/曲线（用于创建圆形或部分圆）
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
// 线条颜色
ctx.strokeStyle = '#0000ff';
// 绘制
ctx.stroke(path);

绘制文本

绘制文本就是在指定的位置输出文本，可以设置文本的字体、样式、阴影等，与CSS完全一致；

带阴影的文字

var canvas = document.getElementById('test-shape-canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

渐变

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

图像

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=new Image()
    img.src="flower.png"
    cxt.drawImage(img,0,0);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

绘制其他

Canvas除了能绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。

如果要实现非常复杂的操作，考虑以下优化方案：

- 通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中；
- 尽量使用整数坐标而不是浮点数；
- 可以创建多个重叠的Canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图；
- 背景图片如果不变可以直接用<img>标签并放到最底层。

3D图

HTML5有一个WebGL规范，允许在Canvas中绘制3D图形；

1	var gl = canvas.getContext("webgl");

内联SVG

参考网站

SVG教程

概念

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

特点

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

与canvas比较

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

写入HTML

多边形svg图像polygon：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

地理定位

HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

Navigator获取

Navigator对象包含有关浏览器的信息。
使用 getCurrentPosition() 方法来获得用户的位置。

<script type="text/javascript">
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            alert("该浏览器不支持定位功能！");
        }
    }

    function showPosition(position) {
        alert("纬度：" + position.coords.latitude + "\n经度："
            + position.coords.longitude)
    }

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("用户拒绝对获取地理位置的请求");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("位置信息是不可用的");
                break;
            case error.TIMEOUT:
                alert("请求用户地理位置超时");
                break;
            case error.UNKNOWN_ERROR:
                alert("未知错误");
                break;

        }
    }
</script>
<button onclick="getLocation()">点击</button>

Web存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
存储数据以key-value形式，value只能是基础数据类型，不能是对象；

操作

//查看
window.localStorage;
//设置
localStorage.setItem("lastname", "Gates");
//获取
localStorage.getItem("lastname")

浏览器支持

function testM() {
    // 校验浏览器是否支持
    if (typeof(Storage) !== undefined) {
        localStorage.setItem("lastname", "Gates");
        alert(localStorage.getItem("lastname"));
    } else {
        alert("抱歉！您的浏览器不支持 Web Storage ...")
    }
}

sessionStorage

sessionStorage方法存储的数据在会话结束就会删除。
存储数据以key-value形式，value只能是基础数据类型，不能是对象；
操作方法同localStorage类似；

function testM() {
    // 校验浏览器是否支持
    if (typeof(Storage) !== undefined) {
        sessionStorage.setItem("lastname", "Gates");
        sessionStorage.setItem("x","xxx")
        alert(sessionStorage.getItem("lastname"));
    } else {
        alert("抱歉！您的浏览器不支持 Web Storage ...")
    }
}

应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

优势

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

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

缓存

每个指定了manifest的页面在用户对其访问时都会被缓存。

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest文件

manifest 文件的建议的文件扩展名是：”.appcache”。
manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：

1
2
3

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

NETWORK:
# 使用星号来指示所有其他资源/文件都需要因特网连接：
*

FALLBACK:
# 第一个 URI 是资源，第二个是替补。
/html5/ /404.html

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

Web Worker

web worker是运行在后台的JavaScript，不会影响页面的性能。

浏览器支持

所有主流浏览器均支持 web worker，除了Internet Explorer。

检测是否支持

if(typeof(Worker)!=="undefined"){
  // Yes! Web worker support!
  // Some code.....
}else{
  // Sorry! No Web Worker support..
}

语法

创建外部工作脚本test_worker.js，通过postMessage发送消息；

var i=0;
function timedCount(){
    i=i+1;
    // 向HTML页面传回一段消息
    postMessage(i);
    setTimeout(timedCount,1000);
}
timedCount();

创建worker对象，调用外部脚本发消息，并接收消息；

<p>计数:
    <output id="result"></output>
</p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<script>
    var w;
    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            if (typeof(w) === "undefined") {
                w = new Worker("test_worker.js");
            }
            // 接收postMessage发送的消息
            w.onmessage = function (event) {
                document.getElementById("result").innerHTML = event.data;
            };
        }
        else {
            document.getElementById("result").innerHTML = "Sorry, your browserdoes not support Web Workers...";
        }
    }
    function stopWorker() {
        w.terminate();
    }
</script>

服务器发送事件

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent事件

Server-Sent事件指的是网页自动获取来自服务器的更新。

EventSource对象

用于接收服务器事件；

方法：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当错误发生

浏览器支持

所有主流浏览器均支持服务器发送事件，除了Internet Explorer。

js验证支持

if (typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
}
else {
    // Sorry! No server-sent events support..
}

使用步骤

服务器端事件流的语法是非常简单的。把 “Content-Type” 报头设置为 “text/event-stream”。可以开始发送事件流了。
创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”），通过onmessage接收通知；

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
    document.getElementById("result").innerHTML+=event.data + "<br />";
};

表单

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

输入类型

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

email

email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时，会自动验证 email 域的值；
注意：未填写时会验证通过。

1	<input type="email" name="user_email" />

url

url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
注意：未填写时会验证通过。

1	<input type="url" name="user_url" />

number

number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定；

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

注意：未填写时会验证通过。

1	<input type="number" name="points" min="1" max="10" />

range

range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：

max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

注意：未填写时会验证通过。

1	<input type="range" name="points" min="1" max="10" />

Date Pickers

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

1	<input type="date" name="user_date" />

search

提供可输入的搜索框，可以清空；

1	<input type="search" name="user_date" />

color

弹出颜色框，用于选择颜色；

1	<input type="color" name="user_date" />

新增表单元素

新的表单元素：

datalist
keygen
output

datalist

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id;

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

keygen

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output

output 元素用于不同类型的输出，比如计算或脚本输出,默认没有占位样式；

1	<output id="result"></output>

新增表单属性

form标签属性：

autocomplete
novalidate

input标签属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

autocomplete

用户输入后，再次重载页面，输入时，会显示输入过的选项；
autocomplete 适用于
标签，对以下类型的input标签有效：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

autofocus

autofocus 属性规定在页面加载时，域自动地获得焦点。
autofocus 属性适用于所有标签的类型。

1	<input type="text" name="user_name" autofocus="autofocus" />

form

form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有input标签的类型。
form 属性必须引用所属表单的 id：

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

表单重写属性

表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性适用于以下类型的input标签：submit 和 image。
对于创建不同的提交按钮很有帮助。

表单重写属性有：

- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性

list

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
list 属性适用于以下类型的input标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min、max和step

min、max 和 step 属性用于为包含数字或日期的input 类型规定限定（约束）。

min、max 和 step 属性适用于以下类型的input标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

1
2
3

- max 属性规定输入域所允许的最大值。
- min 属性规定输入域所允许的最小值。
- step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

multiple

multiple 属性规定输入域中可选择多个值。
multiple 属性适用于以下类型的input标签：email 和 file。

1	<input type="file" name="img" multiple="multiple" />

novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
novalidate 属性适用于form,对以类型的input标签验证：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

pattern

pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern）是正则表达式。
pattern 属性适用于以下类型的input标签：text, search, url, telephone, email 以及 password。

1 2	<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />

placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
placeholder 属性适用于以下类型的input标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失;

1	<input type="search" name="user_search" placeholder="Search W3School" />

required

required 属性规定必须在提交之前填写输入域（不能为空）。
required 属性适用于以下类型的input标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

1	<input type="text" name="usr_name" required="required" />

参考

参考网站

w3school中文网

Canvas2D

1 2	HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

此处：提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

颜色.样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

矩形

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

路径

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

文本

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线

方法	描述
fillText()	在画布上绘制“被填充的”文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

图像绘制

1 2	方法描述 drawImage() 向画布上绘制图像、画布或视频

像素操作

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

合成

1
2
3

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

其他

方法	描述
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性
createEvent()	 
getContext()	 
toDataURL()

视频/音频

1 2	1. HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。 2. 方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

方法

addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

属性

audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量

事件

abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据，但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止

全局属性

下面的全局属性可用于任何 HTML 元素。

accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。

1	<p contenteditable="true">这是一个可编辑的段落。</p>

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。

1	<li data-animal-type="鸟类">喜鹊</li>

dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

全局事件属性

列出了添加到 HTML 元素以定义事件动作的全局事件属性，通过js方法作为值来驱动.

Window事件属性

1	针对window 对象触发的事件（应用到 <body> 标签）：

属性	值	描述
onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）。

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素获得焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本（失效）。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

Keyboard事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

Mouse事件

由鼠标或类似用户动作触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操作末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操作开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

Media事件

1
2
3

由媒介（比如视频、图像和音频）触发的事件。
适用于所有 HTML 元素，但常见于媒介元素中。
比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪可以开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	script	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	script	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	script	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	script	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	script	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

HTTP状态消息

当浏览器从 web 服务器请求服务时，可能会发生错误。返回一系列状态码。

1xx信息

1
2
3

消息:	描述:
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

2xx成功

消息:	描述:
200 OK	请求成功（其后是对GET和POST请求的应答文档。）
201 Created	请求被创建完成，同时新的资源被创建。
202 Accepted	供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content	没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content	没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它。

3xx重定向

300 Multiple Choices	多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently	所请求的页面已经转移至新的url。
302 Found	所请求的页面已经临时转移至新的url。
303 See Other	所请求的页面可在别的url下被找到。
304 Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused	此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的url。

4xx客户端错误

消息:	描述:
400 Bad Request	服务器未能理解请求。
401 Unauthorized	被请求的页面需要用户名和密码。
402 Payment Required	此代码尚无法使用。
403 Forbidden	对被请求页面的访问被禁止。
404 Not Found	服务器无法找到被请求的页面。
405 Method Not Allowed	请求中指定的方法不被允许。
406 Not Acceptable	服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required	用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout	请求超出了服务器的等待时间。
409 Conflict	由于冲突，请求无法被完成。
410 Gone	被请求的页面不可用。
411 Length Required	"Content-Length" 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed	请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large	由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long	由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416 	服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed

5xx服务器错误

消息:	描述:
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
501 Not Implemented	请求未完成。服务器不支持所请求的功能。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable	请求未完成。服务器临时过载或当机。
504 Gateway Timeout	网关超时。
505 HTTP Version Not Supported	服务器不支持请求中指明的HTTP协议版本。