HTML5-H5的变化

来源：互联网发布：mysql 建表时创建索引编辑：程序博客网时间：2024/05/17 07:20

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之前：

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

H5：

<metacharset="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：

<pcontenteditable="true">我是一个段落，但是我可以编辑</p> //可以被编辑

<pcontenteditable="false">我是一个段落，但是我可以编辑</p> //不能被编辑
<p contenteditable="">我是一个段落，我没有设置值</p> //可以被编辑

contenteditable-true，可以直接在页面上编辑，编辑之后，元素的宽高自动适应。

false，说明这个标签不能被编辑

注意：（1）如果只是设置了contenteditable，其默认的值是true。

（2）contenteditable属性可以被继承。需要考虑“就近原则”

（2）designMode：

用来指定整个页面是否可以编辑，当designMode设置on的时候相当于页面上所有的元素都设置了contenteditable-true

当designMode设置off的时候，相当于页面上所有的元素都设置了contenteditable-false。

注意：（1）如果同时设置了designMode和contenteditable-false属性最终是否可以编辑，采用“就近原则”。

（2）该属性在IE8以下的浏览器无效。以兼容IE6,7,8为耻

（3）hidden

<divstyle="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不选中。

阅读全文

0 0