HTML5的声明为：<!DOCTYPE html>
它不用再像之前的版本一样在声明中引用DTD。DTD(document type definition)定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD规定了标记语言的规则，使浏览器能正确地呈现内容。而HTML5不基于SGML，所以不需要引用DTD。
文档结构元素
<article>: 定义可以独立于内容其余部分的完整独立内容块。
<header>: 页面顶部。
<nav>: 导航栏(边导航,页面导,底部导)标签。
<hgroup>: 定义多个标题时。
<section>: 内容分块.可设置cite属性。
<aside>: 侧边栏，定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
<figure>: 代表一个和文档有关的图例。
<figcaption>: 代表一个图例的说明（标题）。
<footer>: 页面底部。
<dialog>:定义对话框。
嵌入元素
<video>代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。属性有：
src
autoplay（控制自动播放）
loop（播放完后是否重新播放）
controls（显示用户界面）
width
height
<audio>代表一段声音 ，或音频流。 标签内的文字会在标签不被支持时呈现。属性有：
src
autoplay
loop（播放次数，为-1时循环播放）
controls
volume(音量)
<source>为 <video>或 <audio>这类媒体元素指定媒体源。属性有src\type（指定资源的MIME类型）。
<track>为 <video>或 <audio>这类媒体元素指定文本轨道（字幕） 。属性有：
kind（数据类型）
src
srclang（track文本数据的语言）
label 当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。
注意：一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。
<canvas>代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
<embed>代表一个嵌入的外部资源，如应用程序或交互内容。属性有：
width
height
src
type 用于选择插件实例化的 MIME 类型。
表单元素
<meter>代表滑动条。显示实时状态。属性有:
value 当前数值，如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
min 值域的最小边界值，默认为0
max 值域的最大边界值，默认为1
low 定义了低值区间的上限值，当数值处于low-min或high-max时就会呈现不同的样式。
high 定义了高值区间的下限值。
optimum 最优值
<output>代表计算值 。
for 其它影响计算结果的标签的ID，可以多个。
form 与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。
name
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" />+
<input type="number" name="a" value="10" />=
<output name="result"></output>
</form>
1
2
3
4
5
<progress>代表进度条，表示任务过程，属性有max（任务总量）\value。
<datalist>为Input标记定义一个下拉列表，配合option标签。
其他
<details>创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
<summary>是details 元素的子元素，表示其综述或标题 。
<mark>代表一段需要被高亮的引用文字。
<ruby>表示需要被ruby 注释 标记的文本，如中文汉字和它的拼音。
<rt>表示ruby 注释 ，如中文拼音。
<rp>在ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
1
顺便一提，html5删除了的元素：
纯表现的：basefont\big\center\font\s\strike\tt\u
对可用性有负面影响的：frame\frameset\noframes
产生混淆的：acronym\applet\isindex\dir
同时HTML5也对某些元素进行了重定义，改变了它们的语言内容但表现不变。如b标签、i标签，仍然表示为粗体、斜体，但代表了一段需要被关注的文字、一段不同性质的文字，如技术术语、外文短语等。
HTML5属性变化
新增类型
email \ url \ tel \ number
Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local
针对PC端：range(水平杆，两边为min和max) \ search（有内容时右边出现×）\ color（颜色选择框）
表单属性
autocomplete属性：自动完成功能，适用于标签，以及以下类型的input标签：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color
<form autocomplete="on">//on为打开，Off为关闭
</form>
1
2
autofocus属性：域自动地获得焦点，适用于所有的标签的类型
<input autofocus="autofocus"/>
1
multiple属性：规定输入域中可选择多个值，适用于email \ file类型的标签
<input type="file" multiple="multiple" />
1
placeholder属性：提供一种提示，描述输入域所期待的值，适用于text \ search \ url \ tel \ email \ password 类型的标签
<input type="text" placeholder="please input your name!"/>
1
required属性：规定必须在提交之前填写输入域，且必须按照相应域的格式，如，email域必须要有@、邮件域。适用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 类型的标签
<input type="email" requried="required" />
1
链接属性
sizes
<link rel="icon" href="icon.gif" type="image/gif" sizes="16*16" >
//网页头部标题的logo，可根据不同分辨率引用不同的sizes
//type为该图标的类型，说明该图标格式为gif
1
2
3
target
<base href="......" target="_blank" >
1
base标签写在head标签内。target属性控制整个页面所有超链接的默认打开方式（本来是_self），href指定页面中所有相对链接的基准 URL；
超链接的属性
media=“handheld”（表示对设备进行优化，handheld对“手持”设备进行支持，tv对”电视“设备进行支持）；
hreflang=“zh”（设置语言，zh表示是简体中文）
rel=“external”（设置超链接的引用，external表示其为外部链接）
其他属性
<script>的属性
defer：加载完脚本后并不执行（延迟执行），而是等整个页面加载完之后再执行，只有ie兼容
async：对脚本进行异步加载，加载完脚本后立刻执行，而不用等整个页面都加载完才能执行。
如果 async=“async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行
如果既不使用 async 也不使用defer：在浏览器继续解析页面之前，立即读取并执行脚本
<ol>的属性
start：设置序号的起始值
reversed：倒叙排列 reversed=“reversed”
<html>的属性：manifest
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
1
2
3
4
通过在页面中设置manifest属性或在manifest文件中加入页面，可以将此页面缓存，这样我们就可以离线访问，且获得更快的速度，因为已缓存资源加载得更快。还可以减少服务器负载。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，需要更新 manifest 文件。
style的属性scoped：内嵌CSS,可以写在任何位置，而不止是head。不过这样会违反我们低耦合的原则。
<style scoped>
...
<style>
1. 新的Doctype尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用<figure>和<figcaption>来语义化地表示带标题的图片
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定义的<small>
<small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加 括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”)
document.createElement(”footer”)
document.createElement(”header”)
document.createElement(”hgroup”)
document.createElement(”nav”)
document.createElement(”menu”)
13. hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1>Recall Fan Page </h1>
<h2>Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text” name=”someInput” required>
或者
<input type=”text” name=”someInput” required=”required”>
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio>
17. Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/oggcodecs=’vorbis, theora’” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4’codecs=’avc1.42E01E, mp4a.40.2′” />
<p>Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a></p>
</video>
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
19. 显示视频控制
<video preload controls>
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action=”" method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username” placeholder=”4 <>10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3>Search Results </h3>
<p>They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
23. 什么时候用<div>
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
<div id=”myDiv” data-custom-attr=”My Value”>Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response)
color: black
position: absolute
left: 0
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”>Don’t Touch Me </h1>
27. Output元素
<output>元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min)padding-right: 5px
}
input[type=range]:after { content: attr(max)padding-left: 5px}
HTML代表超文本标记语言，用于使用标记语言设计网页。HTML是超文本和标记语言的组合，超文本定义了网页之间的链接；标记语言用于定义标记内的文本文档，该文档定义网页的结构。此语言用于注释（在计算机注释中）文本，以便机器可以理解它并相应地操作文本。
大多数标记（例如HTML）语言都是人类可读的。该语言使用标签来定义必须对文本进行哪些操作。它用于在网页上构造和呈现内容。
HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。
HTML5和HTML的区别
首先，HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步提升。
接着，我们来看一下两者的声明文件类型：
HTML：
HTML5
由上面可以看到，在文档声明上，HTML的声明代码很长很复杂，而HTML5的声明更为简单，方便记忆，所以HTML5要比HTML更有利于程序员的快速阅读和开发。
此外，两者结构语义也有所不同。HTML没有结构语义化的标签，通常以<divid="header"></div>来命名，HTML5则增加了很多语义化的标签，比如：<header>、<nav>、<article>、<aside>、<footer>等，使代码结构清晰，更加具有可读性。
HTML5新增了强大的绘图功能，通过绘画功能，加上JS可以实现动画以及图片。而HTML4.0却不行。在HTML5中，Canvas和SVG可以进行绘图，Canvas相当于一个画布，可以通过JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。SVG是可伸缩矢量图形，用于定义网络的基于矢量的图形，SVG 严格遵从 XML 语法，其图像文件可读并且易于修改和编辑，可以被搜索、索引、脚本化或者压缩。可以在任何分辨率下被高质量地打印。
除了上述几点，强大的HTML5还新增了视频标签。这个功能是HTML4.0所不具备的，用HTML4.0插入视频需要很长一段代码，但是用HTML5就只需要video标签即可。
自己是从事了五年的前端工程师，自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，这是我的前端开发qun，【六零三】【九八五】【九九三】，对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我，最后可以点一波关注哟！
总结：
1、文档声明区别
HTML文档的类型声明为：
HTML5文档的类型声明为：
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
2、结构语义区别
html：没有体现结构语义化的标签，如：<div id="nav"></div>
html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...
相对于HTML，HTML5中新增和修改了一些元素。
3、绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。
4、音频和视频的支持
HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用<audio>和<video>标签来支持音频和视频控制。
5、语法的处理
HTML无法处理不准确的语法；HTML5能够处理不准确的语法。
