HTML5基础知识一、新特性解读

常用缩写词

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

解读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>标记创建页面的 Header区的内容。<header>标记可以包含有关<section>和 <article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个 <header> 标记示例。

清单 1. <header> 标记示例

 <header> 
    <h1>Heading Text</h1> 
    <p> Text or images can be included here</p> 
    <p> Logos are frequently placed here too</p> 
 </header>

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

清单 2. <hgroup> 标记示例

 <header> 
    <hgroup> 
          <h1>Main Heading</h1> 
          <h2>Sub-heading </h2> 
    </hgroup> 
    <p> Text or images can be included here</p> 
 </header>

Navigation 区

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

清单 3. <nav> 标记示例

 <nav> 
     <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About Us</a></li> 
          <li><a href="#">Our Products</a></li> 
          <li><a href="#">Contact Us</a></li> 
     </ul> 
 </nav>

回页首

Article 和 Section 区

您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 <article>标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 <article>来唯一地识别内容。<article>标记识别可以移除并放到另一个上下文的内容，并且非常易于理解。

Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 <section>标记创建这些区。<section>包含 Web 内容的相关的组件区。<section> 标记 —以及 <article>标记 —可以包含标题、页脚或任何其他必要的组件。<section>标记用于对内容分组。

<section>标记和 <article>标记的内容通常以 <header>开头，以 <footer>结尾，中间为标记的内容。

<section>标记还可以包含 <article>标记，正如 <article>标记可以包含 <section>标记一样。

<section>应用于将类似的信息划分成组，

<article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。

顾名思义，<article>提供了完整的信息判断，而 <section>标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。

清单 4 显示了 <article> 和 <section>标记的用法示例。

清单 4. <article> 标记和 <section> 标记示例

 <article> 
     <section> 
          Content 
     </section> 
     <section> 
          Content 
     </section> 
 </article> 
 <section> 
     <article> 
          Content 
     </article> 
     <article> 
          Content 
     </article> 
 </section>

图像元素

<section>和 <article>标记以及 <header>和 <footer>标记可以包含 <figure>标记。您可以使用该标记包含图像、图表和照片。

<figure>标记可以包含 <figcaption>，后者包含 <figure>标记中的图形的说明文字，允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 <figure>和 <figcaption>标记结构的示例。

清单 5. <figure> 标记和 <figcaption> 标记示例

 <figure> 
     <img src="/figure.jpg" width="304" height="228" alt="Picture"> 
     <figcaption>Caption for the figure</figcaption> 
 </figure>

媒体元素

<section>和 <article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。

<audio>标记识别声音内容，例如音乐或任何其他的音频流。<audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。

清单 6. <audio> 标记示例

 <audio src="MyFirstMusic.ogg" controls autoplay loop"> 
     Your browser does not support the audio tag. 
 </audio>

<video>标记允许您广播视频片段或可视流媒体。它除了具备 <audio>标记的所有属性外，还包含另外三个属性：poster、width和height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。

清单 7 提供了 <video>标记结构的示例。

清单 7. <video> 标记示例

 <video src="MyFirstMovie.ogg" controls="controls"> 
     Your browser does not support the video tag 
 </video>

<video>和 <audio>标记可以包含 <Source>标记，后者为 <video>和 <audio> 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件，浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中，提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放，那么就可以尝试使用 MP3 版本。否者，显示一条消息，通知客户音频不可用的原因。

清单 8. <source> 标记示例

 <audio> 
     <source src="/music/good_enough.wma" type="audio/x-ms-wma"> 
     <source src="/music/good_enough.mp3" type="audio/mpeg"> 
     <p>Your browser does not support the HTML 'audio' element.</p> 
 </audio>

<embed>标记定义了可以嵌入到页面中的内容 —例如，Adobe Flash SWF 文件的插件。清单 9 包含 type属性，该属性将嵌入的源识别为 Flash 文件。

清单 9. <embed> 标记示例

 <embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

除了 src和 type属性外，<embed>标记还包含 height 和 width属性。

回页首

Aside 区

在 Acme United 页面规划中，使用 <aside>标记创建 Aside 区。该标记的作用是容纳一些补充性内容，这些内容不属于文章的一部分。在杂志中，Aside 通常用于介绍有关文章本身的一些信息。<aside>标记包含的内容可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。

清单 10 提供了 <aside>标记的使用示例。

清单 10. <aside> 标记示例

 <p>My family and I visited Euro Disney last year.</p> 
 <aside> 
     <h4>Disney in France</h4> 
     <p>Besides Euro Disney, there is a Disneyland in California.</p> 
 </aside>

回页首

Footer 区

<footer>元素包含有关页面、文章或区段的信息，比如文章的作者或发表日期。文章的页脚可能包含版权或其他重要的法律消息，如清单 11 所示。

清单 11. <footer> 标记示例

 <footer> 
     <p>Copyright 2011 Acme United. All rights reserved.</p> 
 </footer>

回页首

构造页面

现在，您已经了解了创建一个 HTML5 页面所需的基本标记，接下来让我们开始正式构造页面。我们将要为 Acme United 构造一个 Web 页面。图 2 显示了构建后的页面，您可以下载并使用该页面（参见 下载）。

图 2. Acme United Web 页面

现在，让我们开始构造页面吧。首先，让我们先关注一下 <!doctype>。在 HTML5 中，对 <!doctype>进行了简化：您只需要记住 html即可。这不仅简化了标记的输入，而且该标记在以后也不需要进行修改。注意，它不是 html5，而是 html。不管 HTML 以后会有多少个版本，<!doctype>只能是 html。

<html>标记包含除 <!doctype>以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 <html>和 </html>标记之间。参见清单 12。

清单 12. <!doctype> 标记示例

 <!doctype html> 
 <html lang="en">

表明文档类型为 html和使用语言为英语后，将要使用 <head>元素。该元素将包含脚本、浏览器支持信息、样式表链接、元信息和其他初始化功能。可以在 head部分中使用以下标记：

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

<title>标记用于包含文档的实际标题，是 <head>中必须包含的元素。您将在浏览页面时在浏览器的顶部看到该标记包含的标题。清单 13 中的 <link>标记识别将用于呈现 HTML5 页面的 CSS3 样式表。调用的样式表为 main-stylesheet.css。

清单 13. <head> 标记示例

 <head> 
     <title>HTML5 Fundamentals Example</title> 
     <link rel="stylesheet" href="main-stylesheet.css"  /> 
 </head>

接下来将使用 <body>标记，之后是 <header>和 <hgroup> 标记，这些标记已经在前面进行了介绍。本例中的 <h1>区包含公司的名字（虚构的），即 Acme United，而 <h2>区包含的信息表明副标题为 “一个简单的 HTML5 示例”。清单 14 显示了标记。

清单 14. <body> 标记和 <header> 标记示例

 <body > 
     <header> 
          <hgroup> 
               <h1>Acme United</h1> 
               <h2>A Simple HTML5 Example</h2> 
          </hgroup> 
     </header>

清单 15 显示了目前为止构建页面所使用的 CSS3。首先，为页面定义字体，然后定义正文的细节。在定义正文的大小后，为一级和二级标题标记设计标题段落结构。这些都是将在页面中使用的标题。

清单 15. CSS3 示例 #1

 * { 
	 font-family: Lucida Sans, Arial, Helvetica, sans-serif; 
 } 

 body { 
	 width: 800px; 
	 margin: 0em auto; 
 } 

 header h1 { 
	 font-size: 50px; 
	 margin: 0px; 
	 color: #006; 
 } 

 header h2 { 
	 font-size: 15px; 
	 margin: 0px; 
	 color: #99f; 
	 font-style: italic; 
 }

清单 16 展示了 <nav>标记，该标记将用于处理主站点的导航。

清单 16. <nav> 示例

 <nav> 
     <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About Us</a></li> 
          <li><a href="#">Contact Us</a></li> 
     </ul> 
 </nav>

HTML5 还包含一个 <menu>标记 —该标记一度令一些设计师和开发人员感到困惑。这是因为导航功能常常被称为 “导航菜单”。HTML 版本 4.01 不赞成使用 <menu>标记，但是 HTML5 重新启用了该标记并使用它增强交互性。它不应当用于实现主导航。唯一用于实现主导航的标记应当为<nav>标记。您将在本示例后面的部分使用 <menu>标记。

导航的格式由 CSS3 实现。清单 17 中显示的每个 <nav>标记的定义都表示 <nav>标记内部的 <ul>和 <li>元素的特定状态。

清单 17. CSS3 示例 #2

 nav ul { 
	 list-style: none; 
	 padding: 0px; 
	 display: block; 
	 clear: right; 
	 background-color: #99f; 
	 padding-left: 4px; 
	 height: 24px; 
 } 
 nav ul li { 
	 display: inline; 
	 padding: 0px 20px 5px 10px; 
	 height: 24px; 
	 border-right: 1px solid #ccc; 
 } 

 nav ul li a { 
	 color: #006; 
	 text-decoration: none; 
	 font-size: 13px; 
	 font-weight: bold; 
 } 

 nav ul li a:hover { 
	 color: #fff; 
 }

接下来是 Article 区。这个区由 <article>标记定义，包含其自己的 <header>信息。<article>中的 <section>也包含它自己的<header>标记。参见清单 18。

清单 18. <article> 和 <section> 示例

 <article> 
     <header> 
          <h1> 
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a> 
          </h1> 
     </header> 
     <p> Primum non nocere ad vitam Paramus . . . </p> 
     <section> 
          <header> 
               <h1>This is the first section heading</h1> 
          </header> 
          <p>Scientia potentia est qua nocent docentp . . .> 
     </section>

清单 19 显示了呈现页面格式的 CSS3 标记。注意，paragraph、header和 section区的定义都是针对它们所在的 <article>标记定义的。这里定义的 <h1>标记使用了与为页面级 <h1>标记定义的 <h1>标记不同的格式。

清单 19. CSS3 示例 #3

 article > header h1 { 
	 font-size: 40px; 
	 float: left; 
	 margin-left: 14px; 
 } 

 article > header h1 a { 
	 color: #000090; 
	 text-decoration: none; 
 } 

 article > section header h1 { 
	 font-size: 20px; 
	 margin-left: 25px; 
 } 

 article p { 
	 clear: both; 
	 margin-top: 0px; 
	 margin-left: 50px; 
 }

<article>中包含的第二个 <section>标记包含与第一个 <section>相同的基本信息，但是这一次将使用 <aside>、<figure>、<menu>以及 <mark>标记。参见清单 20。

<aside>标记在这里用于显示不属于文本流部分的信息。<figure> 标记包含一个 Stonehenge 图形。这个 <section> 还包含 <menu>标记，您可以用来创建带有四个 Muse 名字的按钮。当单击其中一个按钮时，它将提供有关特定 Muse 的信息。<mark>标记在 <p>标记的内部使用，用于突出显示 veni、vidi、vici。

清单 20. <article> 和 <section> 示例

 <section> 
     <header> 
          <h1>Second section with mark, aside, menu & figure</h1> 
     </header> 
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p> 
     <aside> 
          <p>This is an aside that has multiple lines. . . .</p> 
     </aside> 
     <menu label="File"> 
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button> 
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia
          </button> 
          <button type="button" onClick="JavaScript:alert 
		                           ('Urania . . .')">Urania</button> 
          <button type="button" onClick="JavaScript:alert 
		                           ('Calliope . . .')">Calliope</button> 
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/> 
          <figcaption>Figure 1. Stonehenge</figcaption> 
     </figure> 
 </section>

本部分的 CSS3 包含了 <p>标记的新定义，该标记的宽度要比页面的宽度小一些。这种改变允许将旁白显示在右侧，而不会与文本相互重叠。清单 21 显示了标记。

清单 21. CSS3 示例 #4

 article p.next-to-aside { 
	 width: 500px; 
 } 

 article >  section figure { 
	 margin-left: 180px; 
	 margin-bottom: 30px; 
 } 

 article > section > menu {  
	 margin-left: 120px; 
 } 	  

 aside p {  
        position:relative; 
        left:0px; 
        top: -100px; 
		 z-index: 1; 
        width: 200px;  
    	 float: right; 
	    font-style: italic; 
       	 color: #99f; 
 }

视频部分元素

<article>的最后一部分是 video。示例视频是 ogg 格式，将在页面加载的同时自动地连续循环播放，同时为用户提供了暂停和播放控件。在许多新的实例中，ogg 视频采用扩展名 ogv（v表示视频），如清单 22 所示。<audio>标记的工作原理与此相同。

清单 22. <article> 和 <section> 示例

     <section> 
          <header> 
               <h1>This is a video section</h1> 
          </header> 
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop> 
                <div class="no-html5-video"><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p> 
                </div> 
          </video></p> 
     </section> 
 </article>

清单 23 显示了 video部分的 CSS3 定义。

清单 23. CSS3 示例 #5

 article > section video { 
	 height: 200px; 
	 margin-left: 180px; 
 } 
	
 article > section div.no-html5-video{ 
	 height: 20px; 
	 text-align: center; 
	 color: #000090; 
	 font-size: 13px; 
	 font-style: italic; 
	 font-weight: bold ; 
	 background-color: #99f; 
 }

页面的页脚和结束部分如清单 24 所示。

清单 24. <footer> 标记示例

          <footer> 
              <p>Copyright: 2011 Acme United. All rights reserved.</p> 
          </footer> 
     </body> 
 </html>

页脚的 CSS3 如清单 25 所示。

清单 25. CSS3 示例 #5

 footer p { 
	 text-align: center; 
	 font-size: 12px; 
	 color: #888; 
	 margin-top: 24px; 
 }

回页首

结束语

随着 Web 页面的完成，本系列的第 1 部分也就此结束。

本文的目标是介绍新的 HTML5 时代。

HTML5 不仅仅是对 HTML4 的版本升级：它代表一种全新的数字化通信方式。本系列的下一期文章将介绍如何对 HTML5 表单进行编码和格式化。