整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5简介

TML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在网际网路应用迅速发展的时候,使网路标准达到符合当代的网路需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要外挂程式的丰富性网路应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网路应用的标准集。

HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时整合了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。

发展历史

网页超文本技术工作小组(WHATWG)于2004年开始制定新标准。在当时,HTML 4.01自2000年来没有更新,以及全球资讯网协会(W3C)正在将未来的发展重点放在XHTML 2.0。2009年,W3C允许XHTML 2.0工作组章程结束过期并且决定不再续订。W3C与WHATWG合作共同为发展HTML5而努力。

2004年6月,Mozilla基金会和Opera软体公司在全球资讯网协会(W3C)所主办的研讨会上提出了一份立场文件,其重点是开发与现有浏览器向后相容的技术,包括Web Forms 2.0最初草案规范。研讨会最后以——8票赞成,14票反对——否决继续对HTML的开发工作。这引起一些人的不满,在研讨会之后,网页超文本技术工作小组(WHATWG)立即根据该立场文件成立,第二个草案,Web Applications 1.0也公布了。后来这两种规范合并形成HTML5。2007年,获得W3C接纳,并成立了新的HTML工作团队。2008年1月22日,第一份公开工作草案发布。

尽管HTML5已经在网络开发人员中非常出名了,但是它成为主流媒体的一个话题是在2010年的4月,当时苹果公司的CEO乔布斯发表一篇题为“对Flash的思考”的文章,指出随着HTML5的发展,观看影片或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了加强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。

特点

标记

HTML5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小萤幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。一些过时的HTML 4.01标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。还有一些透过DOM的网络行为。

尽管和SGML在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始列看起来就像SGML的文档类型声明,<!DOCTYPE HTML>,这会触发和标准兼容的渲染模式。在2009年1月5日,HTML5添加了Web Form 2.0的内容,HTML5开始发展起来。

新的API

HTML5相关APIs

除了原先的DOM接口,HTML5增加了更多样化的应用程序接口(API):

Canvas

定时媒体播放

离线

可编辑内容

拖放

历史

MIME和协议处理程序时表头登记

微数据

网路讯息

网路存储

以上技术尽管是WHATWG HTML说明文档的内容,但并没有全部包括在W3C HTML5的说明文档里。一些相关的技术,像下面所列的,并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。

地理位置

网页SQL数据库 ─ 本地SQL数据库(不再维护)

IndexedDB

文件─ 处理文件上传和操纵文件

目录和文件系统 ─ 这个API是为了满足客户端在没有好的数据库支持情况下存储要求

文件写入 ─ 从网络应用程序向文件里写内容

网路音频

ClassList

网路加密

WebRTC

一个普遍的误解是HTML5能够在网页中提供动画效果,这是不对的,动画效果是需要配合JavaScript和CSS。然而静态HTML5配合CSS可以表示出覆杂的排版结构而且原生支援与影片的混合与控制(控制一般由JavaScript执行),因此简单可以把HTML5单位时间的状态理解为动画的关键影格。

XHTML5(XML-serialized HTML5)

XHTML5是对HTML5的XML序列化。XML文档必须被设置为XML互联网文件类型,像application/xhtml+xml或者application/xml。XHTML5要求像XML一样严格的格式化的语法。在XHTML5中,HTML5的<!DOCTYPE HTML>可有可无的。

XHTML5并非XHTML的第5版,没有自己独立的标准规范,而是HTML5的一种序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language,不同于XHTML5。

异常处理

HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

普及率

根据2011年9月30日发布的一份报告,全球排名前100的网站中有34个网站使用HTML5──主要是搜寻引擎与社群网站。2013年8月发布的另一份报告显示,财富美国500强企业中已有多达153家采用HTML5。

HTML 4.01和XHTML 1.x的差异

以下为大略的不同之处,与例子:

文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。

新的解析顺序:不再基于SGML。

新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新类型:date, email, url等等。

新的属性:ping(用于a与area), charset(用于meta), async(用于script)。

全域属性:id, tabindex, repeat。

新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。


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

HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。


发展历史

2004年网页超文本技术工作小组(WHATWG)开始制定新标准。

2009年W3C与WHATWG合作共同为发展HTML5而努力。

2004年6月,宣布第二个草案Web Applications 。后来这两种规范合并形成HTML5。

2007年,获得W3C接纳,并成立了新的HTML工作团队。

2008年1月22日,第一份公开工作草案发布。

2014年10月28日,W3C正式发布HTML 5.0推荐标准。


新特性

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 是HTML、XHTML 以及 HTML DOM 的新标准(推荐标准)。

语法:

根据HTML5设计化繁为简的准则,文档类型和字符说明都进行了简化:

<!DOCTYPE html>
<meta charset='UTF-8'>
.......

HTML5元素

HTML5定义了一组新的语义化标记来描述元素的内容。

header 标记头部区域的内容。
footer 标记脚部区域的内容
section 页面中的一块区域
article 独立的文章内容
aside 相关内容或者引文
nav 导航类
video:定义视频,比如 电影片段或其他视频流
<video src='movie.ogg' controls='controls'>video元素</video>
audio:定义音频,比如音乐或其他音频流 
<audio src='audio.wav'>audio元素</audio>
...........

HTML5其他功能

HTML5引入了一种用于用于查找页面DOM元素的selectors API。

document.querySelector("#demo")--->返回文档中匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll("#demo")--->返回文档中匹配指定 CSS 选择器的所有元素。

html5文档结构代码

html5 有什么神奇? 就是进化的一套标准。

我是不是整理的都好初级,不过整理即巩固加回忆,只要是好好学习,那么时间就不是浪费,那么道路就一定是正确的!!加油啊 小果冻de迈阿密!!