HTML5是什么新特性和新标签？分享HTML5 JS新特性
begin！
一、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
这些标签小编这里就不在一 一介绍用途了。用的时候直接baidu就行。一样用的也不多，记住有这个东西就行。(面试的时候大概会用到)
1.5 新增的 input 类型
Email、url、number、range、DatePickers
这里只给出部分讲解：
number
<input type="number" name="">
range
<input type = "range" name = "">
其余的小编就不测试了，有心的你可以测试一下！
1.6 废止的标签
能使用CSS替换的basefont、big、center、font、s、tt、u等
不再使用frame框架
只要部分阅读器支撑的元素
其他被废止的元素
1.7 新增的全局属性
全局属性是指对所有标签都可以使用的属性
contentEditable属性(规定内容可否可编纂)
<input type="text" name="name" contenteditable="true">
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>
二、新增的语义化标签
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>
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>
3.2 formtarget 属性
_blank 在新窗口中翻开。
_self 默许。在雷同的框架中翻开。
_parent 在父框架集中翻开。
_top 在整个窗口中翻开。
3.3 autofocus 猎取焦点
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required 属性
HTML5中新增的属性可以利用于大多数的输入标签上，在提交时，假如元素中内容为空白，则不同意提交，同时在阅读器中显示信息提醒文字。看下面例子：
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder 属性，用于显示文本未输入内容此前，
<form>
<input type="text" name="name" placeholder="请输入你的姓名">
</form>
3.6 autoComplete 属性
<form autocomplete="on">
<input type="text" name="name" placeholder="请输入你的姓名" >
</form>
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>
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>
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>
五、新增 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>
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>
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>
toggle() 简便懂得：有则删除，没有则增加
有的时候
<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.toggle("test");
console.log(box.classList);
}
</script>
没有的时候
<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.toggle("test5");
console.log(box.classList);
}
</script>
六、JSON 的新办法
6.1 eval
eval(): 可以解析任何字符串变成JS , 对JSON内容停止解析的话必需在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
七、自定义标签属性
语法：1. 在标签中使用data-str1-str2
2. 在JS 中猎取到响应的自定义属性的值 。dom.dataset.str1Str2
见下面的小例子就清楚了：
<p id="box" data-my-color="red" data-font-size="24px">Hello world!</p>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
剖析： 其实很简便，第一在标签中按照本人的需要定义属性，比方小编这里定义了字体的色彩和大小，光定义是不可的，阅读器不认识，所以还需要援用，在js中停止援用，援用方式就是和平常我们用js改动属性值是一样的，谨记要用驼峰命名法。
八、JS加载历程
一样状况
依照惯例，所有script元素都应当放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的援用都放在雷同的地方。可是，在文档的head元素中包括所有JavaScript文件，意味着必需比及全部JavaScript代码都被下载、解析和施行完成今后，才能开端显现页面的内容(阅读器在碰到body标签时才开端显现内容)。
关于那些需要许多JavaScript代码的页面来说，这无疑会致使阅读器在显现页面时显现明显的延迟，而延迟期间的阅读器窗口中将是一片空白。为了不这个问题，此刻Web利用程序一样都把全部JavaScript援用放在body元素中页面的内容后面。这样一来，在解析包括的JavaScript代码此前，页面的内容将完全显现在阅读器中。而会员也会由于阅读器窗口显示空白页面的时间缩短而感到翻开页面的速度加快了。
总结一句话：在JavaScript代码时要把该部分放在body的后面
看下面的图解：
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> 此前是最好实践，由于关于旧阅读器来说这是独一的优化选中，此法可包管非足本的其他一切元素能够以最快的速度得到加载和解析。
图解：
async (异步足本)
异步足本：async属性也只适用于外部足本文件，并告诉阅读器马上下载文件。
但与defer不一样的是：标志为async的足本并不包管依照指定它们的前后次序施行。
直接图解：
defer 和 async 的异同
同
defer 和 async 在网络读取（足本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
异
在于足本下载完之后何时施行，明显 defer 是最接近我们关于利用足本加载和施行的要求的。defer是马上下载但延迟施行，加载后续文档元素的历程将和足本的加载并行停止（异步），但是足本的施行要在所有元素解析完成之后，DOMContentLoaded 事件触发此前完成。async是马上下载并施行，加载和渲染后续文档元素的历程将和js足本的加载与施行并行停止（异步）。
end：到这里就完毕了，对html还有什么不分明的吗，欢迎计议，这些都是我总结的，大概会有不足之处，也很乐意接受指正，我会连续更新更多有价值的文章。
相关文章：
HTML5 新特性
HTML5新特性dataset的使用办法
相关视频：
HTML5新特性根基视频教程
以上就是HTML5是什么新特性和新标签？分享HTML5 JS新特性的具体内容，更多请关注百分百源码网其它相关文章！
