社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 正文

HTML5有哪些新特性和新标签？分享HTML5 JS新特性

php是最好的语言
发布： 2018-07-30 15:51:04
原创
2271 人浏览过

自从有了H5后，大家都只记得html5了吧，html4是不是都被遗忘了，确实，html5功能强大，用途也多，对Web来说意义非凡，他可以把目前Web上存在的各种问题一并解决掉，所以本文将会详细介绍HTML5 的新特性。apache php mysql

begin！

一、HTML5与HTML4

1.1 推出的理由和目标

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

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

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

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

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

1.2 语法的改变

1.2.1 DOCTYPE声明

H5   DOCTYPE的声明是这样的：

     <!DOCTYPE html>
登录后复制

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
登录后复制

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

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

1.2.2 指定字符编码

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

    <meta charset="UTF-8" />
登录后复制

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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
登录后复制

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

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

  <body>
  <p>Hello  world!</p>
  </body>
登录后复制

新的写法可以这样写：

    <body>
    <p/>Hello world!
    </body>
登录后复制

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

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

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

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

    <input type="button" disabled="true" value="测试按钮">  
    <input type="button" disabled="123" value="测试按钮">  
    <input type="button" disabled=" " value="测试按钮">  
    <input type="button" disabled="any word" value="测试按钮">
登录后复制

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

    <input type="button" disabled="false" value="测试按钮">  
    <input type="button" value="测试按钮">
登录后复制

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

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

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

    <body>
    <img src="1.png" alt="">
    </body>
登录后复制

目前可以这样写：

    <body>
    <img sre = 1.png  alt = "">
    </body>
登录后复制

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

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

    <input type="number" name="">
登录后复制

1.png

  1. range

 <input  type = "range" name = "">
登录后复制

2.png

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

1.6 废除的标签

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

  2. 不再使用frame框架

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

  4. 其他被废除的元素

1.7 新增的全局属性

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

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

    <input type="text" name="name" contenteditable="true">
登录后复制

1.png

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

            window.onload = function() {
            document.designMode = "on";
        }
登录后复制

  • hidden属性

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

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

      <a href="javascript:void(0);" tabindex="3">你好</a>
      <a href="javascript:void(0);" tabindex="2">hello world!</a>
      <a href="javascript:void(0);" tabindex="1">html5</a>
登录后复制

1.png

二、新增的语义化标签

2.1 新增元素

  1. 页眉

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

  1. 页脚

页面的底部 或者 版块底部

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

     <nav>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
    </nav>
登录后复制

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

        <hgroup>
                 <h1>旅游</h1>
                 <h2>上海</h2>
      </hgroup>
登录后复制

  1. 页面上的板块

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

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

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

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

8.

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

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

    <figure>
<!-- (注意没有alt) -->
    <img src="images/225.jpg" width="100px" height="100px" />
    <figcaption>薰衣草</figcaption>
</figure>
登录后复制

1.png

2.2 讲解标签

  1. 强调独立性

  2. 强调分段，一般存在一个标题的

    3.     <section>
    <h1>CAR</h1>
    </section>
    登录后复制

    一般用于传统导航，侧边栏导航，页内导航、翻页导航

    2. 非主体结构标签

    Header 元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面和页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据、搜索表单或相关的logo图片。

    Footer元素可以作为其上层父级内容区或者一个根区块的脚注。Footer通常包含其相关区块的脚注信息，如作者、相关的阅读链接及其版权信息等

    Hgroup元素是将标题及其子标题进行分组的标签。Hgroup标签通常会将h1-h6标签进行分组。譬如一个内容区的标题及其子元素算一组。

    Address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、它们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

    三、表单内新增的元素和属性

    3.1 form 小编俗解：在 表单外部的标签可以通过form属性进行链接

    eg：

        <form id="form1">
    <label for="man">MAN</label><input type="radio" id="man" name="sex">
    <input type="radio" id="woman" name="sex">
    </form>
    <label for="woman" form="form1">WOMAN</label>
    登录后复制

    1.png

    3.2 formtarget 属性

    • _blank 在新窗口中打开。

    • _self 默认。在相同的框架中打开。

    • _parent 在父框架集中打开。

    • _top 在整个窗口中打开。

    3.3 autofocus 获取焦点

        <input type="text" name="">
    <input type="text" name="" autofocus="autofocus">
    登录后复制

    1.png

    3.4 required 属性

    HTML5中新增的属性可以应用于大多数的输入标签上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。看下面例子：

        <form>
    <input type="text" name="" autofocus="autofocus" required>
    <input type="submit" name="">
    </form>
    登录后复制

    1.png

    3.5 placeholder 属性，用于显示文本未输入内容之前，

        <form>
    <input type="text" name="name" placeholder="请输入你的姓名">
    </form>
    登录后复制

    1.png

    3.6 autoComplete 属性

        <form autocomplete="on">
    <input type="text" name="name" placeholder="请输入你的姓名" >
    </form>
    登录后复制

    1.png

    3.7 pattern 属性

    该属性用于正则表达式。见下面小例子：

        <form>
    <input type="text" name="content" autocomplete="off" placeholder="请输入邮箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
    <input type="submit">
</form>
    登录后复制

    1.png

    3.8 小编有话说

    新增的表单属性和元素还有很多，在这里我只列举了一些较常用的属性和元素，至于剩余的部分，小伙伴们用到的时候网上搜索就行。好啦！这部分结束，继续下面的内容。

    四、新的Javascript选择器

    4.1 querySelector()

        <p id="box">Hello World！</p>
    <script type="text/javascript">
      var box = document.querySelector("#box");
      box.style.color = "red";
      box.style.fontSize = "24px";
      box.style.fontWeight = "blod";
    </script>
    登录后复制

    1.png

    4.2 querySelectorAll()

        <p id="box">Hello World！</p>
    <p id="box">Hello！</p>
    <p id="box">World！</p>
    <script type="text/javascript">
      var boxList = document.querySelectorAll("#box");
      boxList.forEach(function(item){
          item.style.color = "red";
          item.style.fontSize = "24px";
          item.style.fontWeight = "blod";
      });
    </script>
    登录后复制

    1.png

    五、新增 dom 节点属性

    clasList 中的属性和方法

    • length (长度)

        <p id="box" class="test  test1   test2  test 3 test4"></p>
    <script>
        var  box = document.querySelector("#box");
        window.onload = function (){
            console.log(box.classList);
            console.log(box.classList.length);
        }
    </script>
    登录后复制

    1.png

    • add() 增加

        <p   id = "box"  class = "test  test1 test2 test3 test4 "></p>    
    <script>
        var box = document.querySelector("#box");
        window.onload = function(){
            box.classList.add("test5");
            console.log(box.classList);
        }
    </script>
    登录后复制

    1.png

    • remove() 移除

        <p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
    var box = document.querySelector("#box");
    window.onload = function (){
        box.classList.remove("test");
        console.log(box.classList);
    }
</script>
    登录后复制

    1.png