HTML5 详细介绍 及应用实例

 HTML5 概况

什么是 HTML5

 

HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。

HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。

 

     与HTML 4的不同之处

　　新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput元素的新属性：日期和时间，email, url。新的通用属性：ping, charset, async全域属性：id, tabindex, repeat。移除元素：center, font, strike。

　　HTML 5有两大特点:

　　首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。

　　其次，追加了本地数据库等Web应用的功能。

 

 

HTML5 主要新功能

 

HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本，旨在消除Internet 程序（RIA）对 Flash， Silverlight， JavaFX 一类浏览器插件的依赖。除了原先的DOM接口，HTML5增加了更多API，如：

·       本地音频视频播放；

·       动画；

·       地理信息；

·       硬件加速；

·       本地运行(即使在 Internet 连接中断之后)；

·       本地存储；

·       从桌面拖放文件到浏览器上传；

·       语义化标记。

那些支持 HTML5 的浏览器在处理 HTML 代码错误的时候必须更灵活，而那些不支持 HTML5 的浏览器将忽略 HTML5 代码。

 

 

HTML 语法和接口的变化

 

　　除了原先的DOM接口，HTML5增加了更多API,如：

　　1. 用于即时2D绘图的Canvas标签

　　2. 定时媒体回放

　　3. 离线数据库存储

　　4. 文档编辑

　　5. 拖拽控制

　　6. 浏览历史管理

 

HTML5 引入了新的 HTML 元素和属性，有的是传统通用元素的语义化版本，如取代  div 元素的 nav, footer 等元素，也有一些全新的元素，如 audio, video。一些在 HTML4 中不被推荐使用的元素，如 font 和 center 将被弃用。HTML5 引入的新 HTML 元素包括：

·       article：文章

·       aside：内容旁边的侧边栏内容

·       audio：音频

·       canvas：2D 绘图

·       command：命令按钮

·       datalist：下拉选择框

·       details：对象的细节

·       dialog：对话框

·       embed：外部插件或对象

·       figure：一组媒体对象以及标签文字

·       footer：页脚

·       header：页首

·       hgroup：文档某一部分的信息

·       keygen：表单生成的 Key

·       mark：标注的文字

·       meter：预先定义的范围内的度量

·       nav：导航条

·       output：输出

·       progress：进度条

·       rp：标识 rubby 内容

·       rt：rubby 内容的解释

·       ruby：rubby 内容

·       section：定义一个部分

·       source：媒体的资源

·       time：日期时间

·       video：视频

这些新标签，可以让你的 HTML 文档更容易加载，且更容易被搜索引擎抓取其中的有用信息。比如，搜索引擎可以直接抓取它最关心的 article 标签里面的内容。

 

 

HTML5 同那些流行的技术如何共存

 

如今的 Web 世界已经习惯了各种插件和 API，HTML5 为 Web 开发与设计者带来了方便与不便，HTML5 将如何同现在的这些流行技术共存？

 

· HTML5 与 Flash

Canvas 对象 将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

Flash 被某些开发设计者滥用导致一些网页加载缓慢，而 HTML5 为之带来一线曙光。相对 Windows 用户来说，Mac 用户可能会从 HTML5 获得更多好处，因为苹果一直不愿支持 Flash。

现在看来，就视频游戏而言，Flash 是更好的选择，但取决于你的浏览器，如果你的视频不是很复杂，HTML5 是更好的选择。Web开发与设计者从这些争论中应该吸取的东西是，Flash 之外还有别的选择，但 Flash 有牢固的地盘，在为客户提供开发设计的时候，需要对他们的目标客户做一些研究。

 

· HTML5 与 IE 9

IE9 经常高调宣扬它对 HTML5 的兼容，它确实将是一个很好地支持 HTML5 的浏览器，因为，IE9 使用 Windows 现代图形 API 以及 PC 的图形加速卡输出文字和图形。微软还曾宣称，IE9 将支持 GPU 加速的 HTML5，将图形滚动，3D 图形显示等处理交由图形加速卡。

 

· HTML5 与 Ajax

现在的 HTML 语言的一个问题是，它是一种轻量级的应用界面，那些喜欢使用 Ajax 实现在线应用的开发者会发现 HTML 非常不好用。Ajaxwith.com 认为，HTML 适合用来加载界面，JavaScript 用来执行命令，虽然 HTML 在作为界面语言方面并不好用，但鉴于多数开发者对它的熟悉程度，HTML 还是不可缺少。HTML5 会让 Ajax 应用的实现变得更容易。

 

· HTML5 with CSS

你需对你的 CSS 代码就行整理以支持 HTML5，因为 h1, h2 之类的标签将不再使用，为了实现同 HTML5 的兼容，最好的方式是使用 CSS reset，将那些常见的 HTML 标签的 CSS 属性清零，woork 认为，最好的 CSS Reset 是 Eric Meyers CSS reset。

 

 

HTML 5 将带来什么？

 

HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。

 

1. 取消了一些过时的HTML4标记

    其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。

    HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

 

2. 将内容和展示分离

    b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

 

3. 一些全新的表单输入对象

   包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

 

4. 全新的，更合理的Tag

　 多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

 

5. 本地数据库

　 这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。

 

6. Canvas 对象

　 将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

 

7. 浏览器中的真正程序

　 将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。

 

 

HTML5 的更多意义

 

HTML5 的意义远不止上面这些，它最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。

另外，借助 Microdata， HTML5 还可以实现更强大的语义结构，这个标准化的数据格式(类似 microformats，对浏览器和搜索引擎都意义深远)，可以让你的站点不仅能够提供数据，还能提供数据定义。

不过，和任何新技术的降临一样，其中也会牵扯到一些问题，对 Web 设计者而言，最大的一个问题就是因为这些新标签的引入，各浏览器之间将缺少一种统一的数据描述格式。

 

 

25个让人惊叹的 HTML5 应用实验

　　如今，很多 Web 技术爱好者尝试使用 HTML5 来制作各种丰富的应用。本文将列出25个让人惊叹 HTML5 应用实验，让你体验下一代Web技术的魅力，相信你看完这些例子后会对未来的Web发展充满无限期待。

转自博客 http://www.cnblogs.com/lhb25/archive/2011/06/03/great-examples-of-html5-power.html

 

 

Bomomo

Tunneler

Geolocation

Magnetic

Google Box

HTML5 Video Destruction

Sinuous

Cloth Simulation

Canvas Paint

Canvas Gradient(move the mouse to change the color)

Lines go all over the place

Drag and drop

Editable Content

Two videos in sync

Storage events

Pong 3D

Interactive Circles

Geoid Viewer

The WebGL Globe

Tron Tank Program

Typographic Effects

Guess What Cup

Fractal Lab

Walking with CSS3

Core

您可能还喜欢

• 九个让人难以置信的HTML5和JavaScript实验
• 推荐21款最佳 HTML 5 网页游戏
• 推荐18个基于 HTML 5 Canvas 开发的图表库
• 8个惊艳的JavaScript WebGL 应用实验
• HTML 5 标签、属性、事件及浏览器兼容性速查表

（编译来源：