柠檬铺

HTML5 是一种专门用于组织 Web 内容的语言。它通过创建一种标准化的、直观的 UI 标记语言简化 Web 设计和开发。HTML5 提供了解析和划分页面的方法，它允许创建各种独立的组件来按照逻辑组织站点，同时还为站点提供联合功能。HTML5 可以称作 “面向站点设计的信息映射方法”，因为它融入了信息映射、信息划分和消息标签等基本内容，使信息变得易于使用和理解，这构成了 HTML5 的生动语义和审美工具的基础。HTML5 使具备不同能力的设计师和开发人员能够发布从简单文本到丰富的交互式多媒体等各种内容。

常用缩写词

• API：应用程序编程接口
• CSS3：层叠样式表 3
• GUI：图形用户界面
• HTML：超文本标记语言
• HTML5：HTML 版本 5
• SQL：结构化查询语
• UI：用户界面

HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5 是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表 单控件、API、多媒体、数据库支持，并极大地加快了处理速度。
HTML5 中的新标记更能让人产生共鸣，封装了它们的角色和用法。以前的 HTML 版本使用的标记不容易进行区分。然而，HTML5 提供了高度描述的、直观的标签。它提供了丰富的内容便签，可以立即识别出内容。例如，<div>标记现在补充了 <section>和 <article>标记。此外，还增加了 <video>、<audio>、<canvas>和 <figure>标记，可以更准确地描述内容的具体类型。
HTML5 实现了以下功能：

• 提供了可以准确描述所包含的内容的标记
• 增强的网络通信
• 显著改善了一般存储
• 用于运行后台流程的 Web Worker
• 在应用程序和服务器之间建立持久连接的 WebSocket 接口
• 更好地检索存储的数据
• 改善了网页保存和载入速度
• 支持 CSS3 管理 GUI，意味着 HTML5 具备面向内容的特性
• 改善了浏览器的表单处理
• 一个基于 SQL 的数据库 API，允许客户端本地存储
• 画布和视频，无需安装第三方插件即可添加图形和视频
• Geolocation API 规范，使用智能手机位置功能来合并移动云服务和应用程序
• 智能表单减少了下载 JavaScript 代码的需求，在移动设备和云服务器之间实现了更有效的通信

HTML5 创建了更加吸引人的用户体验：使用 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>标记创建页面的 Header区的内容。<header>标记可以包含有关 <section>和 <article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个 <header>标记示例。

清单 1. <header> 标记示例

<header>标记还可以包含  <hgroup>标记，如清单 2 所示。<hgroup>标记使用从 <h1>到  <h6>的标题级别对标题进行了分组，其中包含主标题和子标题。

清单 2. <hgroup> 标记示例

Navigation 区
可以使用 <nav>标记创建页面的 Navigation 区。<nav>元素专门为导航功能定义了一个区域。 <nav>标记应当用于主站点的导航，而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。

清单 3. <nav> 标记示例