HTML5介绍

迈不过友情╰ 2022-11-15 05:47 233阅读 0赞

本文主要介绍 HTML5 的相关知识。

# 1 概述 #

HTML5（HyperText Markup Language 5）结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在2008年正式发布，是构建以及呈现互联网内容的一种语言方式，是互联网的核心技术之一。

HTML 产生于1990年，1997年 HTML4 成为互联网标准，并广泛应用于互联网应用的开发。HTML5 在2012年已形成了稳定的版本。

与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容，这些内容在网页中使用，可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。

HTML5 是Web中核心语言 HTML 的规范，用户使用任何手段进行网页浏览时，看到的内容原本都是 HTML 格式的，在浏览器中通过一些技术处理，将其转换成为了可识别的信息。

**说明**：当前，有两个组织都在发布 HTML5 标准（版本），这两个组织分别为“WHATWG”和“W3C”，在实际应用 HTML5 时，如果遇到这两个组织发布的 HTML5 标准不一致时（一般情况下不会遇到），通常都选择 WHATWG 发布的标准。

# 2 新特性 #

HTML5 将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。

## 2.1 智能表单 ##

表单是实现用户与页面后台交互主要组成部分，HTML5 在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了 HTML 可表达的表单形式，再加上新增加的一些表单标签，使得原本需要 JavaScript 来实现的控件，可以直接使用 HTML5 的表单来实现；一些功能（如内容提示、焦点处理、数据验证等）也可以通过 HTML5 的智能表单属性标签来完成。

## 2.2 绘图画布 ##

HTML5 的canvas元素可以实现画布功能，该元素通过自带的 API 结合使用JavaScript脚本语言在网页上绘制图形和处理，拥有实现绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用 JavaScript 可以控制其每一个像素。HTML5 的canvas元素使得浏览器无需 Flash 或 Silverlight 等插件就能直接显示图形或动画图像。

## 2.3 多媒体 ##

HTML5 最大特色之一就是支持音频、视频，通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，无需第三方插件（如Flash）就可以实现音视频的播放功能。HTML5 对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。

## 2.4 地理定位 ##

现今移动网络备受青睐，要求实时定位的应用越来越多，要求也越来越高。HTML5 通过引入 Geolocation 的 API，可以通过 GPS 或网络信息实现用户的定位功能，定位更加准确、灵活。通过 HTML5 进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息。

## 2.5 数据存储 ##

与传统的数据存储方式不同，HTML5 有自己的存储方式，允许在客户端实现较大规模的数据存储。为了满足不同的需求，HTML5 支持 DOM Storage 和 Web SQL Database 两种存储机制。其中，DOM Storage 适用于具有key/value对的基本本地存储；而 Web SQL Database 适用于关系型数据库的存储方式，开发者可以使用 SQL 语法对这些数据进行查询、插入等操作。

## 2.6 多线程 ##

HTML5 利用 Web Worker 将Web应用程序从原来的单线程中解放出来，通过创建一个Web Worker对象就可以实现多线程操作。JavaScript 创建的Web程序处理事务都是在单线程中执行的，响应时间较长，特别是当 JavaScript 过于复杂时，还有可能出现死锁的现象。HTML5 新增加了一个 WebWorkerAPI，用户可以创建多个后台线程，将耗费较长时间的处理交给后台，这样做并不影响用户界面和响应速度，这些处理也不会因用户交互而使运行中断。使用后台线程不能访问页面和窗口对象，但后台线程可以和页面之间进行数据交互。

子线程与子线程之间的数据交互，大致步骤如下：

1.   先创建发送数据的子线程；
2.   执行子线程任务，把要传递的数据发送给主线程；
3.   在主线程接收到子线程传递回的消息时，创建接收数据的子线程，然后把发送数据的子线程中返回的消息传递给接收数据的子线程；
4.   执行接收数据子线程中的代码。

# 3 优缺点 #

## 3.1 优点 ##

新一代网络标准能够让用户通过Web浏览器，从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端，访问相同的程序和基于云端的信息。HTML5 允许程序通过Web浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成相关任务。此外，消费者还可以访问以远程方式存储在“云”中的各种内容，而不受位置和设备的限制。由于 HTML5 技术中存在较为先进的本地存储技术，所以其能做到降低应用程序的响应时间，为用户带来更便捷的体验。

## 3.2 缺点 ##

**（1）开放性带来的困扰**

在之前的网络平台上存在大量的专利产品，想要实现HTML5技术的大量应用，首先就需要将这些专利性的产品变为开放式的产品，由于各种原因，当前面对这一问题还存在许多争议。以视频格式为例，两大阵营对于视频格式的设置存在争议，一大阵营以苹果为代表，另一大阵营则以Opera、火狐、谷歌为代表。WPEG阵营是苹果所属阵营，由于其自身全部使用的是这一种格式，所以坚持认为应当将此格式作为标准，而WebM阵营则认为由于WPEG格式的专利依然没有解除，对于HTML5技术要求的开放性没有达标，所以不同意将其作为标准格式。

# 4 发展趋势 #

随着计算机技术不断发展，能够预测 HTML5 在未来的几年内将会出现一个井喷式的增长。HTML5技术在未来几年内发展将会通过以下几个形式表现：

*  HTML5技术的移动端方向。HTML5技术在未来主要发展的市场还是在移动互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，从而推动整个移动端网页方面的发展；
 *  Web内核标准提升。目前移动端网页内核大多采用Web内核，相信在未来几年内随着移动端应用的逐渐普及，HTML5 在Web内核方面应用将会得到极大的凸显；
 *  提升Web操作体验。随着硬件能力的提升、WebGL标准化的普及以及手机页游的逐渐成熟，手机页游向3D化发展是大势所趋；
 *  网络营销游戏化发展。通过一些游戏化、场景化以及跨屏互动等环节，不仅增加用户游戏体验，还能够满足广告主大部分的营销需求，在推销产品的过程中，让用户体验游戏的乐趣；
 *  移动视频、在线直播。HTML5 将会改变视频数据的传输方式，让视频播放更加流畅，与此同时，视频还能够与网页相结合，让用户看视频如看图片一样轻松。