Html5终于梳理完成啦：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function () {
// H5 Web存储
//localStorage - 没有时间限制的数据存储
localStorage.lastname = "Smith1";
$(".cite").text("Last name: " + localStorage.lastname);
//计算访问页面次数
if (localStorage.pagecount) {
localStorage.pagecount = Number(localStorage.pagecount) + 1;
} else {
localStorage.pagecount = 1;
}
$(".cite").append(" ------> visits: " + localStorage.pagecount + " time(s).")
//sessionStorage 针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
sessionStorage.lastname = "Smith2";
$(".span1").text("Last name: " + sessionStorage.lastname);
if (sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
}
else {
sessionStorage.pagecount = 1;
}
$(".span1").append(" ------> visits: " + sessionStorage.pagecount);
});
function resCalc() {
//var numA = document.getElementById("num_a").value;
//var numB = document.getElementById("num_b").value;
//document.getElementById("result").value = Number(numA) + Number(numB);
var numA = $("#num_a").val();
var numB = $("#num_b").val();
$("#result").val(parseInt(numA) + parseInt(numB));
}
//拖动元素 开始
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
//拖动元素 结束
</script>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<!-- Html5 Web 数据存储 -->
<div>
<span class="cite"> </span>
<br />
<span class="span1"></span>
</div>
<hr />
<!-- Html5 Input 类型 表单属性 -->
<div>
<form action="" method="get">
<!-- novalidate="true"表单取消验证 -->
<!-- email 类型 提交表单，自动验证邮箱的值 required="required"非空验证 autofocus="autofocus" 自动获取焦点 -->
E-mail：<input class="input" type="email" placeholder="请输入邮箱" required="required" autofocus="autofocus" />
<br />
<br />
url：<input class="input1" type="url" />
<br />
<br />
number：<input type="number" name="points" min="1" max="10" step="2" /> <!-- step规定合法的数字间隔 -->
<br />
<br />
<!-- range 类型用于应该包含一定范围内数字值的输入域,显示为滑动条 -->
range：<input type="range" name="points" min="1" max="10" />
<br />
Date: <input type="date" name="user_date" />
<br />
Month: <input type="month" name="user_date" />
<br />
Week: <input type="week" name="user_date" />
<br />
Time: <input type="time" name="user_date" />
<br />
Date and time: <input type="datetime" name="user_date" />
<br />
Date and time local: <input type="datetime-local" name="user_date" />
<br />
search：<input type="search" placeholder="请输入查询关键字" />
<br />
<!-- 如需把 datalist绑定到 input,则需要input的list属性引用datalist的Id -->
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>
<br />
<br />
<div>
keygen:
Username: <input type="text" name="usr_name" />
<br />
Encryption(加密): <keygen name="security" />
<br />
</div>
<br />
<!-- pattern="[A-z]{3}" 三个字母（正则表达式） -->
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
<br />
<br />
Submit: <input type="submit" />
</form>
<!-- 使用 output 元素的简易计算器 -->
<form οnsubmit="return false">
<input id="num_a" />
+
<input id="num_b" /> =
<!--<output id="result" onforminput="resCalc()"></output>-->
<input id="result" οnclick="resCalc()" />
</form>
</div>
<hr />
<div>
<form action="" method="get" autocomplete="on">
<!-- autofocus="autofocus" 自动获取焦点 -->
First name:<input type="text" name="fname" autofocus="autofocus" /><br />
Last name: <input type="text" name="lname" autofocus="autofocus" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<br />
<!-- multiple 属性规定输入域中可选择多个值 -->
Select images: <input type="file" name="img" multiple="multiple" />
</div>
<hr />
<p>
<!-- ondrop 当被拖动元素正在被拖放时运行脚本; ondragover 当元素被拖动至有效拖放目标上方时运行脚本 -->
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<!-- ondragstart 当拖动操作开始时运行脚本 -->
<span id="drag1" draggable="true" οndragstart="drag(event)"><img src="images/aboutus.jpg" draggable="true" />可以把此图片和文本拖入上面矩形！</span>
</p>
<hr />
</body>
</html>