推出的缘由和目标： 目前web端存在的一些问题，比如兼容性问题，同样页面，在不同浏览器上呈现的效果不同，那么开发人员需要做很多额外的工作去解决这一问题，需要花费过多的时间在这上面；一些特殊的权限没有开放给开发人员，比如：定位权限、拉起照相机拍照权限、动画、绘画。那么H5的推出就是为了解决这一问题。 H5解决了什么问题： （1）开放了一些特殊的权限给开发者：有了这些权限，开发者可以轻易地获取用户的定位信息、拍照功能等等。 （2）解决不同浏览器的兼容性问题：HTML5也可以理解成协议标准，它让绝大部分浏览器生产商都遵守这一标准 （3）文档结构不清晰：在之前的开发中，页面的布局都是使用Div+CSS，不利于搜索引擎去抓取页面信息，也就是说浏览器抓取一片新闻网页的时候，根本抓不住作者，新闻发布会时间等信息。 H5的浏览器支持情况： Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。 Safari，Opera：同样支持html5很多年，支持也很好。 IE：IE10起比较好了，之前很差。（IE9+都支持）
（1）内容类型（contentType）： HTML文件的后缀名依然是.html或.htm，HTML文件的内容类型“text/html” （2）DOCTYPE: H5之前:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML5:
<!DOCTYPE html>DOCTYPE声明在HTML文档中必不可少，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改，但是H5的DOCTYPE的声明方式向下兼容（兼容所有的低版本） （3）字符集 H5之前:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />H5：
<meta charset="UTF-8">HTML5默认的字符集编码：UTF-8,之前的大部分版本默认字体编码：ISO-8859-1。 （4）标签标记的省略 可以省略全部：body,tbody,head,colgroup,html 不允许写结束标记的标签：img,input,br/hr,base,link,meta, 允许写结束标记的标签：p，li,dd,dt,tr,td,th….. （5）布尔类型的属性 对于布尔类型的属性，比如：readonly,当它们不写值的时候，默认是true, 同时对于值写成任何东西都是无效的。说白了，只要写了这个属性，属性里面立马生效。 （6）属性值省略引号 在之前的学习中，属性值都是放在双（单）引号里面的，在H5中，如果属性值中不包括特殊字符，双引号和单引号都可以去掉 特殊字符：’()’<>’,’-’
<div><input type="text" value="登录" readonly="readonly"/></div> <div><input type="text" value=<登录> readonly="readonly"/></div>新增的结构（布局）标签：section,article,nav,footer,header,hgroup,aside,figure 新增的其他标签：video,audio,mark,time,menu,canvas,svg,details,datalist,progress,output,source input，type的新增：Email，URL，Number,Date， Range 废弃的标签：font,center,s,tt,u,big,basefont,
在HTML5中，定义了少量对所有元素都有效的属性。 1、contenteditable contenteditable=true，可以直接在页面上进行编辑，编辑之后，元素的宽、高自动适应。 contenteditable=false，说明这个标签不能被编辑
<body> <p contenteditable="true">我是一个段落，但是我可以编辑</p> //可以编辑 <p contenteditable="false">我是一个段落，但是我不能编辑</p> //不可编辑 <p contenteditable>我是一个段落，但是我没有设置contenteditable值</p> //可以编辑 </body> <p contenteditable>我是一个段落，但是我可以编辑</p> <p contenteditable="false">我是一个段落，但是我不可以编辑</p>注意：
（1）如果只是设置了contenteditable，默认是true, （2）contenteditable属性可以被继承，需要考虑“就近原则”。
2、designMode: 用来指定整个页面是否可以编辑，当designMode设置为on的时候，相当于页面上所有的元素都设置了contentediable
<script> document.designMode="on" </script>当designMode设置为off的时候，相当于页面上所有的元素都设置了contentediable=false.
<script> document.designMode = "off"; </script>注意：如果设置了designMode和contenteditable属性，采用就近原则。 （2）该属性在IE8以下的浏览器无效，以兼容IE6,7,8为耻。 3、hidden
<style> .box{ width: 100px; height: 40px; background: skyblue; } </style> </head> <body> <div style="display: none;">我是div1，我想隐藏起来</div> <div class="box">div</div> <div style="visibility: hidden">我是div2，我想隐藏起来</div> <div class="box">divdiv</div> <div hidden>我是div3，我想隐藏起来</div> <div class="box">divdivdiv</div> </body>hidden属性可以实现对元素的隐藏，同时不会占位，类似于display:none. 注意：hidden的默认值为“hidden”，设置该属性的时候，只需要写属性名就可以了。 hidden:看不见，不占位置 visibility:hidden:看不见，但是占位置 display:none:看不见，不占位置
4、spellcheck 拼写检查
<body> 输入一个单词试试看 <input type="text" spellcheck="true">//有波浪线 <input type="text" spellcheck="false">//没有波浪线 <input type="email" spellcheck="true">//有波浪线 <input type="email" tabindex>//有波浪线 </body>spellcheck属性是HTML5专门为input和textarea标签提供新属性，它的功能是对用户输入的内容进行拼写和语法检查，如果拼写错误，文字下面会有波浪线。 spellcheck=false：取消语法和拼写检测 spellcheck=true：开启语法和拼写检测 5、tabindex
<div> <label>名字</label> <input tabindex="3" type="text"/> </div> <div> <label >性别</label> <input tabindex="2" type="text"/> </div> <div> <label >身份证</label> <input tabindex="1" type="text"/> </div> <div> <label >年龄</label> <input type="text"/> </div> <input type="button" value="提交" tabindex="5"/> <div> <a href="http://www.huadianedu.com" tabindex="6">华点软件学院</a> <a href="http://www.baidu.com" tabindex="0">百度首页</a> </div>tabindex=”正整数”：按键盘tab键可以选中（获取焦点），这里选择的标签可以是input输入框，input按钮，a标签…，同时获取按tab键选中的顺序和设置的tabindex属性一致，tabindex越大，越后面选中，建议不使用tabindex=0; tabindex= -1,按tab不选中
