html5具备哪些功能

这篇文章主要介绍“html5具备哪些功能”，在日常操作中，相信很多人在html5具备哪些功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5具备哪些功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

html5具备的功能：1、新的图形库，可以让网站内容变得更加丰富；2、更方便的多媒体内容；3、地理定位；4、拖放功能；5、桌面通知；6、离线和存储；7、性能和集成；8、设备访问；9、样式设计等。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html5具备的功能

1、新的图形库：

HTML5引入了Canvas和WebGL函数库，可以让网站内容变得更加丰富。特别是WebGL函数库，几乎可以改变这一领域的整个游戏规则，只要看看这个著名的雷神之锤II游戏场景的画面，这可完全是用HTML5来开发的。对我来说，这代表了新的时代，让人可以想象未来的游戏是怎么玩的。

2、更方便的多媒体内容：

如果曾经设计过需要包含许多影音内容的网站，你就会了解那种笨重的感觉。常常需要用一堆Flash加上<object>和<embed>标记才能获得想要的效果。但是以后再也不用这么麻烦了，HTML5引入了容易使用的<video>和<audio>标记，所以要在网站上加入多媒体内容变得比以往更加容易。也正因为有这样的功能，所以很多在线视频网站已经开始转移到HTML5了。

3、地理定位：

人们越来越少通过台式机甚至笔记本电脑来使用网络了。在今天，有很多人通过手持可移动设备浏览网络，例如智能手机和平板电脑。目前这种移动化的网络访问特征，再加上HTML5中新的地理定位功能，结合在一起开创了无数新的可能性。当用户访问你的网站时，可以知道他们的精确位置，让你能够提供个性化内容，以配合用户所在的环境。例如，当访问一个与郊游有关的网站时，如果发现你处于闹市区，就可以提供行程规划相关的信息；但如果你是在郊区位置访问该网站，则默认会显示互动式地图功能。

4、拖放功能：

这是个细微的变动，但却非常重要。拖放功能可以让你将浏览器的内容直接拖拉到电脑上，也可以将内容从电脑拖拉到浏览器上。真的是很划时代的改变，不是吗？来看看这个展示，想想看，如果社交网站有这样的功能，当你度假回来后，就可以很容易选好你的假期照片，然后拖拉到浏览器，就可以马上和网上的朋友分享。这才
是我想要的网站互动方式！

5、桌面通知：

桌面通知是出现在浏览器之外的小弹窗，即使在用户没有浏览网站时，也可以和网站进行互动。目前这个功能只有Google Chrome浏览器可以使用，你可以在这里看到展示。这些通知很适合用来做电子邮件通知、社交网络更新、微博信息，还有其他服务中使用。再配合拖放功能后，就真的弱化了在线和本地应用程序之间的区别。

6、离线和存储

离线资源：应用程序缓存。 火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。

在线和离线事件。 Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。

WHATWG 客户端会话和持久化存储 (又名 DOM 存储)。 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。

IndexedDB。 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

自 web 应用程序中使用文件。 对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的  <input>  元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。

7、性能和集成

Web Workers。 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest Level 2。 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。

即时编译的 JavaScript 引擎。 新一代的 JavaScript 引擎功能更强大，性能更杰出。

History API。 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。

conentEditable 属性：把你的网站改变成 wiki ! HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。

拖放。 HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

HTML 中的焦点管理。 支持新的 HTML5 activeElement 和 hasFocus 属性。

基于 Web 的协议处理程序。 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

requestAnimationFrame。 允许控制动画渲染以获得更优性能。

全屏 API。 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。

指针锁定 API。 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

在线和离线事件。 为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

8、设备访问

使用 Camera API。 允许使用和操作计算机的摄像头，并从中存取照片。

触控事件。 对用户按下触控屏的事件做出反应的处理程序。

使用地理位置定位。 让浏览器使用地理位置服务定位用户的位置。

检测设备方向。 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。

指针锁定 API。 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

9、样式设计

新的背景样式特性。 现在可以使用 box-shadow 给逻辑框设置一个阴影，而且还可以设置 多背景。

更精美的边框。 现在不仅可以使用图像来格式化边框，使用 border-image 和它关联的普通属性，而且可以通过 border-radius 属性来支持圆角边框。

为你的样式设置动画。 使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。

排版方面的改进。 作者拥有更高的控制已达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation， 而且也可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则，现在我们可以下载并应用自定义的字体了。.

新的展示性布局。 为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。

到此，关于“html5具备哪些功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！