Maison >interface Web >Tutoriel H5 >HTML5 到底是什么?

HTML5 到底是什么?

WBOY
WBOYoriginal
2016-06-07 08:42:181550parcourir

回复内容:

HTML5 是对 HTML 标准的第五次修订,目前仍未完工。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。

但论及 HTML5 时,大部分开发者所指的并不仅仅是这个新标准,而是(如 Jeremy Keith 说)
doing anything cool (on the web)
做这些“酷”的东西需要用到的技术和标准,除了 HTML5 标准外,还包括 CSS3 的一些新属性,以及一些新的 API。
WHATWG 在今年一月份宣布(至少对于 WHATWG 来说),HTML5 将是 HTML 的最后一个版本号,HTML 从此成为了一个不断在更新和变化的活标准。

大家提到的都是非常好的资料,我这里再补充一些:
来自 W3C 的 HTML5 草案
w3.org/TR/html5/
来自 WHATWG 的文档
whatwg.org/specs/web-ap
Dive Into HTML5 - 许多泛 HTML5 技术的入门讲解
diveintohtml5.org/
HTML is the new HTML5
blog.whatwg.org/html-is

背景介绍:
W3C 全称是万维网协会(World Wide Web Consortium),是制定互联网标准的官方组织。
en.wikipedia.org/wiki/W
WHATWG 是一个非官方的,由包括来自 Mozilla、Google、Opera 等公司的员工组成的开源社区,是任何人都可以参与的。它对 HTML(前 HTML5 标准)、Web Workers API 等标准的制定和更新做出过很大贡献。
en.wikipedia.org/wiki/W

---- 2011 年 12 月 13 日更新 ----
之前对 WHATWG 和浏览器厂商关系的叙述有谬误,已更正。更多关于 WHATWG 以及其成员组成的信息,参考 @呂康豪 的评论。 小二,上名解

HTML的英文全称为Hyper Text Markup Language,即超文本标记语言。HTML5是HTML的一个新版本。HTML 不是一种编程语言,而是一种标记语言 (markup language)。

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

HTML5特性

语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

HTML5 是定义了 HTML 的标准的最新演进。 这个术语代表了两个不同的概念:
  • 它是 HTML 语言的一个新的版本,具有新的元素,属性和行为,
  • 以及可以使 Web 站点和应用更加多样化和功能更强大的更丰富的一套技术。 这套技术有时被称作 HTML5 & 它的朋友们 而且往往被缩减到仅是 HTML5。
从要对全部所有的 Web 开发人员有用这一点出发,这个参考页面链接了有关 HTML5 技术的大量资源,并且基于它们各自的功能,把它们归类成了若干组。
  • 语义:能够让你更恰当地描述你的内容是什么。
  • 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择。
  • 性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备访问 Device Access:能够处理各种输入和输出设备。
  • 样式设计: 让作者们来创作更加复杂的主题吧!
以上来自 MDN ,详细请转到:
HTML5 - HTML (中文)
HTML5 - Web developer guide (英文)
现在的HTML5已经是正式的标准了,不再是处于调试状态了。2014年10月28日,W3C正式发布了HTML5的标准版本。 放上我之前写的一篇文章,供各位参考。

H5 是国内对HTML5 的简称,其实我们每天都在接触它,它无处不在。从「围住神经猫」,「击打企鹅」,「在房祖名中找到张默」这些红极一时的火爆游戏,到现在微信朋友圈推送广告时宝马、VIVO 的广告,支付宝十年账单等等,背后都是 HTML5 技术。


但是很多时候大家对 H5 认识都只是停留在「页面」这个层次上,甚至还会有一些误解,下面就是关于 HTML5 的一些常见的误解:

#### HTML5 是一项新技术

HTML5 原本指 HTML 下一个主要的修订版本,所用到的技术很早就已经成熟了,而 HTML5本身并非技术,而是标准。现在国内普遍说的 H5 是包括了 CSS3,JavaScript 的说法(严格意义上说,这么叫并不合适,但是已经这么叫开了,就将错就错了)。

那可能有不懂技术的同学会问,到底什么是 HTML呢?

正规的说法是,HTML(Hyper Text Markup Language,超文本标记语言) 是一门标记语言。所谓「超文本」就是指页面里可以包含图片,链接,甚至音乐等非文字元素;计算机之间需要沟通,那些是正文,那些是图片,都需要标记,标记这些的一套规范和标准就是 HTML。


#### HTML5 的性能不好

上面已经说了,HTML5 本身并不是技术,而是一个标准,不涉及性能问题。性能的问题往往是多方面的,软件层面(浏览器对 H5 的支持),硬件层面,包括代码都可能会导致性能问题。不过现在硬件的更新速度非常快,iPhone4S 的 CPU 是 A5,而 iPhone6 已经是 A8了,按苹果的说法,速度共提升了7.5倍;移动端浏览器大部分是现代浏览器,对 HTML5 和 CSS3的支持都很好。

----

### 绘图功能

SVG 和 Canvas 都能使你在浏览器中画图,但是基本原理不一样。

#### SVG(Scalable Vector Graphics)

SVG 即是 `Scalable Vector Graphics`,是一种用来绘制矢量图的 HTML5标签。

SVG 基于 XML(EXtensible Markup Language,可拓展标记语言,类似于 HTML),这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

#### Canvas

Canvas,顾名思义,是画布,通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

#### WebGL(Web-based Graphics Language)

WebGL 是一个跨平台、免费的底层 3D 绘图 API 的 Web 标准,是一套用于渲染 2D 和 3D 图形的标准图形库。作为一项强大的图形技术,WebGL 可以很好的呈现 3D 效果。iOS8 宣布支持 WEBGL 后,百度全景在移动 Web 端支持 WebGL 图形技术了,可以更逼真的模拟街道环境。

#### Canvas 与 SVG 的主要不同点

Canvas | SVG
------------ | -------------
依赖于分辨率 | 不依赖于分辨率(矢量)
不支持事件处理器 | 支持事件处理器
弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序(比如说 Google 地图)
能够以.png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
最适合图像密集型的游戏,其中的许多对象会被频繁绘制 | 不适合游戏应用

---

### 动画的运用

一般来说,也就是两种。一种是 CSS3 动画,一种是 JavaScript 动画。但是很多情况下,JavaScript 也会用于改变 CSS 属性来实现动画。

如果是复杂交互的动画,还是用 JavaScript 比较好。

具体如何处理,那又是比较大的话题了,在这就不细说。

---

### 最后说几句

当年 Facebook 放弃 HTML5 转投原生开发的,而今微信却在中国让 HTML5 大红大紫,不得不说时势弄人。
当年 Facebook 采用的是混合式开发,类似于今天我们说的里面是前端代码,然后套了个 PhoneGap 的壳子,打包变成 iOS 应用了。混合式开发一般会占比,但是 Facebook 的 HTML 的部分占比过大,而且 当年 iOS App 里调用的 Webview 的引擎和浏览器 Safari 里用的不一样,对技术支持的也不好。

在今天,iOS8 的 Webkit 库,使用 WKWebView 来代替以前的 UIWebView,并且使用 Nitro JavaScript 引擎,这意味着所有第三方浏览器运行 JavaScript 可以跟 Safari 一样快。 一个视频搞定你
boolgeek.com/video/1019 第五代超文本标记语言 建议看看w3.org上面和标准相关的东西 来,向这边看齐:
如果让我举例的话,我会这样比喻:过去的HTML就像你我身上穿着的衣服,而HTML5则是米兰、巴黎时尚T台上模特们的新装。新鲜悦目、其中一些内容能够在不久将来进入我们的生活,但不是现在,也有人说,就是现在。
来自网友链接HTML5到底是什么 推进得挺缓慢的新标准...都出了多少年啦,还是没有统治世界...
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn