HTML5
1.1 HTML5推出的理由
目前web端存在的问题（兼容性同样的问题再不同的浏览器上显示的不一样那么开发人员需要做很多的额外的工作去解决这样的问题），一些特殊的权限没有开发给开发人员，比如：定位权限、动画、绘画，那么H5的推出就是为了解决这一序列的问题。
H5解决了什么文题：
1）开发了一些特殊的权限给开发者；有了这些权限，开发可以很轻易的获取用户的定位的信息、拍照功能等等
2）解决不同浏览器的兼容性问题；HTML5也可以理解是协议标准，他让绝大部分浏览器生产商都遵守这一标准
3）文档结构不清晰：在以前的开发中，页面的布局都是使用Div+css，不利于搜索引擎去抓取页面信息，比如浏览器抓取一片新闻页面的时候，根本抓不到作者，新闻发布时间等信息。
H5的浏览器支持情况
（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
（2）Safari，Opera：同样支持html5很多年，支持也很好。
（3）IE：IE10起比较好了，之前很差。
1.2语法的改变
1）内容类型（contenType）：html文件的后缀名依旧是.html或.htm
2）文件的内容类型
3）Doctype：解析文档
4）
H4：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
H5<!DOCTYPE html>
DOCTYPE声明在HTML文档中必不可少，位于HTML文档一行代码，h5声明方式向下兼容
5）字符集：h5之前：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
H5：<meta charset=utf-8"/>
Html5默认的字符集是UTF-8
6）标签省略
可以省略全部：body、tbody、head、colgroup、html
不允许写结束标记的标签：img、inpout、br、hr、base link、meta
允许写结束标记的标签：p、li、dt、tr、td、th
7）布尔类型的属性
对于布尔类型的属性：比如readonly，disable、checked、selected当他们不写值的时候，默认是true
同时对于值是任何东西都是无效的，说白了只要写了这个属性，属性立马生效
6）属性值省略引号
在之前的学习中，属性值都是放在双单引号里面的在h5中，如果属性性值中不包括特殊字符，双引号和单引号都可以去掉。
特殊字符（<> =）
1.3新增和废弃的元素新增和废弃的属性
新增的结构标签：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、pickers、range。。。
废弃的标签：font、center、s、tt、u、big、basefont
1.4全局属性
在html5中，定义了少量对所有元素都有效的属性
<p contenteditable="true">asdasdada</p>
<p contenteditable>asdasdada</p>
1、contenteditable 标签设置了contenteditable=true之后，可以直接在页面上进行编码，编辑之后元素的宽高自动适应，
contenteditable=false说明这个标签不能被编辑
注意：1、如果只是设置了contenteditable，其默认值是true
2、Contenteditable属性可以被继承，需要考虑“就近原则”
2.designMode：
用来指定整个页面是否可以编辑，当designMode设置为on的时候，相当于页面上所有的元素设置了contenteditable=true
当designMode设置为off的时候，相当于页面上所有的元素设置了contenteditable=false。
注意：如果设置了designMode和contenteditable属性，最终是否可以编辑，采用“就近原则”
该属性在IE8以下的浏览器无效以兼容IE6、7、8为耻
2、Hidden
Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会站原有的位置。类似于 display：none
注意：hidden属性默认值是“hidden”，所以那，设置该属性的时候只需要属性名就ok了
Hidden ：看不见，不占位置
Visiblity：hidden 看不见，占位置
display：none看不见，不占位置
3、Spellcheck
<input type="text" spellcheck="true"/>
<input type="textarea" spellcheck="true" />
<textarea spellcheck="true" id="" cols="30" rows="10"></textarea>
Spellcheck属性是HTML专门input和textarea标签提供新属性，他的功能是对用户输入的内容进行拼写和语法检查，如果拼写出错了，文字下面有一个波浪线。
Spellcheck=false取消语法和拼写检测。
Spellcheck=true 开启语法的拼写检测。
5、Tabindex
<body>
<div><label >名字</label>
<input type="text"tabindex="2"/>
</div>
<div><label >身份证</label>
<input type="text"tabindex="0"/>
</div>
<div><label >年龄</label>
<input type="text"tabindex="4"/>
</div>
<div>
<input type="button" value="提交" tabindex="5"/>
</div>
<div>
<a href="http://www.huadaindu.com" tabindex="6">华点</a>
<a href="http://www.baidu.com" tabindex="7">百度</a>
</div>
Tabindex=“正整数”：按键盘tab键可以选中（获取焦点），这里选择标签可以是input输入框input按钮、a标签等等。同时按tab键选择的顺序和设置的tabindex的属性一致，tabinbex值越大，越后面选中。不使用tabinbex=0；
Tabindex=“-1”不选中。
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
