基础知识,页面布局

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 BlackBerry、谷歌(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
版本不可以在此时此刻使用的浏览器中播放,那么就足以尝尝选择 mp4版本。否者,突显一条音讯,通告客户音频不可用的由来。

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

html基础起航,html起航

废话不多说,直接上例子!

  工具善其事,必先利其器

  • 开辟记事本,输入以下示例代码:

 

亚洲必赢官网 4 1
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset=”big5″> 5 <title>背包客旅行札记</title> 6
</head> 7 <body> 8 <header id=”header”> 9
<hgroup> 10 <h1>背包客旅行札记</h1> 11
<h4>旅行是一种休息,而苏醒是为着走更长期的路</h4> 12
</hgroup> 13 <nav> 14 <ul> 15 <li><a
href=”#”>关于背包客</a></li> 16 <li
class=”current-item”><a href=”#”>国内旅游</a></li>
17 <li><a href=”#”>国外旅游</a></li> 18
<li><a href=”#”>与自家联络</a></li> 19
</ul> 20 </nav> 21 </header> 22 <article
id=”travel”> 23 <section> 24 <h2>Hello World!</h2>
25 <p>四季都是契合旅行的时节。</p> 26
<p>不必然要花大钱,做点功课和多点自信,就能享用旅游的美好。</p>
27 </section> 28 <aside> 29 <figure> 30 <img
src=”photo.png” alt=”眣盯” /> 31 </figure> 32 </aside> 33
</article> 34 <footer> 35 HTML5网页操练 36 </footer>
37 38 </body> 39 </html> View Code

 

  • 保存,注意后缀为htm
  • 预览HTML网页

  打开浏览器,将文件拖曳到浏览器内,就可以见见结果了,嚯嚯!

      示例网页如下:

 亚洲必赢官网 5


 

  那样如同还不够美丽,加上CSS语法会变成那样:

    CSS后续会介绍,那里先暂时略过……  

亚洲必赢官网 6

    代码仅共参考:

亚洲必赢官网 7 1
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset=”big5″> 5 <title>背包客旅行札记</title> 6
<style type=”text/css”> 7 article, aside, details, figcaption,
figure, footer, header, hgroup, menu, nav, section { display: block; } 8
html { 9 background-color: #F1F0DF; 10 } 11 body { 12 border: 3px solid
#660000; 13 background-color: #FFF; 14 font: 15px Helvetica,
“稬硁タ堵砰”, Sans-Serif; 15 margin: 20px auto; 16 padding: 5px 10px; 17
width: 750px; 18 } 19 a { 20 color: #996600; 21 text-decoration: none;
22 } 23 h1, h2, h4 { 24 margin: 0; 25 } 26 a:hover { 27 color: #cc3300;
28 } 29 #header { 30 margin-bottom: 15px; 31 } 32 #header hgroup h4 {
33 font-style: italic; 34 font-weight: normal; 35 margin-bottom: 18px;
36 text-indent: 10px; 37 } 38 #header nav { 39 border-bottom: 1px solid
#DDDCCC; 40 font-size: 16px; 41 } 42 #header nav ul { 43 overflow:
hidden; 44 padding: 0 0 5px 0; 45 margin: 0; 46 } 47 #header nav li {
48 float: left; 49 list-style: none; 50 padding: 0 5px; 51 } 52 #header
nav li.current-item a { 53 color: #765C07; 54 } 55 #travel { 56
overflow: hidden; 57 text-align: justify; 58 } 59 #travel section { 60
float: left; 61 width: 350px; 62 } 63 #travel aside { 64 margin-left:
400px; 65 } 66 #travel aside figure { 67 margin: 0; 68 } 69 footer { 70
margin: 15px 0 10px; 71 text-align: center; 72 } 73 </style> 74 75
<!–[if lte IE 8]> 76 <script
src=”;
77 <![endif]–> 78 79 </head> 80 81 <body> 82 83
<header id=”header”> 84 85 <hgroup> 86
<h1>背包客旅行札记</h1> 87
<h4>旅行是一种休息,而恢复是为了走更遥远的路</h4> 88
</hgroup> 89 90 <nav> 91 <ul> 92 <li><a
href=”#”>关于背包客</a></li> 93 <li
class=”current-item”><a href=”#”>国内旅游</a></li>
94 <li><a href=”#”>国外旅游</a></li> 95
<li><a href=”#”>与自身联络</a></li> 96
</ul> 97 </nav> 98 99 </header> 100 101 <article
id=”travel”> 102 103 <section> 104 <h2>Hello
World!</h2> 105 <p>四季都是顺应旅行的时节。</p> 106
<p>不必然要花大钱,做点功课和多点自信,就能享用旅游的光明。</p>
107 </section> 108 109 <aside> 110 <figure> 111
<img src=”photo.png” alt=”眣盯” /> 112 </figure> 113
</aside> 114 115 </article> 116 117 <footer> 118
HTML5网页训练 119 </footer> 120 121 </body> 122
</html> View Code

  小结:那只是一个简单易行的引例,目的在于开启自己的学习之旅,将答辩付诸于实践,当见到美美的页面突显在面前时,是一种巨大的满意啊!又该去看书了,先撤……

 

废话不多说,直接上例子!
工具善其事,必先利其器 打开记事本,输入以下示例代码: 1 ! DOCTYPE html 2
html 3 head 4…

 

作者: 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>定义补充或相关内容;

上学那些标签最好的方法自然就是试着使用它们。固然现在有那些现成的网页布局的模板可以方便的拿来用,可是对于初学者的话,自己完毕简单的页面布局相对是有须要的。那里通过一个简练的页面布局的例子,来显示上述标签的利用格局。

以身作则:模仿博客首页布局

完结如图2-1的网页结构,那是一个那多少个卓绝的博客页面:底部、底部、水平导航栏、侧边栏导航以及内容。

亚洲必赢官网 8

图2-1

在图2-1中已经观望,相应标签达成的区域用名称标注了出去,比如底部Header

在编制页面前,有须要说一下:页面元素由HTML5落到实处,而要素的突显效果是CSS3渲染的,CSS3的代码可以和HTML5的代码放在同一个文件,也得以是独立的文本,只要在HTML5文书里引用即可。提议最好各自是单身的公文,那样的便宜有:

1)符合单一职务规范:HTML5页面就负责管理元素,而CSS3文件只担负对相应HTML5文件展现效果的渲染,相互独立,互不相交。
2)下降页面的复杂度,便于维护:试想,当页面的要素数量增到很多的时候,同时在一个页面里保管元素和因素的来得属性,可读性是该有多差,后期的维护会很蛋疼。
3)加速浏览器的加载速度:第2)点的其它一个利益,不难的页面自然加载更快。
理所当然,假设就是习惯HTML5+CSS3坐落一个文件里,也未尝不可,那里也只是指出。
下边来具体落成图2-1。
分为两个部分:1)HTML5文本;2)CSS3文件
一.HTML5部分
1.HTML5的文档注解
新建index.html文件,若是用的网页编写工具已经支撑HTML5文件类型,那么,应该转变如下的HTML5模板:
 1 <!DOCTYPE html>
 2 <html lang=”en-US”>
 3 <head>
 4 <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
 5 <title>Layout TEST</title>
 6 </head>
 7
 8 <body>
 9 </body>
10 </html>
 
只要网页编写工具暂时不协助HTML5也没提到,自己写这几行代码也很粗略。
说明:第一行:<!DOCTYPE
html>是HTML5对文档类型的简化,化繁为简;(文档类型的成效:验证器按照它来判定该选拔何种规则去印证代码;强制浏览器以规范格局渲染页面)
2.头部
<header>标签已毕
<header id=”page_header”>
    <h1>Header</h1>
</header>
 
表达:1)header无法喝h1,h2,h3这一个标题混为一谈。<header>可以分包从集团logo到搜索框在内的丰硕多彩的始末。例子中只含有标题。
2)同一个页面可以涵盖多少个<header>元素。每个独立的区块或文章都可以蕴含自己的<header>.所以示例中为<header>添加唯一标示id属性,便于CSS3中灵活的渲染。在CSS文件里谋面到id标示的效能。
3.尾部
<footer>标签落成
<footer id=”page_footer”>
    <h2>Footer</h2>
</footer>
 
申明:地点是页面或者区块的底部,用法和<header>基本一样,也会蕴藏其余因素,那里也指定了id.
4.导航
<nav>标签完成
<nav>
    <ul>
        <li><a href=”#”>Home</a></li>
        <li><a href=”#”>One</a></li>
        <li><a href=”#”>Two</a></li>
        <li><a href=”#”>Three</a></li>
    </ul>
</nav>
 
证实:导航的要害对于一个网页根本,急忙方便的导航是留下访客所不可不的。
1)可以被含有在<header>或<footer>或者其余区块中,一个页面可以有七个导航。
2)导航一般须要CSS来渲染,随后将汇合到CSS的渲染。
5.区块和文章
<section>和<article>标签达成
<section id=”posts”>
        /*可以涵盖五个< article>*/
    <article class=”post”>
         /*article的内容*/
        </article>
        <article class=”post”>
         /*article的内容*/
        </article>
</section>
 
<section>元素将页面的始末合理归类,合理布局。
下边是<article>的形似内容
<article class=”post”>
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I’d be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>
 
可以看出它可以分包很多元素。
6.独白和侧面栏
<aside>标签落成独白,侧边栏则由<section>完结。
<aside>是为主内容添的增大音讯,入引言,图片等
<aside>
    <p>sth. in aside
    </p>
</aside>
 
<aside>一般加在<article>中应用
<article class=”post”>
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I’d be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>
 
侧边栏,不是对白!看做是右面的一个区域,包涵链接,用<section>和<nav>落成即可。
<section id=”sidebar”>
    <nav>
    <ul>
          <li><a href=”2012/04″>April
2012</a></li>
          <li><a href=”2012/03″>March
2012</a></li>
          <li><a href=”2012/02″>February
2012</a></li>
          <li><a href=”2012/01″>January
2012</a></li>
    </ul>
    </nav>
</section>
 
到那里,每种标签的应用就是这么了,上边是HTML5的完整代码index.html文件
  View Code
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<title>Layout TEST</title>
</head>
 
<body>
    <h2>body</h2>
    <header id=”page_header”>
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a href=”#”>Home</a></li>
                <li><a href=”#”>One</a></li>
                <li><a href=”#”>Two</a></li>
                <li><a
href=”#”>Three</a></li>
            </ul>
        </nav>
    </header>
    <section id=”posts”>
        <h2>Section</h2>
        <article class=”post”>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
亚洲必赢官网 ,            </aside>
            <p>Without you?I’d be a soul without a purpose.
                        </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
        <article class=”post”>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I’d be a soul without a purpose.
</p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
    </section>
 
    <section id=”sidebar”>
        <h2>Section</h2>
        <header>
            <h2>Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a href=”2012/04″>April
2012</a></li>
                <li><a href=”2012/03″>March
2012</a></li>
                <li><a href=”2012/02″>February
2012</a></li>
                <li><a href=”2012/01″>January
2012</a></li>
            </ul>
        </nav>
    </section>
 
    <footer id=”page_footer”>
        <h2>Footer</h2>
    </footer>
 
</body>
</html>
 
 
二.CSS3部分
对此CSS文件,最好可以依照HTML文件的树结构,对应到相应的要素,有协会有层次的拓展元素属性的渲染。那样既可以不遗漏元素,又便利寻找修改。当然根据个体的习惯来定就好。
CSS3的习性定义尤其丰裕,那里不再赘述,网上有CSS3参考手册,用的时候查一查就好。更或者,连查都懒得查,还有专门的CSS3控件代码生成工具和网站,例如
此地直接贴出CSS3代码style.css文件
@charset “utf-8”;
/* CSS Document */
body { /*整整页面的品质设定*/
    background-color: #CCCCCC; /*背景色*/
    font-family: Geneva, sans-serif; /*可用字体*/
    margin: 10px auto; /*页边空白*/
    max-width: 800px;
    border: solid; /*边缘立体*/
    border-color: #FFFFFF; /*边缘颜色*/
}
 
h2 { /*设定整个body内的h2的共同特性*/
    text-align: center; /*文件居中*/
}
 
header { /*整个body页面的header适用*/
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
}
 
article { /*整个body页面的article适用*/
    background-color: #eee;
}
 
p { /*整个body页面的p适用*/
    color: #F36;
}
 
nav,article,aside { /*联机特性*/
    margin: 10px;
    padding: 10px;
    display: block;
}
 
header#page_header nav { /*header#page_header nav的属性*/
    list-style: none;
    margin: 0;
    padding: 0;
}
 
header#page_header nav ul li { /*header#page_header nav ul
li属性*/
    padding: 0;
    margin: 0 20px 0 0;
    display: inline;
}
 
section#posts { /*#posts 的section属性*/
    display: block;
    float: left;
    width: 70%;
    height: auto;
    background-color: #F69;
}
 
section#posts article footer { /*section#posts article
footer属性*/
    background-color: #039;
    clear: both;
    height: 50px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
 
section#posts aside { /*section#posts aside属性*/
    background-color: #069;
    display: block;
    float: right;
    width: 35%;
    margin-left: 5%;
    font-size: 20px;
    line-height: 40px;
}
 
section#sidebar { /*section#sidebar属性*/
    background-color: #eee;
    display: block;
    float: right;
    width: 25%;
    height: auto;
    background-color: #699;
    margin-right: 15px;
}
 
footer#page_footer { /*footer#page_footer属性*/
    display: block;
    clear: both;
    width: 100%;
    margin-top: 15px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    background-color: #06C;
}
 
相信无需多解释,一看就能明白。
想要让页面的呈现更精粹绚丽,CSS3优良看看啊。
局地HTML5+CSS3的超炫网站:

No.1 HTML5 Awesome

 

 

No.2 HTML5 Showcase

 

 

No.3 HTML5 Lab

 

 

No.4 HTML5 Gallery

 

 

No.5 HTML5Beauty

当前来看,HTML5的简便但强硬,CSS3的增进,二者组合能做出什么的惊人的效应的确很令人梦想。
后续攻读!
 

作者 Little Thinker

HTML5的语义化标签以及品质,可以让开发者格外有利于地落到实处清晰的web页面布局,加上CSS3的功能渲染,快捷建立丰富灵活…

网站地图xml地图