HTML5 简介
HTML5 的设计目的可简单概括为是为了在移动设备上支持多媒体。HTML5 并不复杂，简单易学，对初学者并没有什么难度。
什么是 HTML5?
HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改和标准化工作。HTML5 在 2012 年已形成了稳定的版本
目前，主流现代浏览器已经具备了 HTML5 支持。
HTML5 的起源
HTML 产生于 1990 年，1997 年 HTML4 成为互联网标准，并广泛应用于互联网应用的开发。
HTML5 是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 WEB 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML，于是HTML5 产生了。
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
HTML5 <!DOCTYPE>
声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>
最基本的HTML5文档样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
HTML5 新特性
HTML5 将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。
智能表单
HTML5 在表单的设计上功能更加强大。input 类型和属性的多样性大大地增强了 HTML 可表达的表单形式，再加上新增加的一些表单标签，使得原本需要 JavaScript 来实现的控件，可以直接使用 HTML5 的表单来实现。一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5的智能表单属性标签来完成。
绘图画布
HTML5 的 canvas 元素可以实现画布功能，该元素通过自带的 API 结合使用 JavaScript 脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用 JavaScript 可以控制其每一个像素。HTML5 的 canvas 元素使得浏览器无需 Flash 或 Silverlight 等插件就能直接显示图形或动画图像。
多媒体
HTML5 最大特色之一就是支持音频视频，在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在 Web 网页中嵌入这两个标签，而无需第三方插件（如 Flash）就可以实现音视频的播放功能。HTML5 对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
地理定位
现今移动网络备受青睐，用户对实时定位的应用越来，要求也越来越高。HTML5 通过引入 Geolocation 的 API 可以通过 GPS 或网络信息实现用户的定位功能，定位更加准确、灵活。通过 HTML5 进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息。
数据存储
HTML5 较之传统的数据存储有自已的存储方式，允许在客户端实现较大规模的数据存储。为了满足不同的需求，HTML5 支持 DOM Storage 和 Web SQL Database 两种存储机制。其中，DOM Storage 适用于具有 key/value 对的基本本地存储；而 WebSQLDatabase 是适用于关系型数据库的存储方式，开发者可以使用 SQL 语法对这些数据进行查询、插入等操作。
多线程
HTML5 利用 Web Worker 将 Web 应用程序从原来的单线程业界中解放出来，通过创建一个 Web Worker 对象就可以实现多线程操作。JavaScript 创建的 Web 程序处理事务都是在单线程中执行，响应时间较长，而当 JavaScript 过于复杂时，还有可能出现死锁的局面。
HTML5 新增加了一个 WebWorkerAPI，用户可以创建多个在后台的线程，将耗费较长时间的处理交给后台面不影响用户界面和响应速度，这些处理不会因用户交互而运行中断。使用后台线程不能访问页面和窗口对象，但后台线程可以和页面之间进行数据交互。
子线程与子线程之间的数据交互，大致步骤如下：
① 先创建发送数据的子线程；
② 执行子线程任务，把要传递的数据发送给主线程；
③ 在主线程接受到子线程传递回的消息时创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程；
④ 执行接收数据子线程中的代码。
HTML5新元素
自 1999 年以后 HTML 4.01 已经改变了很多，今天，在 HTML 4.01 中的几个已经被废弃，这些元素在 HTML5 中已经被删除或重新定义。
为了更好处理今天的互联网应用，HTML5 添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个 api 拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等。
canvas
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
多媒体
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容，比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
表单
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出，比如脚本的输出。 |
语义和结构
HTML5提供了新的元素来创建更好的页面结构：
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义运行中的进度（进程）。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
已移除元素
以下的 HTML 4.01 元素在 HTML5 中已经被删除：
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
HTML5 优缺点
优点
新一代网络标准能够让程序通过 Web 浏览器被访问。消费者从而能够从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端访问相同的程序和基于云端的信息。
HTML5 允许程序通过 Web 浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成任务。
此外，消费者还可以访问以远程方式存储在“云”中的各种内容，不受位置和设备的限制。 由于 HTML5 技术中存在较为先进的本地存储技术，所以其能做到降低应用程序的响应时间为用户带来更便捷的体验。
缺点
之前网络平台上存在大量的专利产品，想要实现 HTML5 技术的大量应用首先就需要将这些专利性的产品变为开放式的产品，由于各种原因，当前面对这一问题还存在许多争议。以视频格式为例，两大阵营对于视频格式的设置存在争议，一大阵营以苹果为代表，另一大阵营则以 Opera、火狐、谷歌为代表。
WPEG 阵营是苹果所属阵营，由于其自身全部使用的是这一种格式，所以坚持认为应当将此格式作为标准，而WebM 阵营则认为由于 WPEG 格式的专利依然没有解除，对于 HTML5 技术要求的开放性没有达标，所以不同意将其作为标准格式。
HTML5 中提出了一些之前 HTML 技术中不具有的新技术，但是有许多主流浏览器在长时间的发展过程中已经完成了此种技术的开发，在自身浏览器中实现了此种功能，就这一情况来说 HTML5 的发展速度方面存在一定的问题。同时由于 HTML5 的不成熟，当前关于 HTML5 的相关技术标准还没有完全确定，所以在短时间想要将其投入大规模应用还比较困难。
HTML5 发展趋势
随着计算机技术不断发展，可以看到 HTML5 在未来的几年内的发展将会是一个井喷式的增长。HTML5 技术在未来几年内发展将会以以下几个形式表现：
1）HTML5 技术的移动端方向。
HTML5 技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，整体推动整个移动端网页方面的发展；
2）Web 内核标准提升。
目前移动端网页内核大多采用 Web 内核，相信在未来几年内随着智能端逐渐普及，HTML5 在 Web 内核方面应用将会得到极大的凸显；
3）提升 Web 操作体验。
随着硬件能力的提升、WebGL 标准化的普及以及手机页游的逐渐成熟，手机页游向3D化发展是大势所趋；
4）网络营销游戏化发展。
通过一些游戏化、场景化以及跨屏互动等环节，不仅增加用户游戏体验，还能够满足广告主大部分的营销需求，在推销产品的过程中，让用户体验游戏的乐趣；
5）移动视频、在线直播。
HTML5 将会改变视频数据的传输方式，让视频播放更加流畅，与此同时，视频还能够与网页相结合，让用户看视频如看图片一样轻松。
HTML5 标签变化
在下面表格中 4：指在HTML 4.01 中定义了该元素， 5：指在HTML 5 中定义了该元素。
| 标签 | 描述 | ||
|---|---|---|---|
| <!–…–> | 定义注释 | 4 | 5 |
| [<!DOCTYPE>](https://ytso.com/course/tag-doctype.html) | 定义文档类型 | 4 | 5 |
| <a> | 定义超链接 | 4 | 5 |
| <abbr> | 定义缩写 | 4 | 5 |
| <acronym> | HTML 5 中不支持 | 4 | |
| <address> | 定义地址元素 | 4 | 5 |
| <applet> | 定义 applet（HTML 5 中不支持） | 4 | |
| <area> | 定义图像映射中的区域 | 4 | 5 |
| <article> | 定义 article | 5 | |
| <aside> | 定义页面内容之外的内容 | 5 | |
| <audio> | 定义声音内容 | 5 | |
| <b> | 定义粗体文本 | 4 | 5 |
| <base> | 定义页面中所有链接的基准URL | 4 | 5 |
| <basefont> | HTML 5 中不支持，请使用CSS 代替 | 4 | |
| <bdo> | 定义文本显示的方向 | 4 | 5 |
| <big> | 定义大号文本（HTML 5 中不支持） | 4 | |
| <blockquote> | 定义长的引用 | 4 | 5 |
| <body> | 定义 body 元素 | 4 | 5 |
| <br> | 插入换行符 | 4 | 5 |
| <button> | 定义按钮 | 4 | 5 |
| <canvas> | 定义图形 | 5 | |
| <caption> | 定义表格标题 | 4 | 5 |
| <center> | 定义居中的文本（HTML 5 中不支持） | 4 | |
| <cite> | 定义引用 | 4 | 5 |
| <code> | 定义计算机代码文本 | 4 | 5 |
| <col> | 定义表格列的属性 | 4 | 5 |
| <colgroup> | 定义表格列的分组 | 4 | 5 |
| <command> | 定义命令按钮 | 5 | |
| <datalist> | 定义下拉列表 | 5 | |
| <dd> | 定义定义的描述 | 4 | 5 |
| <del> | 定义删除文本 | 4 | 5 |
| <details> | 定义元素的细节 | 5 | |
| <dfn> | 定义定义项目 | 4 | 5 |
| <dir> | 定义目录列表（HTML 5 中不支持） | 4 | |
| <div> | 定义文档中的一个部分 | 4 | 5 |
| <dl> | 定义定义列表 | 4 | 5 |
| <dt> | 定义定义的项目 | 4 | 5 |
| <em> | 定义强调文本 | 4 | 5 |
| <embed> | 定义外部交互内容或插件 | 5 | |
| <fieldset> | 定义 fieldset | 4 | 5 |
| <figcaption> | 定义 figure 元素的标题 | 5 | |
| <figure> | 定义媒介内容的分组，以及它们的标题 | 5 | |
| <font> | HTML 5 中不支持 | 4 | |
| <footer> | 定义 section 或 page 的页脚 | 5 | |
| <form> | 定义表单 | 4 | 5 |
| <frame> | 定义子窗口（框架）（HTML 5 中不支持） | 4 | |
| <frameset> | 定义框架的集（HTML 5 中不支持） | 4 | |
| <h1> to <h6> | 定义标题1 到标题6 | 4 | 5 |
| <head> | 定义关于文档的信息 | 4 | 5 |
| <header> | 定义 section 或 page 的页眉 | 5 | |
| <hgroup> | 定义有关文档中的 section 的信息 | 4 | 5 |
| <html> | 定义 html 文档 | 4 | 5 |
| <i> | 定义斜体文本 | 4 | 5 |
| <iframe> | 定义行内的子窗口（框架） | 4 | 5 |
| <img> | 定义图像 | 4 | 5 |
| <input> | 定义输入域 | 4 | 5 |
| <ins> | 定义插入文本 | 4 | 5 |
| <keygen> | 定义生成密钥 | 5 | |
| <isindex> | 定义单行的输入域（HTML 5 中不支持） | 4 | |
| <kbd> | 定义键盘文本 | 4 | 5 |
| <label> | 定义表单控件的标注 | 4 | 5 |
| <legend> | 定义 fieldset 中的标题 | 4 | 5 |
| <li> | 定义列表的项目 | 4 | 5 |
| <link> | 定义资源引用 | 4 | 5 |
| <map> | 定义图像映射 | 4 | 5 |
| <mark> | 定义有记号的文本 | 4 | 5 |
| <menu> | 定义菜单列表 | 4 | 5 |
| <meta> | 定义元信息 | 4 | 5 |
| <meter> | 定义预定义范围内的度量 | 5 | |
| <nav> | 定义导航链接 | 5 | |
| <noframes> | 定义 noframe 部分（HTML 5 中不支持） | 4 | |
| <noscript> | 定义 noscript 部分 | 4 | 5 |
| <object> | 定义嵌入对象 | 4 | 5 |
| <ol> | 定义有序列表 | 4 | 5 |
| <optgroup> | 定义选项组 | 4 | 5 |
| <option> | 定义下拉列表中的选项 | 4 | 5 |
| <output> | 定义输出的一些类型 | 5 | |
| <p> | 定义段落 | 4 | 5 |
| <param> | 为对象定义参数 | 4 | 5 |
| <pre> | 定义预格式化文本 | 4 | 5 |
| <progress> | 定义任何类型的任务的进度 | 5 | |
| <q> | 定义短的引用 | 4 | 5 |
| <rp> | 定义若浏览器不支持 ruby 元素显示的内容 | 5 | |
| <rt> | 定义 ruby 注释的解释 | 5 | |
| <ruby> | 定义 ruby 注释 | 5 | |
| <s> | 定义加删除线的文本（HTML 5 中不支持） | 4 | |
| <samp> | 定义样本计算机代码 | 4 | 5 |
| <script> | 定义脚本 | 4 | 5 |
| <section> | 定义 section | 5 | |
| <select> | 定义可选列表 | 4 | 5 |
| <small> | 定义小号文本 | 4 | 5 |
| <source> | 定义媒介源 | 4 | 5 |
| <span> | 定义文档中的 section | 4 | 5 |
| <strike> | 定义加删除线的文本（HTML 5 中不支持） | 4 | |
| <strong> | 定义强调文本 | 4 | 5 |
| <style> | 定义样式定义 | 4 | 5 |
| <sub> | 定义下标文本 | 4 | 5 |
| <summary> | 定义 details 元素的标题 | 5 | |
| <sup> | 定义上标文本 | 4 | 5 |
| <table> | 定义表格 | 4 | 5 |
| <tbody> | 定义表格的主体 | 4 | 5 |
| <td> | 定义表格单元 | 4 | 5 |
| <textarea> | 定义 textarea | 4 | 5 |
| <tfoot> | 定义表格的脚注 | 4 | 5 |
| <th> | 定义表头 | 4 | 5 |
| <thead> | 定义表头 | 4 | 5 |
| <time> | 定义日期/时间 | 5 | |
| <title> | 定义文档的标题 | 4 | 5 |
| <tr> | 定义表格行 | 4 | 5 |
| <tt> | 定义打字机文本 | 4 | 5 |
| <u> | 定义下划线文本（HTML 5 中不支持） | 4 | |
| <ul> | 定义无序列表 | 4 | 5 |
| <var> | 定义变量 | 4 | 5 |
| <video> | 定义视频 | 5 | |
| <xmp> | 定义预格式文本（HTML 5 中不支持） | 4 |
HTML5 标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
HTML5 标签中的新属性有：contenteditable， contextmenu， draggable， irrelevant， ref，registrationmark， template。
HTML5 中不再支持的属性：accesskey。
事件属性
HTML5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML5 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。
HTML5 中的新事件属性：onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。
HTML5不再支持的 HTML 4.01 属性：onreset。
异常处理
HTML5（text/html）浏览器将在错误语法的处理上更加灵活。HTML5 在设计时保证旧的浏览器能够安全的忽略掉新的 HTML5 代码。与HTML 4.01相比，HTML5 给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
HTML5 浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
载入后，初始化新标签的CSS：
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
HTML5 参考手册
在本站中你可以找到关于HTML5 的标签及属性描述，详细请点击 HTML5参考手册。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59367.html