zl程序教程

您现在的位置是:首页 >  前端

当前栏目

HTML5 简介

html5 简介
2023-06-13 09:16:01 时间
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

新一代网络标准能够让程序通过 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 中定义了该元素。


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 特性。

html5-browsers-support

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

appleFireFoxjavaLG安全平板电脑手机游戏硬件苹果谷歌