网站地图
hnsjyk999.com
三九百科 包罗万象
html5 发布于:

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。

在前五年(1990-1995),HTML经历了多次修订并经历了许多扩展,主要是在欧洲核子研究中心首先托管,然后是IETF。

随着W3C的创建,HTML的发展再次改变了场地。 1995年第一次尝试在HTML 3.0中扩展HTML,然后在1997年完成了一种称为HTML 3.2的更实用的方法。同一年晚些时候,HTML 4.01很快就出现了。

第二年,W3C成员决定停止发展HTML,而是开始研究基于XML的等价物,称为XHTML。这项工作始于XML中的HTML 4.01重新编写,称为XHTML 1.0,除了新的序列化之外没有添加任何新功能,并且在2000年完成。在XHTML 1.0之后,W3C的重点转向使其他工作组更容易在XHTML模块化的旗帜下扩展XHTML。与此同时,W3C还开发了一种与早期HTML和XHTML语言不兼容的新语言,称之为XHTML 2.0。

大约在1998年停止HTML演变的时候,浏览器供应商开发的HTML部分API被命名并以DOM Level 1(1998年)和DOM Level 2 Core和DOM Level 2 HTML(从2000年开始)发布。最终于2003年)。这些努力随后逐渐消失,2004年发布了一些DOM Level 3规范,但工作组在所有3级草案完成之前就已关闭。

2003年,作为下一代Web表单定位的技术XForms的出版引发了对HTML本身发展的新兴趣,而不是寻找它的替代品。这种兴趣来自于认识到XML作为Web技术的部署仅限于全新技术(如RSS和后来的Atom),而不是替代现有的已部署技术(如HTML)。

一个概念证明,可以扩展HTML 4.01的表单,提供XForms 1.0引入的许多功能,而不需要浏览器实现与现有HTML网页不兼容的渲染引擎,这是第一个结果。重新兴趣。在早期阶段,虽然草案已经公开发布,并且已经从所有来源征求意见,但该规范仅受Opera Software的版权保护。

在2004年的W3C研讨会上测试了HTML应该重新开放的想法,其中提出了HTML工作的一些原则(如下所述),以及上述早期草案提案,仅涉及与表单相关的功能,由Mozilla和Opera联合推出的W3C。该提案被驳回,理由是该提案与之前选择的网络发展方向相冲突; W3C的工作人员和成员投票决定继续开发基于XML的替代品。

此后不久,Apple,Mozilla和Opera联合宣布他们打算在一个名为WHATWG的新场地的保护下继续努力。创建了一个公共邮件列表,草案已移至WHATWG站点。随后将版权修改为由所有三个供应商共同拥有,并允许重复使用该规范。

WHATWG基于几个核心原则,特别是技术需要向后兼容,规范和实现需要匹配,即使这意味着更改规范而不是实现,并且规范需要足够详细,实现可以实现完整的互操作性,无需相互逆向工程。后一要求特别要求HTML规范的范围包括先前在三个单独的文档中指定的内容:HTML 4.01,XHTML 1.1和DOM Level 2 HTML。它还意味着包含比以前被认为是标准更多的细节。

2006年,W3C表示有兴趣参与HTML 5.0的开发,并于2007年组建了一个工作组,专门与WHATWG合作开发HTML规范。 Apple,Mozilla和Opera允许W3C在W3C版权下发布规范,同时保留WHATWG网站上限制较少的许可版本。多年来,两个小组在同一编辑下共同工作:Ian Hickson。在2011年,小组得出的结论是,他们有不同的目标:W3C希望为HTML 5.0推荐的功能划清界限,而WHATWG希望继续致力于HTML的生活标准,不断维护规范和添加新功能。 2012年中期,W3C推出了一个新的编辑团队,负责创建HTML 5.0推荐标准,并为下一个HTML版本准备工作草案。

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,用户可以创建多个在后台的线程,将耗费较长时间的处理交给后台面不影响用户界面和响应速度,这些处理不会因用户交互而运行中断。使用后台线程不能访问页面和窗口对象,但后台线程可以和页面之间进行数据交互。子线程与子线程之间的数据交互,大致步骤如下:①先创建发送数据的子线程;②执行子线程任务,把要传递的数据发送给主线程;③在主线程接受到子线程传递回的消息时创建接收数据的子线程,然后把发送数据的子线程中返回的消息传递给接收数据的子线程;④执行接收数据子线程中的代码。

自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。

标签

描述

<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>

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

(1)开放性带来的困扰

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

(2)发展的速度有待提升

在HTML5中提出了一些从前HTML技术中不具有的新技术,但是有许多主流浏览器在长时间的发展过程中已经完成了此种技术的开发,在自身浏览器中实现了此种功能,就这一情况来说HTML5的发展速度方面存在一定的问题。同时由于HTML5的不成熟,当前关于HTML5的相关技术标准还没有完全确定,所以在短时间想要将其投入大规模应用还比较困难。

(3)技术手段的不完善

由于HTML5技术中存在较为先进的本地存储技术,所以其能做到降低应用程序的相应时间为用户带来更便捷的体验。

以下将对HTML5的技术要点进行介绍:

<video>标记

定义和用法:

</video> 标签定义视频,比如电影片段或其他视频流。

<audio> 标记

定义和用法

</audio> 标签定义声音,比如音乐或其他音频流。

实例:

一段简单的HTML5 音频

<audio src="">

您的浏览器不支持 audio 标签。

</audio>

<canvas> 标记

定义和用法:

<canvas> 标签定义图形,比如图表和其他图像。

HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例:

通过 canvas 元素来显示一个红色的矩形:

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

除了原先的DOM接口,HTML5增加了更多API,如:

1. 用于即时2D绘图的Canvas标签

2. 定时媒体回放

3. 离线数据库存储

4.文档编辑

5. 拖拽控制

6. 浏览历史管理

新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput

元素的新属性:日期和时间,email, url。

新的通用属性:ping, charset, async

全域属性:id, tabindex, repeat。

移除元素:center, font, strike。

注:在下面表格中4:指在HTML 4.01 中定义了该元素 5:指在HTML 5 中定义了该元素

标签

描述

<!--...-->

定义注释

4

5

<!DOCTYPE>

定义文档类型

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

标签

描述

4:指在HTML 4.01 中定义了该元素

5:指在HTML 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

HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。

HTML 5标签中的新属性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template

HTML 5 中不再支持的属性:accesskey

HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。

HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

HTML 5不再支持的 HTML 4.01 属性:onreset。

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比,HTML 5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

随着计算机技术不断发展,可以看到HTML5在未来的几年内的发展将会是一个井喷式的增长。HTML5技术在未来几年内发展将会以以下几个形式表现:

1)HTML5技术的移动端方向。HTML5技术在未来主要发展的市场还是在移动端互联网领域,现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势,这两个方面是移动端网页发展的障碍,而HTML5技术能够解决这两个问题,并且将劣势转化为优势,整体推动整个移动端网页方面的发展;

2)Web内核标准提升。目前移动端网页内核大多采用Web内核,相信在未来几年内随着智能端逐渐普及,HTML5在Web内核方面应用将会得到极大的凸显;

3)提升Web操作体验。随着硬件能力的提升、WebGL标准化的普及以及手机页游的逐渐成熟,手机页游向3D化发展是大势所趋;

4)网络营销游戏化发展。通过一些游戏化、场景化以及跨屏互动等环节,不仅增加用户游戏体验,还能够满足广告主大部分的营销需求,在推销产品的过程中,让用户体验游戏的乐趣;

5)移动视频、在线直播。HTML5将会改变视频数据的传输方式,让视频播放更加流畅,与此同时,视频还能够与网页相结合,让用户看视频如看图片一样轻松。


相关文章推荐:
SVG | IETF | 表单 | JavaScript | 视频流 | 音频流 | DOM | API | Canvas | 文档编辑 | !DOCTYPE | acronym | basefont | HTML 5 |