HTML5 特点及变化

最新推荐文章于 2025-05-27 00:09:02 发布

lq1224825

最新推荐文章于 2025-05-27 00:09:02 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 开发人员

本文链接：https://blog.youkuaiyun.com/l954758514/article/details/78176504

html5 专栏收录该内容

3 篇文章

订阅专栏

HTML5推出的缘由和目标
1）、目前web端存在一些问题比如说兼容性，同样的页面，在不同的浏览器上显示的效果不一样，那么开发人员需要做很多额外的工作去解决这一问题，需要花费大量的时间在这上面
2）、一些特殊的权限没有给开发人员，比如：定位权限、拍照权限、动画以及绘画。
3）、HTML5的推出就是为了解决这一系列的问题

HTML5解决了什么问题
1）、开放了一些特殊的权限给开发者，有了这些权限，开发者可以轻易地获取用户的定位信息、拍照功能等等
2）、解决了不同浏览器的兼容性问题。HTML5也可以理解为一个协议标准，它让绝大部分浏览器生产商都遵守这一标准。
3）、文档结构不清晰，在之前的开发中，页面的布局都是使用DIV+CSS，不利于搜索引擎去提取页面信息，比如浏览器提取一片新闻网页的时候，根本抓不到作者、新闻发布时间等信息。

HTML5之前的页面结构：
这里写图片描述

HTML5的页面结构：
这里写图片描述

H5浏览器的支持情况：
（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。
（2）Safari，Opera：同样支持html5很多年，支持也很好。
（3）IE：IE10起比较好了，之前很差。版本9以上都支持

语法的改变
1、内容类型（contentTytp）HTML文件的后缀名“.HTML”或“.htm”,HTML文件内容类型是“text/html”。
2、DOCTYPE（HTML开头的地方的关键字）：
HTML5之前的样式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

H5的样式：

<!DOCTYPE html>

Doctype（声明方式）在HTML中是必不可少的，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改，但是H5的声明方式向下兼容（兼容所有的低版本）。

字符集：
H5之前：

<meta http-equiv="Content-Type" content="text/html" charset="utf-8">

H5：

<meta charset="UTF-8">

HTML5默认的字符集编码是UTF-8，之前的大部分版本默认字符集编码是ISO-8859-1

标签标记省略
1)、省略全部：body、tbody、head、colgroup、html
2)、不允许写结束标签的标签：img、input、br、base、link、mata等等
3)、允许写结束标签：p、li、dt、dd、tr、td、th、

布尔类型的属性
对于布尔类型的属性，比如：readonly、dissabled、checked、selected不写值默认为TRUE，同时对于值是任何东西都是无效的，说白了只要写这个属性，属性立马生效。

属性省略引号

<div>可以省略<input type=text readonly=readonly/></div>
<div>单引号<input type=‘text’ readonly=‘’/></div>
<div>登录<input type="text" readonly value="登录"></div>
<div>登录<input type="text" readonly value=<登录></div>

在H5之前，属性值都是放在引号里面，在H5中如果属性值中不包括特殊字符（”<”,”>”,”=”）双引号和单引号都可以去掉。

新增和废弃的元素新增和废弃的属性
新增的结构（布局）标签：section、article、nav、foot、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、basefon、u、tt

全局属性
在HTML5中，定义了少量对所有元素都有效的属性。
1、 Contenteditable

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

设置contenteditable=TRUE属性之后可以直接在页面上进行编辑，编辑之后元素的宽高自动适应。
contenteditable=FALSE说明这个标签不能被编辑。
注意：1）、如果只是设置了这个属性，默认的值是TRUE。
2）、属性可以被继承。需要考虑“就近原则”。

2、designMode

  <script>
    document.designMode = "on";
  </script>

用来指定整个页面是否可以编辑，当designMode设置为on的时候相当于页面上所有的元素都设置contenteditable=TRUE。当designMode设置为off的时候相当于页面上所有的元素都设置contenteditable=FALSE。
注意：1）、如果同时设置了designMode和contenteditable，最终采用“就近原则”。
2）、该属性在IE8以下的浏览器无效。

3、hidden
Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会占原来的位置。类似于display：none
注意：hidden的属性默认值是hidden，所以说设置只需要设置属性名，不需要属性值。
Hidden:看不见，不占位置。
Visibility:hidden看不见，占位置
Display：none看不见，不占位置。

4、spellcheck

<input type="text" spellcheck="true">

5、tabindex
Tabindex=“正整数”：按tab键可以选中（获得焦点），这里选择的标签可以是input输入框、按钮、a标签等等。同时按tab键选中的顺序和设置的tabindex属性一致，tabindex值越大，越后面选中。建议不使用tabindex=0；
Tabindex=-1：按tab键不选中。