导读：HTML5对表单的支持?新的控件类型–<inputtype="url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color">,<selectdata="&

HTML5对表单的支持

? 新的控件类型

– <input

type="url|email|date|tel|search|datetime|date|month|week|

datetime-local|number|range|color">, <select

data=""></select>

? 文件上传控件

– <input type="file" accept = "image/png" />

? 重复的模型

– add, remove, move-up, move-down

? 内建表单验证

– <input type="email" required />, <input type="number"

min=10 max=100 />

? XML Submission

– application/x-www-form+xml

<form action='/register' enctype="application/x-www-form+xml"

method="post">

<p>

<label for='name'>ID(请使用Email注册)</label> <input name='name' required type='email' />

<p>

<label for='password'>密码</label>

<input name='password' required type='password' /> <p>

<label for='birthday'>出生日期</label>

<input type='date' name='birthday' />

<p>

<label for='gender'>国籍</label>

<select name='country'

data='countries.xml'></select>

<p>

<label for='photo'>个性头像</label>

<input type='file' name='photo' accept='image/*' /> <table>

<thead>

<td><button type="add"

template="questionId">+</button> 保密问题</td>

<td>答案</td>

<td></td>

</thead>

<tr id="questionId" repeat="template"

repeat-start="1" repeat-min="1" repeat-max="3">

<td><input type="text"

name="questions[questionId].q" /></td>

<td><input type="text" name="questions[questionId].a" /></td> <td><button type="remove">删除</button></td>

</tr>

</table>

<p><input type='submit' value='send' class='submit' /></p>

</form>

HTML5 DOM变化

? getElementsByClassName

? Selector API

– document.querySelector()

– document.querySelectorAll()

? Traversal API

– .nextElementSibling

– .previousElementSibling

– .firstElementChild

– .lastElementChild

– .children

HTML5的Javascript APIs

Video&Audio

? <video height="280" width="498" poster="border.png" id="video">

<source src="coldplay.mp4">

</video>

? <audio src="music.oga" controls>

<a href="music.oga">Download song</a>

</audio>

Canvas

? <canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是

JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。

? var canvas = document.getElementById("canvas"), context =

canvas.getContext("2d");

context.fillStyle="rgb(0,0,200)";

context.fillRect(10, 10, 50, 50);

? context.save();

context.restore();

context.scale(x, y);

context.rotate(angle);

context.translate(x, y);

......

Drag&Drop

? 拖拽事件: dragstart, dragend, dragenter, dragleave, dragover,

drag, drop

? <div draggable="true"

ondragstart="dragstartHandler(event)"></div> function dragstartHandler(e){

alert('dragstart');

}

Web Workers

? 让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器 ? var w = new Worker('worker.js');

w.onmessage = function(event){

alert(event.data);

}

w.postMessage('run');

Web Workers

? //worker.js

? importScripts('xhr.js', 'db.js'); ? onmessage = function(event){

if(event.data == 'run'){

run();

}

}

? function run(){

var data = doCrazyNumberCrunch();

postMessage(data);

}

Geolocation

navigator

.geolocation

.getCurrentPosition(

success,

error);