H5（4）开始H5
H5解决的问题：web浏览器之间，兼容性低；文档结构不够明确；web应用程序的功能受到限制（所以添加了很多标签和属性，目的是为了适应不同的设备，浏览器）
不一样的地方
内容类型：
DOCTYPE声明： 不需要像以前那样指定版本了，直接<!DOCTYPE html>
指定字符串编码： <meta charset="UTF-8">
可省略标记的属性：
具有boolean值的属性：例如disable，readonly，当只写属性，不指定属性值的时候表示属性为true，或者属性值设置为属性名。默认是false。例如：
<input type="checkbox" checked > ------true
<input type="checkbox" checked="checked">--------- true
<input type="checkbox" checked="">-------true
<input type="checkbox" > -------false
省略引号：比如 <input type="checkbox" checked=checked> true 单引号也可以省略
新增的结构元素：：
section(内容块，比如章节，页眉，可以与h1-h6结合使用)
article（表示页面中一块与上下文不相关的独立内容。例如博客中的一篇文章）
aside（article元素之外的，与article相关的辅助信息，例如侧边栏）
header（通常表示页面中的区域块，标题）
hgroup（标题进行结合）
footer(页面中的区域块，通常表示区域块的脚部)
nav（导航链接部分）
figure（一段独立的流的内容）
新增的其他元素
video audio embed mark progress meter time ruby rt rp wbr
canvas（画布） command details datalist datagrid keygen output source menu
新增input元素：
email（输入的必须是email地址）url number range（输入框内数字的范围值） DatePickers（日历）
全局属性：（对任何元素都适用）
contentEditable属性：允许用户编辑元素中的内容，bool类型。默认根据父级状态。什么都不填表示true
designMode属性：整个页面是否可编辑,属性值 on off
hidden属性：为true时元素处于不可见状态
spellcheck属性：对用户输入的内容，进行拼写和语法检查。就是英语单词是否正确
tabindex属性：表示该控件是第几个被访问到的，就是当你按table获得焦点的时候。当为-1的时候就无法获得焦点了。
具体介绍：：
section元素：对网站或应用程序中页面上的内容进行分块。不推荐为那些没有标题内容的使用section元素。article元素强调独立性，section元素强调分块。
nav元素：应用场景：传统导航条，侧边栏导航条，翻页操作
header元素：是一个具有引导和导航作用的结构元素，通常用来放置整个页面，或页面内的一个区域块的标题，但是也可以包含其他内容，例如数据表格，搜索表单，相关的logo图片。
footer元素：
hgroup元素：
address元素：用来在文章中呈现联系信息，包括文档作者或者文档维护者的名字，网站链接，电子邮箱，地址，电话号码，展示跟文档相关联系人的所有信息。里面承载的就是这些东西
aside 元素： 用来表示当前页面或者文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类似的有区别与主要内容的部分。
article元素：
article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或独立的插件，或者是其他任何独立的内容。
可以嵌套使用（就像是div里面有div），可以用来表示插件。
footer元素:上层父级内容区块或者一个根区块的脚注。
hgroup元素：将标题和子标题进行分组的元素。通常会将h1到h6元素进行分组。就是说标题过多的时候，把他们包裹起来，代表一个子标题。
time元素与微格式：
微格式：利用html的class属性对网页添加附属信息的方法。
<time datetime="2015-10-10">2015-10-10</time> 只是一个单纯的时间
<time datetime="2015-10-10T20:00">2015-10-10</time>
<time datetime="2015-10-10T20:00Z">2015-10-10</time>
表单属性：
表单内元素的form属性 :指向的表单的ID
表单内元素的formaction属性（写道提交按钮里面）使得不同的按钮可以将表单提交到不同的页面。
表单内元素的formmethod属性：以前常常用get和post对整个表单。现在这个属性可以对每一个表单元素指定不同的提交方法
表单内元素的formenctype属性：类比H4中enctype(表单内容发送到服务器之前如何对内容进行编码)。formenctype对不同的表单元素分别指定不同的编码方式。formenctype="text/plain"表单数据中的空格，被转换成加号，但不对特殊字符进行编码。formenctype="multiparty/form-data"不对文件进行编码，在使用包含文件上传时必须使用该值。
表单内元素的formtarget属性：用于指定在何处打开表单提交后所需要加载的页面，可以对多个提交按钮分别使用formtarget.属性值：_blank新的浏览器页面 _self当前窗口打开 _parent当前窗口的父窗口打开。当然都依赖于frame。 _top在当前窗口打开。 frameName指定的frame框架打开。
表单内元素的autofocus属性：当画面打开，该控件自动获取光标焦点。
表单内元素的required属性：required属性，应用在大多数的输入元素上，在提交的时候，如果元素的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。required="required"
表单内元素的labels属性：为所有可使用标签的表单元素，button，select元素等，定义一个labels属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成的集合。
标签的control属性：H5中可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。
文本框的placeholder属性：当文本框处于未输入状态时显示输入提示，当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。<input type="text" placeholder="请输入用户名">
文本框的list属性：该属性的值为某个datalist元素的id。datalist类似选择框，但是允许用户输入不同的值。datalist本身不现实，而是当输入框聚焦时候提示输入的方式。下面有案例
文本框的AutoComplete属性::自动完成功能。on off 填写 不填写
文本框的pattern属性：将属性值设为某个格式的正则表达式，在提交的时候对这些进行检查，检查其内容是否符合给定的格式。不符合则不提交。<input pattern="[A-Z]{3}">
文本框的SelectionDirection属性:是对input元素和textarea元素，当用户选取文字时属性值“forward”反向选取文字时，属性值为“backward”。当用户没有选取任何文字的时候，“forward”.
复选框的indeterminate属性（checkbox只有选取和非选取两种状态）h5中js可对该属性使用indeterminate属性，说明该复选框处于“尚未明确”的状态
image提交按钮的height属性与width属性 ：类型为image的input元素。height,width,分别用指定的图片按钮的高频度和宽度。
pubdate属性：
<time datetime="2015-10-10" pubdate></time> 当有多个time的时候 这个属性代表了整个文章的发布日期。
labels属性:
<object> // 定义一个嵌入的对象
<embed src="#" width="300" height="300"></embed> // 标签定义嵌入的内容，比如插件。
</object>
labels的使用方式：：验证输入框是否为空
<body>
<script>
function Validate(){
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btnValidate");
var form=document.getElementById("testform");
if(txtName.value.trim()=="")
{
var label =document.creatElement("label");
label.setAttribute("for","txt_name");
form.insertBefore(label,button);
txtName.labels[1].innerHTML="请输入姓名"；
txtName.labels[1].setAttribute("style","font-size:9px;color:red")
}
}
</scrip>
<form id="testform">
<label id="label" for="txt_name">姓名：</label>
<input id="txt_name">
<input type="button" id="btnValidate" value="提交" onclick="Validate()">
</form>
</body>
H５网页编排
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#"/>首页</a></li>
<li><a href="#"/>帮助</a></li>
</ul>
<nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文。</p>
<section>
<div><article><h1>评论标题</h1><p>评论内容</p></article></div>
</section>
</article>
<footer>
<small>
版权所有......
</small>
</footer>
</body>
selectionDirection的案例：用户是正向选取文字，还是反向选取文本。
<script>
function AD(){
var control=document.forms[0]['text'];
var Direction=control.selectionDirection;
alert(Direction);以这种方式，获取用户的操作。
}
</script>
<form>
<input type="test" name="text">
<input type="button" value="点击我" onclick="AD()">
</form>
list的案例：：输入的提示
<form>
<input type="text" name="greeting" list="greetings">
<datalist id="greetions" style="displayt:none">
<option value="h5">h5</option>
<option value="css3">css3</option>
<option value="js">js</option>
</datalist>
</form>
不再支持frame框架，支持iframe
