1.html5语义化标签及表单新增控件和特性

还没用markdown编辑器写过，测试下。

---

查看HTML5新特性的浏览器支持情况：
http://www.caniuse.com/#index

1. HTML5语义化标签

兼容：IE8以上。（其他浏览器支持情况可到上述网页查看）
解决IE6-8：
一、document.createElement("标签名");
（我自己用这个方法在为Firefox下测试了一些标签，貌似有些没成功，下次换台电脑再测试。）
二、引入html5shiv.js

<header> 页眉
<hgroup> 页面上的一个标题组合 一个标题和一个子标题，或者标语的组合
<nav> 导航 （包含链接的的一个列表）
<footer> 页脚 页面的底部 或者 版块底部
<section> 页面上的版块,用于划分页面上的不同区域,或者划分文章里不同的节
<article> 用来在页面中表示一套结构完整且独立的内容部分,比如博客评论部分。
<aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
● aside 的内容应该与 article 的内容相关。
<time> 用来表现时间或日期
<datalist> 选项列表。与 input 元素配合使用，来定义 input 可能的值。

<input type="text" list="valList" />        <datalist id="valList">            <option value="javascript">javascript</option>           <option value="html">html</option>          <option value="css">css</option>        </datalist>

<details> 与<summary>一起用，用于描述文档或文档某个部分的细节 该元素用于摘录引用等，该与页面的主要内容区分开的其他内容
● Open 属性默认展开

<details>        <summary>妙味课堂</summary>        <p>国内将知名的IT培训机构</p>    </details>

<dialog>定义一段对话

<dialog>      <dt>学生A</dt>      <dd>吃饭没？</dd>      <dt>学生B</dt>      <dd>没</dd>      <dt>学生A</dt>      <dd>要不一起？</dd>    </dialog>

<address> 定义文章 或页面作者的详细联系信息
<mark> 需要标记的词或句子
<keygen> 给表单添加一个公钥

<form action="#" method="get">    用户: <input type="text" name="usr_name" />    公钥: <keygen name="security" />    <input type="submit" />    </form>

<progress> 定义进度条 用span放置不支持标签的显示内容

注：以上标签都是有闭合标签的。

2.表单

● 新增各种控件
email: 电子邮箱文本框，当输入不是邮箱的时候验证通不过，移动端的键盘会有变化
tel: 电话号码
url : 网页的URL
search: 搜索引擎，chrome下输入文字后，会多出一个关闭的X
range: 特定范围内的数值选择器
min、max、step( 步数 )
number: 只能包含数字的输入框
color: 颜色选择器
datetime: 显示完整日期 (兼容：FF，Safari，IE不支持)
datetime-local: 显示完整日期，不含时区 (兼容：FF，Safari，IE不支持)
time: 显示时间，不含时区 (兼容：FF，Safari，IE不支持)
date: 显示日期 (兼容：FF，Safari，IE不支持)
week: 显示周 (兼容：FF，Safari，IE不支持)
month: 显示月 (兼容：FF，Safari，IE不支持)

● 新的表单特性和函数
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off,完全支持的只有Opera41以上
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
● list值为datalist标签的id
required : 此项必填，不能为空
Pattern : 正则验证 例： pattern=”\d{1,5}“
Formaction 在submit里定义提交地址

●表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都返回false则validity返回true，一种验证失败返回false

Invalid事件: 验证反馈
input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证，当需要暂时保存到草稿箱时

用法：元素.addEventListener("invalid",fn1,false);
ev.preventDefault()
八个事件：
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
rangeUnderflow、rangeOverflow二者其实用处不是很大，目前支持的浏览器根本不容许小于最小值，或大于最大值。
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
例：

<script>//第一个    var oText1 = document.getElementById('text1');    oText1.addEventListener('invalid',fn,false);    function fn(ev){        alert(this.validity.typeMismatch);        ev.preventDefault();    }// 第二个    //自定义事件    var oText = document.getElementById('text');    oText.oninput = function(){        if(this.value == 'nagi'){            this.setCustomValidity('取个其它名字吧~');        }else{            this.setCustomValidity('');  //否则验证通过        }    }</script><form id="form">    <input id="text1" type="email" required />    <input type="submit" value="提交" />    <input type="submit" formaction="http://www.baidu.com"  value="保存到草稿箱" formnovalidate /></form><form>    <input id="text" type="text" autocomplete="on"  />    <input type="submit" value="提交" /></form>

3.延迟加载JS

当js文件过大、过多时就会影响到页面的加载，这时就需要延迟加载JS文件。主要有两种：
defer : 延迟加载，会按顺序执行，在onload执行前被触发（相当于把JS文件放在body结束前）
async : 异步加载，加载完就触发，但不能保证顺序，所以如果有相互依赖的JS文件时，不推荐使用。
兼容：Labjs库

测试结束…

---

另：附上从张大大那里找来的一篇文章。
http://www.zhangxinxu.com/wordpress/?p=1544