HTML5 新特征

2019年8月22日 100次阅读来源: 小菜鸟

一、HTML5与HTML4

1.1 推出的来由和目标

H5的涌现，关于Web来讲意义严重。由于他的企图是想要把如今Web上存在的种种题目一并处置惩罚掉。

Web浏览器之间的兼容性很低
文档组织不够邃晓（增添了许多组织, 语义化的标签）
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
这里只给出部份解说：

number

    <input type="number" name="">

《HTML5 新特征》

range

 <input  type = "range" name = "">

《HTML5 新特征》

其他的小编就不测试了，故意的你可以测试一下！

1.6 取销的标签

能运用CSS替换的basefont、big、center、font、s、tt、u等
不再运用frame框架
只要部份浏览器支撑的元素
其他被取销的元素

1.7 新增的全局属性

全局属性是指对统统标签都可以运用的属性

contentEditable属性(划定内容是不是可编辑)

    <input type="text" name="name" contenteditable="true">

《HTML5 新特征》

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>

《HTML5 新特征》

二、新增的语义化标签

2.1 新增元素

<header></header> 页眉

重要用于页面的头部的信息引见，也可用于板块头部

<footer></footer>页脚

页面的底部或许版块底部

<nav></nav> 导航 (包含链接的的一个列表)

     <nav>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
    </nav>

<hgroup></hgroup> 页面上的一个题目组合

        <hgroup>
                 <h1>旅游</h1>
                 <h2>上海</h2>
      </hgroup>

<section></section> 页面上的板块

用于分别页面上的差别地区,或许分别文章里差别的节

<article></ article > 用来在页面中示意一套组织完整且自力的内容部份

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

<aside></aside>

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

8.<figure></figure>

用于对元素举行组合。平经常使用于图片或视频

<figcation></figcation> figure 的子元素,用于对figure的内容举行申明

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

《HTML5 新特征》

2.2 解说标签

<article><object><embed>强调自力性
<section> 强调分段，平常存在一个题目标

    <section>
    <h1>CAR</h1>
    </section>

<nav> 并非统统的链接组都放在nav标签中，只须要将重要的，基础的放进nav中即可。

平经常使用于传统导航，侧边栏导航，页内导航、翻页导航

<aside> 来示意当前页面或文章的隶属信息部份，它可以包含与当前页面或重要内容相干的援用、侧边栏、广告、导航条，以及其他相似的有区分于重要内容的部份。
非主体组织标签

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>

《HTML5 新特征》

3.2 formtarget 属性

_blank 在新窗口中翻开。
_self 默许。在雷同的框架中翻开。
_parent 在父框架集合翻开。
_top 在悉数窗口中翻开。

3.3 autofocus 猎取核心

    <input type="text" name="">
    <input type="text" name="" autofocus="autofocus">

《HTML5 新特征》

3.4 required 属性

HTML5中新增的属性可以运用于大多数的输入标签上，在提交时，假如元素中内容为空缺，则不许可提交，同时在浏览器中显现信息提醒笔墨。看下面例子：

    <form>
    <input type="text" name="" autofocus="autofocus" required>
    <input type="submit" name="">
    </form>

《HTML5 新特征》

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

    <form>
    <input type="text" name="name" placeholder="请输入你的姓名">
    </form>

《HTML5 新特征》

3.6 autoComplete 属性

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

《HTML5 新特征》

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>

《HTML5 新特征》

3.8 小编有话说

新增的表单属性和元素另有许多，在这里我只列举了一些较经常使用的属性和元素，至于盈余的部份，小伙伴们用到的时刻网上搜刮就行。好啦！这部份终了，继承下面的内容。

四、新的Javascript挑选器

4.1 querySelector()

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

《HTML5 新特征》

4.2 querySelectorAll()

    <div id="box">Hello World！</div>
    <div id="box">Hello！</div>
    <div id="box">World！</div>
    <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>

《HTML5 新特征》

五、新增 dom 节点属性

clasList 中的属性和要领

length (长度)

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

《HTML5 新特征》

add() 增添

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

《HTML5 新特征》

remove() 移除

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

《HTML5 新特征》

toggle() 简朴明白：有则删除，没有则增加

有的时刻

    <div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
    var box = document.querySelector("#box");
    window.onload = function (){
        box.classList.toggle("test");
        console.log(box.classList);
    }
</script>

《HTML5 新特征》

没有的时刻

    <div id="box" class="test test2 test3 test4">Hello World!</div>
<script type="text/javascript">
    var box = document.querySelector("#box");
    window.onload = function (){
        box.classList.toggle("test5");
        console.log(box.classList);
    }
</script>

《HTML5 新特征》

六、JSON 的新要领

6.1 eval

eval(): 可以剖析任何字符串变成JS , 对JSON内容举行剖析的话必需在最表面运用(); 比方:

    <script>
    var str = "({name:'Tom',age:'20',sex:'man'})";
    var obj = eval(str);
    console.log(obj);
</script>

《HTML5 新特征》

七、自定义标签属性

语法：1. 在标签中运用data-str1-str2
2. 在JS 中猎取到响应的自定义属性的值。dom.dataset.str1Str2

见下面的小例子就邃晓了：

    <div id="box" data-my-color="red" data-font-size="24px">Hello world!</div>
<script>
    var box = document.querySelector("#box");
    box.style.color = box.dataset.myColor;
    box.style.fontSize = box.dataset.fontSize;
</script>

《HTML5 新特征》

剖析：实在很简朴，首先在标签中依据本身的须要定义属性，比方小编这里定义了字体的色彩和大小，光定义是不可的，浏览器不认识，所以还须要援用，在js中举行援用，援用体式格局就是和寻常我们用js转变属性值是一样的，服膺要用驼峰定名法。

八、JS加载历程

平常状况

根据通例，统统script元素都应当放在页面的head元素中。这类做法的目标就是把
统统外部文件(CSS文件和JavaScript文件)的援用都放在雷同的地方。但是，在文档的head元素中包含统统JavaScript文件，意味着必需比及悉数JavaScript代码都被下载、剖析和实行完成今后，才最先显现页面的内容(浏览器在碰到body标签时才最先显现内容)。
关于那些须要许多JavaScript代码的页面来讲，这无疑会
致使浏览器在显现页面时涌现显著的耽误，而耽误时期的浏览器窗口中将是一片空缺。为了防止这个题目，如今Web运用程序平常都把悉数JavaScript援用放在body元素中页面的内容背面。如许一来，在剖析包含的JavaScript代码之前，页面的内容将完整显如今浏览器中。而用户也会由于浏览器窗口显现空缺页面的时候收缩而觉得翻开页面的速率加快了。

总结一句话：在JavaScript代码时要把该部份放在body的背面

看下面的图解：

《HTML5 新特征》

defer (耽误剧本)

耽误剧本：defer属性只适用于外部剧本文件。
假如给script标签定义了defer属性，这个属性的作用是表明剧本在实行时不会影响页面的组织。也就是说，剧本会被耽误到悉数页面都剖析终了后再运行。因而，假如script元素中设置了defer属性，相当于通知浏览器马上下载，但耽误实行。
看下面的图文详解：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>耽误加载</title>
    <script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

剖析：这个例子中，虽然我们把script元素放在了文档的head元素中，但个中包含的剧本将耽误到浏览器碰到</html>标签后再实行。

HTML5范例请求剧本根据它们涌现的先后递次实行，因而第一个耽误剧本会先于第二个耽误剧本实行，而这两个剧本会先于DOMContentLoaded事宜(在DOM树构建完成后触发，不须要比及统统的资本都加载终了)实行。

特别注重：在实际当中，耽误剧本并不一定会根据递次实行，也不一定会在DOMContentLoaded事宜触发前实行，因而最好只包含一个耽误剧本。
有 defer，加载后续文档元素的历程将和 script.js 的加载并行举行（异步），然则 script.js 的实行要在统统元素剖析完成以后，DOMContentLoaded 事宜触发之前完成。

最好的要领：从有用角度来讲，把统统剧本都放在 </body> 之前是最好实践，由于关于旧浏览器来讲这是唯一的优化挑选，此法可保证非剧本的其他统统元素可以以最快的速率获得加载和剖析。

图解：
《HTML5 新特征》

async (异步剧本)

异步剧本：async属性也只适用于外部剧本文件，并通知浏览器马上下载文件。
但与defer差别的是：标记为async的剧本并不保证根据指定它们的先后递次实行。

直接图解：

《HTML5 新特征》

defer 和 async 的异同

defer 和 async 在收集读取（剧本下载）这块儿是一样的，都是异步的（相较于 HTML 剖析）

在于剧本下载完以后什么时候实行，明显 defer 是最接近我们关于运用剧本加载和实行的请求的。defer是马上下载但耽误实行，加载后续文档元素的历程将和剧本的加载并行举行（异步），然则剧本的实行要在统统元素剖析完成以后，DOMContentLoaded 事宜触发之前完成。async是马上下载并实行，加载和衬着后续文档元素的历程将和js剧本的加载与实行并行举行（异步）。

九、总结

上述有的还没有总结完，故意的小伙伴可以继承总结，篇幅有限，所以把下面的内容放到了接下来的另一篇。下一篇才是干货，继承……..

    原文作者：小菜鸟
    原文地址: https://segmentfault.com/a/1190000015798354
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

一、HTML5与HTML4

1.1 推出的来由和目标

1.2 语法的转变

1.2.1 DOCTYPE声明

1.2.2 指定字符编码

1.2.3 可以省略终了标记的元素

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

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

1.3 新增的语义化标签

1.4 新增的”名堂”标签元素

1.5 新增的 input 范例

1.6 取销的标签

1.7 新增的全局属性

二、新增的语义化标签

2.1 新增元素

2.2 解说标签

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

3.1 form 小编俗解：在 表单外部的标签可以经由历程form属性举行链接

3.2 formtarget 属性

3.3 autofocus 猎取核心

3.4 required 属性

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

3.6 autoComplete 属性

3.7 pattern 属性

3.8 小编有话说

四、新的Javascript挑选器

4.1 querySelector()

4.2 querySelectorAll()

五、新增 dom 节点属性

clasList 中的属性和要领

六、JSON 的新要领

6.1 eval

七、自定义标签属性

八、JS加载历程

平常状况

defer (耽误剧本)

async (异步剧本)

defer 和 async 的异同

九、总结

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

3.1 form 小编俗解：在表单外部的标签可以经由历程form属性举行链接