整合营销服务商

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

免费咨询热线:

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 元素有多种维度展示方式,常见以下:

  • 1.按照类别分类
  • 2.按照是否Block元素

按照类别分:

根元素

  • - html 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
  • 文档元数据
  • head 代表关于文档元数据的一个集合,包括脚本或样式表的链接或内容。
  • title 定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。
  • base 定义页面上相对 URL 的基准 URL。
  • link 用于链接外部的 CSS 到该文档。
  • meta 定义其他 HTML 元素无法描述的元数据。
  • style 用于内联 CSS。
  • -
  • 脚本
  • script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
  • noscript 定义当浏览器不支持脚本时显示的替代文字。
  • template 这个元素在 HTML5 中加入 通过 JavaScript 在运行时实例化内容的容器。
  • -
  • 章节
  • body 代表 HTML 文档的内容。在文档中只能有一个 元素。
  • section 这个元素在 HTML5 中加入 定义文档中的一个章节。
  • nav 这个元素在 HTML5 中加入 定义只包含导航链接的章节。
  • article 这个元素在 HTML5 中加入 定义可以独立于内容其余部分的完整独立内容块。
  • aside 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
  • h1~ h6 标题元素实现了六层文档标题,h1 是最大的标题,h6 是最小的标题。标题元素简要地描述章节的主题。
  • header 这个元素在 HTML5 中加入 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录
  • footer 这个元素在 HTML5 中加入 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
  • address 定义包含联系信息的一个章节。
  • main 这个元素在 HTML5 中加入 定义文档中主要或重要的内容。
  • -
  • 内容组织
  • p 定义一个段落。
  • hr 代表章节、文章或其他长内容中段落之间的分隔符。
  • pre 代表其内容已经预先排版过,格式应当保留 。
  • blockquote 代表引用自其他来源的内容。
  • ol 定义一个有序列表。
  • ul 定义一个无序列表。
  • li 定义列表中的一个列表项。
  • dl 定义一个定义列表(一系列术语和其定义)。
  • dt 代表一个由下一个
  • 定义的术语。
  • dd 代表出现在它之前术语的定义。
  • figure 这个元素在 HTML5 中加入 代表一个和文档有关的图例。
  • figcaption 这个元素在 HTML5 中加入 代表一个图例的说明。
  • div 代表一个通用的容器,没有特殊含义。
  • -
  • 文字展示
  • a 代表一个链接到其他资源的超链接 。
  • em 代表强调 文字。
  • strong 代表特别重要 文字。
  • small 代表注释 ,如免责声明、版权声明等,对理解文档不重要。
  • s 代表不准确或不相关 的内容。
  • cite 代表作品标题 。
  • q 代表内联的引用 。
  • dfn 代表一个术语包含在其最近祖先内容中的定义 。
  • abbr 代表省略 或缩写 ,其完整内容在 title 属性中。
  • data 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 (该元素只在 WHATWG 版本的 HTML 标准中,不在 W3C 版本的 HTML5 标准中)。
  • time 这个元素在 HTML5 中加入 代表日期 和时间 值;机器可读的等价形式通过 datetime 属性指定。
  • code 代表计算机代码 。
  • var 代表代码中的变量 。
  • samp 代表程序或电脑的输出 。
  • kbd 代表用户输入 ,一般从键盘输出,但也可以代表其他输入,如语音输入。
  • sub,- sup 分别代表下标 和上标 。
  • i 代表一段不同性质 的文字,如技术术语、外文短语等。
  • b 代表一段需要被关注 的文字。
  • u 代表一段需要下划线呈现的文本注释,如标记出拼写错误的文字等。
  • mark 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
  • ruby 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本,如中文汉字和它的拼音。
  • rt 这个元素在 HTML5 中加入 代表ruby 注释 ,如中文拼音。
  • rp 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
  • bdi 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
  • bdo 指定子元素的文本方向 ,显式地覆盖默认的文本方向。
  • span 代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。
  • br 代表换行 。
  • wbr 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ,当文本太长需要换行时将会在此处添加换行符。
  • -
  • 文字编辑
  • ins 定义增加 到文档的内容。
  • del 定义从文档移除 的内容。
  • -
  • 图片等资源展示
  • img 代表一张图片 。
  • iframe 代表一个内联的框架 。
  • embed 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源,如应用程序或交互内容。
  • object 代表一个外部资源 ,如图片、HTML 子文档、插件等。
  • param 代表 - object 元素所指定的插件的参数 。
  • video 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕,并提供了播放视频的用户界面。
  • audio 这个元素在 HTML5 中加入 代表一段声音 ,或音频流 。
  • source 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定媒体源 。
  • track 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定文本轨道(字幕) 。
  • canvas 这个元素在 HTML5 中加入 代表位图区域 ,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等。
  • map 与 - area 元素共同定义图像映射 区域。
  • area 与 - map 元素共同定义图像映射 区域。
  • svg 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。
  • math 这个元素在 HTML5 中加入 定义一段数学公式 。
  • -
  • 表格
  • table 定义多维数据 。
  • caption 代表表格的标题 。
  • colgroup 代表表格中一组单列或多列 。
  • col 代表表格中的列 。
  • tbody 代表表格中一块具体数据 (表格主体)。
  • thead 代表表格中一块列标签 (表头)。
  • tfoot 代表表格中一块列摘要 (表尾)。
  • tr 代表表格中的行 。
  • td 代表表格中的单元格 。
  • th 代表表格中的头部单元格 。
  • -
  • 表单
  • form 代表一个表单 ,由控件组成。
  • fieldset 代表控件组 。
  • legend 代表 - fieldset 控件组的标题 。
  • label 代表表单控件的标题 。
  • input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)。
  • button 代表按钮 。
  • select 代表下拉框 。
  • datalist 这个元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项 。
  • optgroup 代表一个选项分组 。
  • option 代表一个 - select 元素或 - datalist 元素中的一个选项
  • textarea 代表多行文本框 。
  • keygen 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。
  • output 这个元素在 HTML5 中加入 代表计算值 。
  • progress 这个元素在 HTML5 中加入 代表进度条 。
  • meter 这个元素在 HTML5 中加入 代表滑动条 。
  • -
  • 导航等交互元素
  • details 这个元素在 HTML5 中加入 代表一个用户可以(点击)获取额外信息或控件的小部件 。
  • summary 这个元素在 HTML5 中加入 代表 - details 元素的综述 或标题 。
  • menuitem 这个元素在 HTML5 中加入 代表一个用户可以点击的菜单项。
  • menu 这个元素在 HTML5 中加入 代表菜单。

按照是否Block元素分:

  • 1.Empty Elements
  • area 与 map 元素共同定义图像映射 区域。
  • base 定义页面上相对 URL 的基准 URL。
  • basefont 4.0种标签,目前已废弃
  • br 代表换行 。
  • col 代表表格中的列 。
  • frame 4.0种标签,目前已废弃
  • hr 代表章节、文章或其他长内容中段落之间的分隔符。
  • img 代表一张图片 。
  • input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)。
  • isindex 4.0种标签,目前已废弃
  • link 用于链接外部的 CSS 到该文档。
  • meta 定义其他 HTML 元素无法描述的元数据。
  • param 代表 object 元素所指定的插件的参数
  • embed 代表一个嵌入 的外部资源,如应用程序或交互内容
  • -
  • 2.Block Elements
  • address 定义包含联系信息的一个章节
  • applet 4.0种标签,目前已废弃
  • blockquote 代表引用自其他来源的内容。
  • button 代表按钮
  • center 4.0种标签,目前已废弃
  • dd 代表出现在它之前术语的定义
  • del 定义从文档移除 的内容。
  • dir 4.0种标签,目前已废弃
  • div 代表一个通用的容器,没有特殊含义
  • dl 定义一个定义列表(一系列术语和其定义)
  • dt 代表一个由下一个 dd 定义的术语
  • fieldset 代表控件组
  • form 代表一个表单 ,由控件组成
  • frameset 4.0种标签,目前已废弃
  • hr 代表章节、文章或其他长内容中段落之间的分隔符
  • iframe 代表一个内联的框架
  • ins 定义增加 到文档的内容
  • isindex 4.0种标签,目前已废弃
  • li 定义列表中的一个列表项
  • map 与 area 元素共同定义图像映射 区域
  • menu 代表菜单
  • noframes
  • noscript 定义当浏览器不支持脚本时显示的替代文字
  • object 代表一个外部资源 ,如图片、HTML 子文档、插件等
  • ol 定义一个有序列表
  • p 定义一个段落
  • pre 代表其内容已经预先排版过,格式应当保留
  • script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript
  • table 定义多维数据
  • tbody 代表表格中一块具体数据 (表格主体)
  • td 代表表格中的单元格
  • tfoot 代表表格中一块列摘要 (表尾)
  • th 代表表格中的头部单元格
  • thead 代表表格中一块列标签 (表头)
  • tr 代表表格中的行
  • ul 定义一个无序列表
  • -
  • 3.Inline Elements
  • a 代表一个链接到其他资源的超链接
  • abbr 代表省略 或缩写 ,其完整内容在 title 属性中
  • acronym 4.0种标签,目前已废弃
  • applet 4.0种标签,目前已废弃
  • b 代表一段需要被关注 的文字
  • basefont 4.0种标签,目前已废弃
  • bdo 指定子元素的文本方向 ,显式地覆盖默认的文本方向
  • big 4.0种标签,目前已废弃
  • br 代表换行
  • button 代表按钮
  • cite 代表作品标题
  • code 代表计算机代码
  • del 定义从文档移除 的内容
  • dfn 代表一个术语包含在其最近祖先内容中的定义
  • em 代表强调 文字
  • font 4.0种标签,目前已废弃
  • i 代表一段不同性质 的文字,如技术术语、外文短语等
  • iframe 代表一个内联的框架
  • img 代表一张图片
  • input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)
  • ins 定义增加 到文档的内容
  • kbd 4.0种标签,目前已废弃
  • label 代表表单控件的标题
  • map 与 area 元素共同定义图像映射 区域
  • object 代表一个外部资源 ,如图片、HTML 子文档、插件等
  • q 代表内联的引用
  • s 代表不准确或不相关 的内容
  • samp 代表程序或电脑的输出
  • script 定义一个内联脚本或链接到外部脚本。默认脚本语言是 JavaScript
  • select 代表下拉框
  • small 代表注释 ,如免责声明、版权声明等,对理解文档不重要
  • span 代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素
  • strike 4.0种标签,目前已废弃
  • strong 代表特别重要 文字
  • sub 代表下标
  • sup 代表上标
  • textarea 代表多行文本框
  • tt 4.0种标签,目前已废弃
  • u 4.0种标签,目前已废弃
  • var 代表代码中的变量
  • -

参考文献:

  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
  • 本文作者:前端首席体验师(CheongHu)
  • 联系邮箱:simple2012hcz@126.com
  • 版权声明: 本文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

们都知道现在学习HTML5开发技术是非常吃香的,很多互联网公司都在高薪招聘HTML5工程师,但不是专业出身的话,很难顺利进入这个行业,幸好现在有很多HTML5培训机构可以帮助我们实现这个愿望。

不少人前来进行咨询,都会问及一个问题,就是HTML5培训的周期是多久,我来这里学习得学多久?这个问题非常普遍,因为基本上所有的人都希望尽快的学完出去找工作。在这里就给大家说一说HTML5培训的时间是多久?

一般的培训周期是5个月,5个月过后,学员如果按照老师的课程进度走的话,毕业进入名企工作是没有问题的。同时在入学的时候要签订就业协议,免除后顾之忧。

课程首先介绍HTML5中的基础知识,然后讲解CSS3基础知识。整个课程贯彻大量真实案例的演练,帮助学生进行巩固知识,锻炼学生动手能力、编程能力。

在积累了两个月的知识以及大量案例后,讲解HTML5的高级部分,保证学习效果。值得一提的是兄弟连HTML5课程要求学员要达到手写代码的程度。在有了扎实的手写代码的功底之后,再讲解工具的使用,学习效果会更好。

了解客户端和服务器交互的规则、及服务端的基础技术,这样可以帮助学员更好地设计程序与服务器进行交互。

说了这么多,其实就是想让你更加了解HTML5开发。如此优秀的资源和让人望眼欲穿的实习机会,再不行动就要被后来居上的技术人员拍死在沙滩上了。