学习——HTML5
HTML5多用于手机页面制作，因为PC版浏览器大多不兼容，可以通过下面网站查看HTML5浏览器兼容情况：
http://www.caniuse.com/#index
一、语义化标签
1.<header></header>页眉
主要用于页面的头部的信息介绍，也可以用于板块头部
<hgroup></hgroup>页面上的一个标题组合
一个标题和一个子标题，或者标语的组合
<hgroup>
<h1>h1</h1>
<h2>h2</h2>
</hgroup>
2.<nav></nav>导航（包含链接的一个列表）
<nav>
<a href="#">链接</a>
</nav>
3.<footer></footer>页脚，页面的底部或者板块底部
4.<section></section>页面上的板块，用于划分页面上的不同区域，或者划分文章里不同的节
5.<article></article>用来在页面中表示一套完整且独立的内容部分，可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。
6.<aside></aside>元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别于主要内容的部分。
aside的内容应该与article的内容相关，被包含在<article>中作为主要内容的附属信息部分，其中的内容是与当前文章有关的引用、词汇列表等。在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏（sidebar），其中的内容可以是友情链接、附属导航或广告单元等。
7.<figure></figure>用于对元素进行组合。一般用于图片或视频
8.<figcaption></figcaption>:figure的子元素，用于对figure的内容进行说明。
<figure>
<img src="aaa.png" />（注意没有alt）
<figcaption>啦啦啦</figcaption>
</figure>
9.<time></time>：用来表示时间或日期
<p>我们在每天早上<time>9:00</time>开始营业。</p>
属性：datetime:
<p>我在<time datetime="2008-02-14">情人节</time>有个约会</p>
datetime属性在所有浏览器中不会渲染任何特殊效果。datetime属性规定日期或时间。在该元素的内容中未指定日期或时间时，使用该属性。
10.<datalist></datalist>选项列表。与input元素配合使用，来定义input可能的值。List属性的值等于datalist的id：
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
例如：百度搜索，输入某个字符，下面会弹出猜测内容
11.<details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等，应该与页面的主要内容区分开的其他内容。
设置属性open，默认展开
12.<summary></summary>details元素的标题
<details>
<summary>啊啊啊啊</summary>
<p>哈哈哈哈哈</p>
</details>
点击可以展开
13.<dialog></dialog>定义一段对话:<dt></dt> <dd></dd>,使dd和dt内容交错显示
14.<address></address> 定义文章或页面作者的详细联系信息（斜体）
15.<mark></mark>需要标记的词或句子(黄色背景)
16.<keygen>标签规定用于表单的密钥对生成器字段当提交表单时，私钥存储在本地，公钥发送到服务器，但ie不支持该标签
<form action="http://www.baidu.com" method="get">
用户：<input type="text" name="usr_name" />
公钥：<keygen name="security" />
<input type="submit" />
</form>
17.<progress></progress>定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
18.<embed>标签定义嵌入的内容，比如插件。
<embed src="helloworld.swf" />插入一个Flash
二、新的输入型控件
1.email：电子邮箱文本框，当输入不是邮箱的时候，验证不通过，移动端的键盘会有变化
2.tel：电话号码
3.url：网页的URL，需要加上http
4.search：搜索引擎，chrome下输入文字后，会多出一个关闭的X
5.range：特定范围内的数值选择器，数值改变事件：onchange；属性：min、max、step
6.number：只能包含数字的输入框
7.color：颜色选择器
（以下只在chrome浏览器中显示）
8.datetime-local：显示完整日期，不含时区
9.time：显示时间，不含时区
10.date：显示日期
11.week：显示周
12.month：显示月
三、新的表单特性和函数
1.placeholder：输入框提示信息
2.autocomplete：是否启动自动补全（基于用户之前输入的值），默认为on，关闭提示选择off
3.autofocus:指定表单获取输入焦点
4.list属性和datalist标签：为输入框构造一个选择列表，list值为datalist标签的id
5.required：此项必填，不能为空（pc端没有用，可以通过调试器删除）
6.pattern：正则验证pattern="\d{1,5}",用title显示规则（pc端没有用，可以通过调试器删除）
7.formaction：在submit里定义提交地址，比如草稿提交到草稿箱
四、表单验证：
1.validity对象，通过下面的valid可以查看验证是否通过，如果八中验证都通过返回true，一种验证失败返回false
oText.addElementListener("invalid",fn1,false);
ev.preventDefult();阻止默认事件
valueMissing;输入值为空时，返回true
typeMismatch;控件值与预期类型不匹配，返回true
patternMismatch;输入值不满足pattern正则，返回true
tooLong;超过maxLength最大限制
rangeUnderflow;验证的range最小值
rangeOverflow;验证的range最大值
stepMismatch;验证range的当前值是否符合min,max及step的规则
customError;不符合自定义验证，返回true
setCustomValidity();自定义验证
invalid事件：验证反馈
input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault();
formnovalidate属性：关闭验证（写在提交按钮里）
例子：
1 <form> 2 <input type="email" id="text"/> 3 <input type="submit" /> 4 </form> 5 <script> 6 var oText=document.getElementById("text"); 7 oText.addEventListener("invalid",fn,false); 8 function fn() 9 { 10 alert(this.validity.valueMissing ); 11 ev.preventDefault(); 12 } 13 </script>
五、新的选择器
1.querySelector :类似jq里的$()方法，但是只能取到一个元素
2.querySelectorAll ：类似jq里的$()方法，但是只能取到一个集合，即使只有一个元素
3.getElementsByClassName ：通过class的方式取到一个元素集合
注意：前两个方法里面要写成.box,#div1等类似jq的写法，后一种规定是class，因此只需要写class的内容即可。
六、获取class列表属性
classList(获取一个元素的class集合，类数组的对象)，基于classList的方法：
length:class的长度
add():添加class的方法
remove():删除class的方法
toggle():切换class的方法，即若该元素中本来有某一类，会变为没有，若本来没有，会变为有，类似开关效果。
七、JSON的新方法
JSON.parse():把字符串转成json
字符串中的属性要严格的加上引号
JSON.stringify():把json转化成字符串
会自动的把双引号加上
应用：深度克隆；
1 var json1={"name":"a","sex":"m"}, 2 json2=JSON.parse(JSON.stringify(json1)); 3 json2.name="b"; 4 console.log(json1.name); //a 5 console.log(json2.name); //b
如果不用JSON的方法，改变json2的值会影响到json1的值，而这样写就不会影响
八、data自定义数据
dataset
data-name（属性）：dataset.name(js获取) //name值可以自己设置，但要加data-前缀
data-name-first:dataset.nameFirst //当自定义的属性名有-符号链接时，js中获取的方法要写成驼峰式
data自定义数据在很多框架中都有用到（如jquery mobile,vue.js,knockout）
九、延迟加载js
html5的defer和async（外部script标签属性）
defer：延迟加载，会按顺序执行，在onload执行前被触发
async：异步加载，加载完就执行，会存在加载时的顺序问题，比如某一个js基于后加载的一个js时，在互不影响的时候可以用
（Labjs库——异步加载js库，解决了兼容性）
十、历史管理（通过跳转页面）
window.onhashchange事件：hash值（#x）改变时触发
用途：可以做成不改变网址，仅改变hash值进行历史管理(window.location.hash获取当前页面的hash值，注意获取结果会有#，用该hash值时需要去掉#)
history：需要在服务器下运行
history.pushState:三个参数：数据 标题（用""来代替） 地址（可选）
window.onpopstate事件：读取数据
event.state：读取对应的值
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
十一、拖放事件（在chrome下有效）
draggable:（属性）放在元素中，值设置为true，表明该元素可以拖拽
拖拽元素事件：事件对象为被拖拽元素
ondragstart:拖拽前触发
ondrag:拖拽前和拖拽结束之间连续触发（与move区别：即使鼠标不移动也会触发）
ondragend:拖拽结束触发
目标元素事件：事件对象为目标元素
ondragenter:进入目标元素触发，相当于mouseover
ondragover:进入目标、离开目标之间连续触发(同ondrag)
ondragleave:离开目标元素触发，相当于mouseout
ondrop:在目标元素上释放鼠标触发（必须在dragover上阻止默认事件:ev.preventDefault()）
解决火狐下的问题：设置dataTransfer对象的setData方法才可以拖拽除图片外的其它标签
dataTransfer对象（event对象）
setData():设置数据key和value（必须是字符串）如：ev.dataTransfer.setData("name","a");(在dragstart里)
getData():获取数据，根据key值，获取对应的value,如：ev.dataTransfer.getData("name");(在drop里)
effectAllowed(dragstart)
effectAllowed:设置光标样式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized）
setDragImage(改变拖拽clone的元素，dragstart)
三个参数：指定的元素，坐标X，坐标Y
files:获取外部拖拽的文件，返回一个fileList列表，fileList下有个type属性，返回文件类型
FileReader：读取文件信息
readAsDataURL:参数为要读取的文件对象，将文件读取为DataUrl
onload:当读取文件成功完成的时候触发此事件，this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
