HTML 5的革新:结构之美

图片 3

HTML5 基础知识 – 第 1 部分

2012/06/23 · HTML5 ·
HTML5

来源:IBM developerworks

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

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 页面规划

图片 1

在创建页面的过程中,我使用了 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>; 标记示例

XHTML

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

1
2
3
4
5
<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> 标记示例

XHTML

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

1
2
3
4
5
6
7
<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> 标记示例

XHTML

<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>

1
2
3
4
5
6
7
8
<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>标记的用法示例。

图像元素

< section>和 < article>标记以及 < header>和 <
footer>标记可以包含 <
figure>标记。您可以使用该标记包含图像、图表和照片。
< figure>标记可以包含 < figcaption>,后者包含 <
figure>标记中的图形的说明文字,允许您输入一段描述来将图形与内容更紧密地联系在一起。清单
5 提供了 < figure>和 < figcaption>标记结构的示例。

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

XHTML

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

1
2
3
4
< 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> 标记示例

XHTML

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

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

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

清单 7 提供了

清单 7.

XHTML

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

1
2
3
< 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> 标记示例

XHTML

< 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. < /audio>

1
2
3
4
5
< 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.
< /audio>

 

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

清单 9. < embed> 标记示例

XHTML

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

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

除了 src和 type属性外,标记还包含 height 和 width属性。

Aside 区

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

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

清单 10.标记示例

XHTML

< 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>

1
2
3
4
5
< 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> 标记示例

XHTML

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

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

构造页面

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

图 2. Acme United Web 页面

图片 2

现在,让我们开始构造页面吧。首先,让我们先关注一下 < !doctype>。在
HTML5 中,对 进行了简化:您只需要记住
html即可。这不仅简化了标记的输入,而且该标记在以后也不需要进行修改。注意,它不是
html5,而是 html。不管 HTML 以后会有多少个版本,< !doctype>只能是
html。
< html>标记包含除 < !doctype>以外的所有其他 HTML
元素。所有这些元素都应当被嵌套到 < html>和 <
/html>标记之间。参见清单 12。

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

XHTML

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

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

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

●< base>

●< link>

●< meta>

●< script>

●< style>

●< title>

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

清单 13. 标记示例

XHTML

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

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

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

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

XHTML

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

1
2
3
4
5
6
7
< body >
< header>
< hgroup>
< h1>Acme United< /h1>
< h2>A Simple HTML5 Example< /h2>
< /hgroup>
< /header>

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

清单 15. CSS3 示例 #1

CSS

* { 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
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> 示例

XHTML

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

1
2
3
4
5
6
7
< 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

CSS

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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> 示例

XHTML

< 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
< 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

XHTML

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

中包含的第二个 < section>标记包含与第一个 <
section>相同的基本信息,但是这一次将使用 < aside>、<
figure>、< menu>以及 < mark>标记。参见清单 20。<
aside>标记在这里用于显示不属于文本流部分的信息。< figure>
标记包含一个 Stonehenge 图形。这个 < section> 还包含 <
menu>标记,您可以用来创建带有四个 Muse
名字的按钮。当单击其中一个按钮时,它将提供有关特定 Muse 的信息。<
mark>标记在< /mark>标记的内部使用,用于突出显示
veni、vidi、vici。清单 20. < article> 和 < section> 示例<
section>

XHTML

< 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>
|——-10——–20——–30——–40——–50——–60——–70——–80——–9|
|——– XML error: The previous line is longer than the max of 90
characters ———| < button type=”button”
onClick=”JavaScript:alert (‘Urania . . .’)”>Urania < button
type=”button” onClick=”JavaScript:alert (‘Calliope . . .’)”>Calliope
< /menu> < figure>< img src=”stonehenge.jpg”
alt=”Stonehenge” width=”200″ height=”131″/> < figcaption>Figure

  1. Stonehenge< /figcaption> < /figure> < /section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< 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>
|——-10——–20——–30——–40——–50——–60——–70——–80——–9|
|——– XML error: The previous line is longer than the max of 90 characters ———|
< button type="button" onClick="JavaScript:alert (‘Urania . . .’)">Urania
< button type="button" onClick="JavaScript:alert (‘Calliope . . .’)">Calliope
< /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

 

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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> 示例

XHTML

< section> < header> < h1>This is a video section<
/h1> < /header> < p>< video
src=”” 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>

1
2
3
4
5
6
7
8
9
10
11
< 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

 

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
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> 标记示例

XHTML

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

1
2
3
4
5
< footer>
< p>Copyright: 2011 Acme United. All rights reserved.< /p>
< /footer>
< /body>
< /html>

页脚的 CSS3 如清单 25 所示。

清单 25. CSS3 示例 #5

CSS

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

1
2
3
4
5
6
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}

 

结束语

随着 Web 页面的完成,本系列的第 1 部分也就此结束。本文的目标是介绍新的
HTML5 时代。HTML5 不仅仅是对 HTML4
的版本升级:它代表一种全新的数字化通信方式。通过结合使用 CSS3 和
JavaScript,HTML5
为开发人员提供了他们所需的全部内容。如果您愿意了解庞大的 HTML5
可以为您提供哪些帮助,您将加入日益增长的 HTML5 多媒体 Web
设计师和开发人员的队伍中。本系列的下一期文章将介绍如何对 HTML5
表单进行编码和格式化。

 

赞 3 收藏
评论

图片 3

 

作者: Mr.Think 

  前言HTML 5如同一场革命,正在Web2.0后时代轰轰烈烈的进行着。HTML
5是什么,无须我在这里赘述了。对于HTML
5的革新,按我的理解,可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之,HTML
5让人机交互,人网交互变得更加舒适,贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台,并一统各在平台阵营的标准,才是HTML
5革命的初衷。 本文,我就抛砖引玉,阐述HTML
5的革新之一:语义更明确简洁的结构。 从”头”说起
一个标准的XHTML头部代码应该是这样:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/>
</head>

  你能记住吗?你会去死记硬背吗?当然不会!我们只需要机械的复制粘贴即可。
再看看一个标准的HTML 5头部是如何的:

<!doctype html>
<meta charset=gb2312>

  孰繁孰简,就不用我说了。是的,HTML
5的头部可以如此简单,可以轻易的记住!并且,可以忽略大小写,引号以及最后一个尖括号前的反斜线。
为什么可以如此松散?其实,如果把XHTML当成text/html发送,浏览器一样可以很好的解析,浏览器并不在乎代码的语法。所以,HTML
5是形而上的,它可能会破坏原有的一些标准,但仍可在浏览器中很好的表现。
当然,为了团队协助与后续维护的方便,我们还是应该统一一种你喜欢的风格的写法,比如:

<!doctype html>
<html>
<head>
<meta charset=”gb2312″/>

</head>
<body>

</body>
</html>

  另外,HTML
5虽然目前并不为所有浏览器所支持,但这个能省去100多字节(对于日PV百万级以上的站点,能省下不少的流量哦)的头部已可以完美的兼容了。如果你对浏览器解析模式有研究的话,你应该知道,页面在没有定义doctype的情况下会触发怪异模式,而只要定义了<!doctype
html>浏览器就可以在标准模式下解析页面,而不需要指定某个类型的DTD。
新的语义化标签体系
语义化编码是一个合格前端Developer必备的技能,但随着网页的日渐丰富化,仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说:”要有光!”便有了光。于是,HTML
5提供了一系列新的标签及相应属性,以反应现代网站典型语义。实践出真理。还是写一个例子吧:

<div id=”header”>
<div class=”hgroup”>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</div>
<div id=”nav”>
<ul>
<li>HTML
5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<!–//header end–>
<div id=”left”>
<div class=”article”>
<p>这是一篇讲述HTML 5新结构标签的文章。</p>
</div>
<div class=”article”>
<p>这还是一篇讲述HTML
5新结构标签的文章。</p>
</div>
</div>
<!–//left end–>
<div id=”aside”>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</div>
<!–//side end–>
<div id=”footer”>
页面的底部
</div>
<!–//footer end–>

  上面是一个简单的博客页面部分HTML,由头部、文章展示区、右侧栏、底部组成。编码整洁,也符合XHTML的语义化,即便是在HTML
5中也可以很好的表现。但是对浏览器来说,这就是一段没有区分开权重的代码,而不是一个让机器也能读懂语义的标签来定义相应的区块。比如,标准浏览器(比如Firefox、Chroome甚至新版的IE)都有一个快捷键可以带引客户直接跳转到页面的导航,但问题是所有的区块都是用DIV定义,并且DIV的ID值是同开发者定的,所以,浏览器并不知道哪个应该是导航链接所在区块。HTML
5新标签的出现,正好弥补了这一缺憾。那么,上面的代码,换成HTML
5就可以这样写:

<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
<nav>
<ul>
<li>HTML
5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</header>
<div id=”left”>
<article>
<p>这是一篇讲述HTML 5新结构标签的文章。</p>
</article>
<article>
<p>这还是一篇讲述HTML
5新结构标签的文章。</p>
</article>
</div>
<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>
<footer>
网页底部
</footer>

  原来,HTML的页面结构可以如此之美,不用注释也能一目了然。对于浏览器,找到对应的区块也不再会茫然无措。
如何用HTML 5新标签结构化元素 通过上面的示例,我们了解到HTML
5的新标签对结构化的革新,但切换到实际使用中,该如何恰当的使用它们呢?我想这也是很多HTML
5学习者想问一个问题。如同XHTML语义化一样,HTML
5语义化标签的使用也应该遵循:每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签,以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。比如header标签一般是页面的第一个区块元素(header标签也可用于类型的头部元素中,比如文章区块的标题),包含的了页面的主题信息;nav标签一般用于包裹导航信息;footer一般用来包裹页面底部信息;等等。
下面是我参考HTML
5手册列出的结构类常用新标签的语义解释及使用指引:<header>标签
手册释义:定义 section 或 document 的页眉。
使用指引:一般用来包含页面头部,也可用于其他区域头部,比如article头部:

<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>

  <hgroup>标签手册释义:用于对网页或区段(section)的标题进行组合。
使用指引:用于标题类的组合,比如文章的标题与副标题:

<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML
5的革新</h2>
</hgroup>

  <nav>标签手册释义:定义导航链接的部分。
使用指引:用于定义页面的导航部分:

<nav>
<ul>
<li>HTML
5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>

  <aside>标签定义 article 以外的内容。aside 的内容应该与
article 的内容相关。
使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏:

<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>

  <section>标签
手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引:用于成节的内容,会在文档流中开始一个新的节:

<section>
<h1>section是什么?</h1>
<h2>一个新的章节</h2>
<article>
<h2>关于section</h1>
<p>section的介绍</p>

</article>
</section>

  <footer>标签手册释义:定义 section 或 document
的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
使用指引:一般用来包裹整个页面通用底部,也可用于其他区域底部,比如article底部:

<footer>
COPYRIGHT@Mr.Think
</footer>

  <article>标签手册释义:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自
blog 的文本,或者是来自论坛的文 本。亦或是来自其他外部源内容。
使用指引:顾名思义,一般用于文章区块:

<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML
5的革新</h2>
</hgroup>
<time datetime=”2011-03-20″>2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>

  <figure>标签手册释义:用于对元素进行组合。
使用指引:多用于图片与图片描述组合:

<figure>
<img src=”img.gif”
alt=”figure标签” title=”figure标签”/>
<figcaption>这儿是图片的描述信息</figcaption>
</figure>

  <menu>标签手册释义:定义菜单列表。当希望列出表单控件时使用该标签。
使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项:

<menu>
<li>HTML
5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>

  HTML 5的其他新标签,就不此一一解释了,请自行查询一下手册。
其实,这些东西,如同XHTML的div、h1、inpu等标签一样,只要平时多加实践,运用自如也是轻而易举的。
关于兼容性
如果你是一个喜欢研究关注前端的人,你应该知道淘宝的页面结构中已大量用到了HTML
5新标签。所以,我想说的是只要敢于尝试,兼容性不是问题,兼容的方法,网上有很多(本文是讲结构的,哈~)。
后话
任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。
孙文曾说,欲经文明之幸福,不得不经文明之痛苦。人类的革命如此,HTML
5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。
如此,本文从页面的doctype说起,到用HTML
5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML
5的结构性新标签有了一个新的认知,如果你有兴趣,那就打开你的IDE,写上一段由HTML
5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧!

HTML5新元素及其特性

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

本次学习HTML5的新标签元素有:

<header>定义页面或区段的头部;

<footer>定义页面或区段的尾部;

<nav>定义页面或区段的导航区域;

<section>页面的逻辑区域或内容组合;

<article>定义正文或一篇完整的内容;

<aside>定义补充或相关内容;

学习这些标签最好的方法当然就是试着使用它们。虽然现在有很多现成的网页布局的模板可以方便的拿来用,但是对于初学者来说,自己实现简单的页面布局绝对是有必要的。这里通过一个简单的页面布局的例子,来展示上述标签的使用方法。

示例:模仿博客首页布局

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图