学习——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属性：关闭验证（写在提交按钮里）

例子：

 <form>
     <input type="email" id="text"/>
     <input type="submit" />
 </form>
 <script>
 var oText=document.getElementById("text");
 oText.addEventListener("invalid",fn,false);
 function fn()
 {
     alert(this.validity.valueMissing );
     ev.preventDefault();
 }
 </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转化成字符串

　　　　会自动的把双引号加上

　　应用：深度克隆；

 var json1={"name":"a","sex":"m"},
       json2=JSON.parse(JSON.stringify(json1));
 json2.name="b";
 console.log(json1.name);   //a
 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格式的图片数据