Home >Web Front-end >H5 Tutorial >HTML5 到底是什么?

HTML5 到底是什么?

WBOY
WBOYOriginal
2016-06-07 08:42:181552browse

回复内容:

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到底是什么 推进得挺缓慢的新标准...都出了多少年啦,还是没有统治世界...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn