HTML5

表单

input

• email
  在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

• url
  在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

• number
  只能输入数字和e

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

• range
  数字滑动条

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

• Date Pickers(日期选择器)

Date: <input type="date" name="user_date" />

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

• search

表单元素

• datalist
  规定输入域的选项列表

Webpage: <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>

option 元素永远都要设置 value 属性。

表单属性

• autocomplete
  规定 form 或 input 域应该拥有自动完成功能

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

• autofocus
  规定在页面加载时，域自动地获得焦点

User name: <input type="text" name="user_name"  autofocus="autofocus" />

• form
  规定输入域所属的一个或多个表单

<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" />

拖放

• 设置元素为可拖动

<div draggable="true"></div>//将draggable属性设置为true

• 拖动的元素

<div draggable="true" ondragstart="drag(event)"></div>
//规定被拖动的数据
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);//数据类型(text)和值(可拖动元素的id)
}

• 放置的位置

<div ondragover="allowDrop(event)"></div>
function allowDrop(event){
    event.preventDefault();
}

• 进行放置

<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
function drop(ev){
    ev.preventDefault();
    var data=ev.data.Transfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

例子(多个div交换位置)

<div id="div1" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>
<div id="div2" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>

<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
let srcDiv = null;
function drag(ev,divDom)
{
    srcDiv=divDom;
    ev.dataTransfer.setData("text/html",divDom.innerHTML);
}
function drop(ev,divDom)
{
    ev.preventDefault();
    if(srcDiv !== divDom){
        srcDiv.innerHTML = divDom.innerHTML;
        divDom.innerHTML=ev.dataTransfer.getData("text/html");
    }
}
</script>

兼容ie时，setData(“text”,元素内容);只支持text

video

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

<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>

方法
play()       //播放
pause()      //暂停
load()       //重新加载视频元素
cnaPlayType()//浏览器是否能播放指定的视频类型
autoplay     //自动播放
controls     //显示播放控件
loop         //循环播放
currentTime  //播放的当前时间

chrome浏览器下，currentTime用IDE编辑器打开时失效，本地文件夹直接打开html或者src地址为服务器获取则正常。

隐藏视频控制条（webkit）

video::-webkit-media-controls {
    display:none !important;
}

canvas

<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");   //创建context对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

SVG

可伸缩矢量图形

<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>

Geolocation（地理定位)

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);   //获取用户的位置
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置
clearWatch() - 停止 watchPosition() 方法

web存储

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

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>