结构之美,html基础起航

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 黑莓、谷歌(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>标记包蕴除 < 结构之美,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地图