HTML5 是一种专门用于组织 Web 内容的语言

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,允许顾客端本地存款和储蓄

●画布和录制,不须要安装第三方插件就能够加多图形和录像

●吉优location API 标准,使用智能手提式有线电电话飞机地方置成效来统后生可畏移动云服务和应用程序

●智能表单收缩了下载 JavaScript
代码的急需,在运动设备和云服务器之间完结了更平价的通讯

HTML5 成立了更进一层吸引人的顾客体验:使用 HTML5
设计的页面能够提供与桌面应用程序相仿的体验。HTML5 还将 API
成效和浏览器结合在同步,提供了拉长的多平台开拓。通过运用
HTML5,开拓人士能够提供在不一样平台之间切换的今世应用程序体验。

HTML5 实际上是意气风发多级立异的表示。HTML5 提供了新的号子、新的方式,并透过与
CSS3 和 JavaScript
的相互作用产生了一个通用的支出框架。那是以客商端为骨干的应用程序管理的核心。除了将
HTML5 本事的技能和艺术布置到桌面外,还足以在特色充裕的 Web
移出手提式有线电话机浏览器中完成

HTML5 —随着 Apple 魅族、Google Android 和平运动行 Palm webOS
的手机的盛行和广泛,那已是一个不独有抓实的商海。

HTML5 的八个重点效率正是信息映射
—或内容梗塞(假如你喜欢的话卡塔尔—能够扭转越发便于通晓的流程。随着 HTML5 在
Web 管理方面包车型客车地点特别首要,您将见到它在规划和付出方面是多么地迅速。

HTML5
标记着更有效的文本等级的语义流程,以至对表单创设和接收的更高档别的决定。全体这几个特点和
HTML5
立异的成都百货上千其余优点是使它产生十分重要范式的根本原因。多数种经营贸的或别的代理协会(尽管这个团体之中不菲的重视代理行为并非消息管理和通讯卡塔尔国都或多或少地反映到了这种增加的形式开采中。

HTML5 的中标并非出于有时。相反,它的手艺和艺术才是它拿走成功的后台。

页面规划

您将成立二个简约的 Web 页面。在此个进度中,小编将商讨 HTML5中引入的多少个新标识。要创设两个管用的、高效的 Web
页面,必须对页面实行统筹,考虑到供给成立的享有的零零部件。

创制的页面将动用如图 1 所示的高端级设计。页面设计带有贰个 Header 区、三个Navigation 区、叁个 Article 区(富含四个部分卡塔 尔(英语:State of Qatar)、八个 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>标志来创建那一个区域,该标志定义可独自于其余页面内容使用的剧情。比方,若是想要创制三个PRADOSS 提要,能够应用 < 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
版本不也许在时下利用的浏览器中播放,那么就能够尝试运用 DVD版本。否者,呈现一条音讯,布告客户音频不可用的因由。

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

相关文章