HTML5基础知识一、新特性解读
解读HTML5中补充和增加的标记：
HTML 5 全局属性
NEW：HTML 5 中新的全局属性。
| 属性 | 描述 |
|---|---|
| accesskey | 规定访问元素的键盘快捷键 |
| class | 规定元素的类名（用于规定样式表中的类）。 |
| contenteditable (5特有) | 规定是否允许用户编辑内容。contenteditable="true" |
| contextmenu (5特有) | 规定元素的上下文菜单。目前没有任何主流浏览器支持 contextmenu 属性。 |
| dir | 规定元素中内容的文本方向。 |
| draggable (5特有) | 规定是否允许用户拖动元素。目前没有任何主流浏览器支持 dropable 属性 |
| dropzone (5特有) | 规定当被拖动的项目/数据被拖放到元素中时会发生什么。目前没有任何主流浏览器支持 dropzone 属性 |
| hidden (5特有) | 规定该元素是无关的。被隐藏的元素不会显示。 用法：hidden="hidden" |
| id | 规定元素的唯一 ID。 |
| lang | 规定元素中内容的语言代码。 |
| spellcheck (5特有) | 规定是否必须对元素进行拼写或语法检查。spellcheck="true"or "false" |
| style | 规定元素的行内样式。 |
| tabindex | 规定元素的 tab 键控制次序。 |
| title | 规定有关元素的额外信息。title="......." 当鼠标放上去之后会有一个悬浮框显示title中的内容 |
HTML5 实现了以下功能：
- 1、提供了可以准确描述所包含的内容的标记 2、增强的网络通信 3、显著改善了一般存储 4、用于运行后台流程的 Web Worker
- 5、在应用程序和服务器之间建立持久连接的 WebSocket 接口 6、更好地检索存储的数据 7、改善了网页保存和载入速度
- 8、支持 CSS3 管理 GUI，意味着 HTML5 具备面向内容的特性 9、改善了浏览器的表单处理 10、一个基于 SQL 的数据库 API，允许客
- 户端本地存储画布和视频，无需安装第三方插件即可添加图形和视频 11、Geolocation API 规范，使用智能手机位置功能来合并移动云服
- 务和应用程序智能表单减少了下载 JavaScript 代码的需求，在移动设备和云服务器之间实现了更有效的通信
HTML5 创建了更加吸引人的用户体验，例如开发hybrid app：
使用 HTML5 设计的页面可以提供与桌面应用程序类似的体验。HTML5 还将 API 功能和浏览器结合在一起，提供了增强的多平台开发。通过使用 HTML5，开发人员可以提供在不同平台之间切换的现代应用程序体验，
HTML5 实际上是一系列创新的代表。HTML5 提供了新的标记、新的方法，并通过与 CSS3 和 JavaScript 的相互作用形成了一个通用的开发框架。这是以客户端为中心的应用程序处理的核心。除了将 HTML5 技术的技巧和方法部署到桌面外，还可以在特性丰富的 Web 移动手机浏览器中实现 HTML5 —随着 Apple iPhone、Google Android 和运行 Palm webOS 的手机的流行和普及，这注定是一个不断增长的市场。
HTML5 的一个关键功能就是信息映射 —或内容阻塞（如果您喜欢的话）—可以生成更加容易理解的流程。随着 HTML5 在 Web 处理方面的地位越来越重要，您将看到它在设计和开发方面是多么地高效。
HTML5 标志着更有效的文本级别的语义流程，以及对表单构建和使用的更高级别的控制。所有这些特性和 HTML5 创新的许多其他优点是使它成为主要范式的根本原因。许多商业的或其他代理组织（即使这些组织其中很多的主要代理行为并不是信息处理和通信）都或多或少地反映到了这种日益增长的模式开发中。
HTML5 的成功并不是出于偶然。相反，它的技术和方法才是它取得成功的后盾。
页面规划
您将创建一个简单的 Web 页面。在这个过程中，我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面，必须对页面进行规划，考虑到需要创建的所有的组件。
创建的页面将采用如图 1 所示的高级设计。页面设计包含一个 Header 区、一个 Navigation 区、一个 Article 区（包含三个部分）、一个 Aside 区和一个 Footer 区。该页面将用于 Google Chrome 浏览器，消除了一些会引起感官混乱、会引起浏览器兼容性问题的内容，它们不利于浏览器理解页面基本结构。这种结构的目的是清楚地展示新的 HTML5 标记的用法，展示如何使用它们创建构造良好的代码和优雅的页面设计。
图 1. Acme United Web 页面规划
在创建页面的过程中，我使用了 CSS3，需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组可以在 W3Schools CSS3 参考站点（见 参考资料）找到，包括一些有用的元素，如背景、字体、选框和动画效果。
然而，在开始构建页面前，您需要了解一些有关新的 HTML5 标记的知识。
回页首
Header 区
示例中的 Header 区包含页面标题和副标题。您将使用 Header区的内容。和 的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个
清单 1. 标记示例
Heading Text
Text or images can be included here
Logos are frequently placed here too
标记，如清单 2 所示。标记使用从 到 的标题级别对标题进行了分组，其中包含主标题和子标题。
清单 2. 标记示例
Main Heading
Sub-heading
Text or images can be included here
Navigation 区
可以使用 标记创建页面的 Navigation 区。元素专门为导航功能定义了一个区域。 标记应当用于主站点的导航，而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。
清单 3.
回页首
Article 和 Section 区
您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 来唯一地识别内容。标记识别可以移除并放到另一个上下文的内容，并且非常易于理解。
Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 标记创建这些区。包含 Web 内容的相关的组件区。 标记 —以及 标记 —可以包含标题、页脚或任何其他必要的组件。标记用于对内容分组。
标记和 标记的内容通常以 结尾，中间为标记的内容。
标记还可以包含 标记，正如 标记可以包含 标记一样。
应用于将类似的信息划分成组，
标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。
顾名思义，提供了完整的信息判断，而 标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。
清单 4 显示了 和 标记的用法示例。
清单 4. 标记和 标记示例
Content Content Content Content
图像元素
和 标记以及 标记可以包含
清单 5. 标记和 标记示例
Caption for the figure
媒体元素
和 标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。
标记识别声音内容，例如音乐或任何其他的音频流。标记的属性控制播放音频的时间、方式以及内容。这些属性是src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。
清单 6.
标记允许您广播视频片段或可视流媒体。它除了具备 标记的所有属性外，还包含另外三个属性：poster、width和height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。
清单 7 提供了 标记结构的示例。
清单 7.
和 标记可以包含 和 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件，浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中，提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放，那么就可以尝试使用 MP3 版本。否者，显示一条消息，通知客户音频不可用的原因。
清单 8. 标记示例
标记定义了可以嵌入到页面中的内容 —例如，Adobe Flash SWF 文件的插件。清单 9 包含 type属性，该属性将嵌入的源识别为 Flash 文件。
清单 9.
除了 src和 type属性外，标记还包含 height 和 width属性。
回页首
Aside 区
在 Acme United 页面规划中，使用 标记创建 Aside 区。该标记的作用是容纳一些补充性内容，这些内容不属于文章的一部分。在杂志中，Aside 通常用于介绍有关文章本身的一些信息。标记包含的内容可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。
清单 10 提供了 标记的使用示例。
清单 10.
My family and I visited Euro Disney last year.
回页首
Footer 区
元素包含有关页面、文章或区段的信息，比如文章的作者或发表日期。文章的页脚可能包含版权或其他重要的法律消息，如清单 11 所示。
清单 11.
回页首
构造页面
现在，您已经了解了创建一个 HTML5 页面所需的基本标记，接下来让我们开始正式构造页面。我们将要为 Acme United 构造一个 Web 页面。图 2 显示了构建后的页面，您可以下载并使用该页面（参见 下载）。
图 2. Acme United Web 页面
现在，让我们开始构造页面吧。首先，让我们先关注一下 。在 HTML5 中，对 进行了简化：您只需要记住 html即可。这不仅简化了标记的输入，而且该标记在以后也不需要进行修改。注意，它不是 html5，而是 html。不管 HTML 以后会有多少个版本，只能是 html。
标记包含除 以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 和 标记之间。参见清单 12。
清单 12. 标记示例
表明文档类型为 html和使用语言为英语后，将要使用 元素。该元素将包含脚本、浏览器支持信息、样式表链接、元信息和其他初始化功能。可以在 head部分中使用以下标记：