Html5(1)

一. 自定义属性（dataset）

data-name:dataset.name

data-name-first:dataset.nameFirst

<div data-hello="world"></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
alert(oDiv.dataset.hello);
</script>

二. js加载

js的加载会影响后面内容的加载，很多浏览器都采用了并行加载js，但还是会影响其他内容。

html5的defer和async

defer：延迟加载，会按顺序执行，在onload执行前会被触发

async：异步加载，加载完就触发，有顺序问题

labjs库（js异步加载库）

自定义属性在属性库中有重要作用，如jquery mobile。

三. 表单新增控件和属性

新增控件

emal：电子邮箱文本框，跟普通的没什么区别

当输入不是邮箱的时候，验证通不过

移动端的键盘会有变化

tel：电话号码

当输入不是电话号码的时候，验证通不过

移动端的键盘会有变化

url：网页的URL，有验证

search：搜索引擎

chrome下输入文字后，会多出一个关闭的X

range：特定范围内的数值选择器

mix、max、step（步数）

number：只能包含数字的输入框

color：颜色选择器

datetime 显示完整日期

datetime-local：显示完整日期，不含时区

time：显示时间，不含时区

date：显示日期

week：显示周

month：显示月

新增属性

placeholder：输入框提示信息

autocomplete：是否保存用户输入值

默认为no，关闭提示选择off

autofocus：指定表单获取输入焦点

list和datalist：为输入框构造一个选择列表

list值为datalist标签的id

required：此项必填，不能为空

pattern：正则验证patter=”\d{6,10}”

formaction：在submit里定义提交地址

四. 历史管理

通过改变hash值来管理

onhashchange：当hash值改变是触发此事件。

html5中history：

服务器下运行

pushState：三个参数：数据 标题（都没实现）地址（可选）popstate事件：读取数据 event.state

注意：网址是虚假加的，需要再服务器端指定对应页面，不然刷新后就找不到页面。

<div id="div1"></div>
<script>
var btn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
var json = {};
btn.onclick = function(){
var arr = randomNum(35,7);
var num = Math.random();
json[num] = arr;
oDiv.innerHTML = arr;
window.location.hash = num;
}
window.onhashchange = function(){
alert("change");
oDiv.innerHTML = json[window.location.hash.substring(1)];
}
function randomNum(sum, num)
{
var arr = [];
var newArr = [];
for(var i = 0; i < sum; i++)
{
arr.push(i);
}
for(var i = 0; i < num; i++)
{
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}

</script>

html5中

<Button id="btn">随机选彩票</Button>
<div id="div1"></div>
<script>
var btn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
btn.onclick = function(){
var arr = randomNum(35,7);
history.pushState(arr,'');
oDiv.innerHTML = arr;
}
window.onpopstate = function(ev){
oDiv.innerHTML = ev.state
}
function randomNum(sum, num)
{
var arr = [];
var newArr = [];
for(var i = 0; i < sum; i++)
{
arr.push(i);
}
for(var i = 0; i < num; i++)
{
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}
</script>