[聚合文章] HTML学习笔记：HTML5初探

什么是HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

与HTML 4.01和XHTML 1.x的差异

• 语义 ：能够让你更恰当地描述你的内容是什么。
• 连通性 ：能够让你和服务器之间通过创新的新技术方法进行通信。
• 离线&存储 ：能够让网页在客户端本地存储数据以及更高效地离线运行。
• 多媒体 ：使 video 和 audio 成为了在所有 Web 中的一等公民。
• 2D/3D 绘图 ：提供了一个更加分化范围的呈现选择。
• 性能&集成 ：提供了非常显著的性能优化和更有效的计算机硬件使用。
• 设备访问 ：能够处理各种输入和输出设备。
• 样式设计 : 新的CSS3样式带来更强大的功能

语义

• 新增提纲元素：<section>, <article>, <nav>, <header>, <footer>, <aside> 和 <hgroup>
• 新增其他元素：<mark>，<figure>，<figcaption>，<data>，<time>，<output>，<progress>，或者 <meter>和<main>
• 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。
• 对 web 表单的改进：强制验证 API，一些新的属性，<input> 属性 type 的一些新值。
• 允许使用 MathML 直接嵌入数学公式。

通信

• Web Sockets 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
• Server-sent events 允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
• WebRTC 即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

离线&存储

• 部分浏览器根据 WHATWG Web Applications 1.0 规范  实现了 Online/Offline 事件 。这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
• DOM 存储 ，客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。
• IndexedDB 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。
• 使用web应用程序中的文件 ，对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用typefile的<input>元素的新的 multiple 属性针对多文件选择的支持。还有 FileReader 。

多媒体

• 使用 HTML5 音视频，<audio> 和 <video> 元素嵌入并支持新的多媒体内容的操作。
• Track 和 WebVTT，<track>元素支持字幕和章节。WebVTT一个文本轨道格式。

2D/3D绘图

• <canvas> 元素可被用来通过脚本（通常是JavaScript）绘制图形。
• WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5<canvas>元素中的 API 给 Web 带来了 3D 图像功能。
• SVG 一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。

性能 & 集成

• Web Workers 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
• XMLHttpRequest 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。
• 即时编译的 JavaScript 引擎
• History API ，允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
• contentEditable 属性：把你的网站改变成 wiki !
• HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
• HTML 中的焦点管理 支持新的 HTML5 activeElement 和hasFocus 属性。
• 基于 Web 的协议处理程序 可以使用registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
• requestAnimationFrame 允许控制动画渲染以获得更优性能。
• 全屏 API 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
• <iframe>的改进，使用 sandbox，seamless，和 srcdoc 属性，作者们现在可以精确控制 <iframe>元素的安全级别以及期望的渲染。
• 不再基于 SGML 进行解析，解析器兼容先前的版本。

设备访问

• 使用 Camera API ，允许使用和操作计算机的摄像头，并从中存取照片。
• 触控事件 ，对用户按下触控屏的事件做出反应的处理程序。
• 使用地理位置定位 让浏览器使用地理位置服务定位用户的位置。
• 检测设备方向 让用户在运行浏览器的设备变更方向时能够得到信息。
• 指针锁定 API 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

样式

• 新的背景样式特性，现在可以使用 box-shadow 给逻辑框设置一个阴影，而且还可以设置 多背景 。
• 现在不仅可以使用图像来格式化边框，使用 border-image  和它关联的普通属性，而且可以通过  border-radius  属性来支持圆角边框。
• 使用 CSS Transitions  以在不同的状态间设置动画，或者使用  CSS Animations  在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。
• 更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation ，还可以给它设置一个 阴影 或者更精细地控制它的 decorations 。
• 新的 @font-face 规则，现在我们可以下载并应用自定义的字体。
• 新的展示性布局已经有两种新的布局被添加了进来： CSS 多栏布局 , 以及 CSS 灵活方框布局 。

普及率

2017年12月浏览器市场份额数据：

排序	浏览器	浏览量占比
1	Chrome	46.49%
2	IE 9.0	8.80%
3	IE 8.0	6.56%
4	QQ	6.24%
5	2345	5.34%
6	搜狗高速	4.59%
7	Firefox	2.60%
8	IE 7.0	2.38%
9	猎豹	1.67%
10	其他	15.34%

数据来源： http://tongji.baidu.com/data/browser

• QQ浏览器：基于Chromium内核开发
• 2345浏览器：基于Chromium内核开发
• 搜狗高速浏览器：基于Chromium内核开发
• 猎豹浏览器：基于Chromium内核开发

其中可以看到基于Chromium内核的浏览器占比高达64.33%，IE所占的份额将越来越少，这对于W3C的HTML5的推广将是一个非常好的消息。

参考链接：

• https://zh.wikipedia.org/wiki/HTML5
• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5