1.HTML5推出的理由
推出的缘由和目标:
目前web端存在的一些问题,比如兼容性问题,同样的页面,在不同的浏览器上显示的效果不一样,那么开发人员需要做很多额外的工作去解决一些问题,需要花费大把的时间在这上面;一些特殊的权限没有给开发人员,比如,定位权限、;拉起照相机权限、动画、绘画。那么H5的推出就是为了解决这一系列的问题。
H5解决了什么问题:
(1)开发了一些特殊的权限给开发者,有了这些权限,开发者就可以轻易的获取用户的定位信息、拍照功能等等。
(2)解决不同的浏览器的兼容性问题:HTML5也可以理解为是一个协议标准,它让绝大部分浏览器产商都遵守这一标准
(3)文档结构不清晰:在之前的开发中页面的布局都是使用div+css,不利于搜索引擎去抓取页面信息,不如,浏览器抓取一片新闻网页的时候,根本抓不到作者,新闻发布时间等信息。
H5的浏览器支持情况:
① Chrome,Firefox:支持html5很多年,而且有自动升级,支持最好。
② Safari,Opera:同样支持html5很多年,支持也很好。
③ IE:IE10起比较好了,之前很差。(IE9+都支持)
2.语法的改变
(1)内容类型:(contentType):
HTML文件的后缀名依旧是.html或.htm,HTML文件的内容类型“text/html”
(2)doctype:
H5之前:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
H5:
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、dt、dd、tr、td、th
(5)布尔类型的属性
对于布尔类型的属性,比如:readonly、disabled、checked、selected,当他们不写值得时候默认是true,同时对于值是任何东西都是无效的。说白了,只要写了这个属性,属性立马生效
(6)属性省略引号
在之前的学习中,属性值都是方在双(单)引号里面的,在H5中,如果属性值中不包括特殊字符,双引号和单引号都可以去掉。
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、range。
废弃的标签:font、conter、s、tt、u、big、basefont
4全局属性
在HTML5中,定义了少量对所有元素都有效的属性。
(1)contenteditable:
<p contenteditable="true">我是一个段落,但是我可以编辑</p> //可以被编辑
<p contenteditable="false">我是一个段落,但是我可以编辑</p> //不能被编辑
<p contenteditable="">我是一个段落,我没有设置值</p> //可以被编辑
contenteditable-true,可以直接在页面上编辑,编辑之后,元素的宽高自动适应。
false,说明这个标签不能被编辑
注意:(1)如果只是设置了contenteditable,其默认的值是true。
(2)contenteditable属性可以被继承。需要考虑“就近原则”
(2)designMode:
<script>
document.designMode = "on";
</script>
用来指定整个页面是否可以编辑,当designMode设置on的时候相当于页面上所有的元素都设置了contenteditable-true
当designMode设置off的时候,相当于页面上所有的元素都设置了contenteditable-false。
注意:(1)如果同时设置了designMode和contenteditable-false属性最终是否可以编辑,采用“就近原则”。
(2)该属性在IE8以下的浏览器无效。 以兼容IE6,7,8为耻
(3)hidden
<div style="display: none">我想隐藏</div>
<div class="box">box1</div>
<div style="visibility: hidden">我想隐藏</div>
<div class="box">box2</div>
<div hidden>我想隐藏</div>
<div class="box">box3</div>
Hidden属性可以实现第元素的隐藏,隐藏的元素不会被显示,同时不会占原有的位置,类似display:none。
注意:hidden属性默认值是“hidden”,所见呢,设置该属性的时候,只需要写属性名称就OK了。
Hidden:看不见,不占位置
Visibility:hidden:看不见,占位置
Display:none:看不见,不占位置
(4)spellcheck
输入appple试试看
<input type="number" spellcheck="true"/>
<textarea spellcheck="true"></textarea>
spellcheck属性是HTML5专门为input和textarea标签提供的新属性,它的功能是对用户输入的内容进行拼写和语法检查,如果拼写出错文字下面有一个波浪线。
spellcheck=false 取消语法和拼写检查
spellcheck=true 开启语法和拼写检查
(5)tabindex
<div>
<label>名字</label> <inputtype="text"tabindex="1"/>
</div>
<div>
<label>身份证号</label> <inputtype="text"tabindex="2"/>
</div>
<div>
<label>性别</label> <inputtype="text"tabindex="4"/>
</div>
<div>
<label>年龄</label> <inputtype="text"tabindex="3"/>
</div>
<div>
<label>电话</label> <inputtype="text"/>
</div>
<div>
<input type="button" value="提交"tabindex="5"/>
</div>
<div>
<a href="http://www.huadianedu.com" tabindex="6">华点软件学院</a>
<a href="http://www.baidu.com">百度首页</a>
</div>
Tabindex=“正整数”:按键盘tab键可以选中(获取焦点),这里选中的标签可以是input输入框、input按钮、a标签等等。同时按tab键选择的循序和设置的tabindex属性一致,tabindex越大,越后面选中。建议不使用tabindex=0。
Tabindex=-1:按tab不选中。