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