HTML5新特性是什么-创新互联

小编给大家分享一下HTML5新特性是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、HTML5与HTML4

1.1 推出的理由和目标

H5的出现，对于Web来说意义重大。因为他的意图是想要把目前Web上存在的各种问题一并解决掉。

1. Web浏览器之间的兼容性很低

2. 文档结构不够明确（增加了很多结构, 语义化的标签）

3. Web应用程序的功能受到了限制

H5 的出现极大的解决了上面的问题

1.2 语法的改变

1.2.1 DOCTYPE声明

H5  DOCTYPE的声明是这样的：

Html:4s  DOCTYPE的声明是这样的：

Html: 4t  DOCTYPE 的声明是这样的

1.2.2 指定字符编码

H5指定字符编码格式如下：

Html:4s 指定字符编码如下：

1.2.3 可以省略结束标记的元素

给大家举一个简单的例子就明白啥玩意了
我们平常写 p  标签 是这样写的：

  
  
Hello world!
  

新的写法可以这样写：

    
    
Hello world!
    

如果大家不相信，可以亲自去测试一下，怎么测试呢？很简单，就是分别设置他们的样式即可，看看是否一样，若一样，证明二者是等价的！注意：设置 p标签的样式。

1.2.4 具有boolean值的属性（disabled，checked）

disabled 多用于input元素，button元素，option元素等 ，意思是 是否禁用这些 元素  ，用法如下：

其中属性值“disabled”可以替换成任何的其它单词甚至是“enabled”（不过“false”除外），因为属性值为“false”时表示属性不启用，属性值“true”表示启用属性。如下代码的button元素都处于禁用状态：

如下代码的button元素处于启用状态：

checked 用法和disabled一样，这里小编就不在过多赘述！

1.2.5 省略引号 （标签内的属性值可以省略引号）

H5之前属性值的写法是这样写的，以  img 标签的 src 属性为例：

目前可以这样写：

二者的结果是一样的。都能够正常显示图片

1.3 新增的语义化标签

什么是语义化？

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化

新增的语义化标签：Section、article、aside、header、hgroup、footer、nav、figure

具体用法：新增语义化标签的用法

1.4 新增的"花样"标签元素

video、audio、canvas、embed、mark、progress、meter、time、ruby、rt、rp、wbr、command、details、datalist、datagrid、keygen、output、source、menu

这些标签小编这里就不在一 一介绍用法了。用的时候直接百度就行。一般用的也不多，记住有这个东西就行。(面试的时候可能会用到)

1.5 新增的 input 类型

Email、url、number、range、DatePickers
这里只给出部分讲解：

1. number

1. range

其余的小编就不测试了，有心的你可以测试一下！

1.6 废除的标签

1. 能使用CSS替代的basefont、big、center、font、s、tt、u等

2. 不再使用frame框架

3. 只有部分浏览器支持的元素

4. 其他被废除的元素

1.7 新增的全局属性

全局属性是指对所有标签都可以使用的属性

• contentEditable属性(规定内容是否可编辑)

• designMode属性(这个在js中进行使用，让页面中所有的元素开启可编辑模式)

           window.onload = function() {
            document.designMode = "on";
        }

• hidden属性

• spellcheck属性 （input和textarea提供的新属性，做了语法检查）

• tabindex属性  (让标签获取到焦点)

      你好
      hello world!
      html5

二、新增的语义化标签

2.1 新增元素

1.  页眉

主要用于页面的头部的信息介绍，也可用于板块头部

1. 页脚

页面的底部 或者 版块底部

1. 导航  (包含链接的的一个列表)

1.  页面上的一个标题组合

        

                 
旅游
                 
上海
      

1. 页面上的板块

用于划分页面上的不同区域,或者划分文章里不同的节

1. 用来在页面中表示一套结构完整且独立的内容部分

可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等

该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

8.

用于对元素进行组合。一般用于图片或视频

1.  figure 的子元素,用于对figure的内容进行说明

2.2 讲解标签