HTML5引入了些新元素来定义页面结构。
新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。
- 这些元素有：
- <header> 元素用于表示页眉
- <nav> 元素用于表示导航
- <section> 元素用于表示相关信息集中到一块
- <article> 元素用于表示文章
- <aside>元素用于表示附属信息，如最新文章列表，历史存档
- <footer> 元素用于表示页脚
其实，所有的元素本质上都是<div>元素。
只不过这些特殊的元素，如上面的HTML5布局元素，在浏览器渲染时添加了w3c事先约定的CSS规则。
HTML5布局新元素经典用法
下面的示例代码演示了HTML布局新元素的用法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>HTML5 布局示例</
title
>
<
style
type
=
"text/css"
>
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;}
header {
height: 160px;
}
h1 {
color:#000;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
color: #ffffff;}
nav li a:hover, nav li a.current {
color: #000000;}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;}
figure {
float: left;
width: 250px;
height: 240px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;}
footer {
font-size: 80%;
text-align:center;
padding: 7px 0px 0px 20px;}
</
style
>
</
head
>
<
body
>
<
div
class
=
"wrapper"
>
<
header
>
<
h1
>网站标题</
h1
>
<
nav
>
<
ul
>
<
li
><
a
href
=
""
class
=
"current"
>首页</
a
></
li
>
<
li
><
a
href
=
""
>产品</
a
></
li
>
<
li
><
a
href
=
""
>服务</
a
></
li
>
<
li
><
a
href
=
""
>关于我们</
a
></
li
>
<
li
><
a
href
=
""
>联系我们</
a
></
li
>
</
ul
>
</
nav
>
</
header
>
<
section
class
=
"courses"
>
<
article
>
<
figure
>
<
figcaption
>Java程序设计教程</
figcaption
>
</
figure
>
<
hgroup
>
<
h2
>Java程序设计教程</
h2
>
<
h3
>面向对象程序设计</
h3
>
</
hgroup
>
<
p
>Java是一种广泛使用的计算机程序设计语言，拥有跨平台、面向对象、泛型程序设计的特
性，广泛应用于企业级Web应用开发和移动应用开发。</
p
>
</
article
>
<
article
>
<
figure
>
<
figcaption
>HTML5教程</
figcaption
>
</
figure
>
<
hgroup
>
<
h2
>HTML5教程</
h2
>
<
h3
>HTML5 + CSS3 + Javascript</
h3
>
</
hgroup
>
<
p
>HTML5 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01
和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</
p
>
</
article
>
</
section
>
<
aside
>
<
section
class
=
"popular-recipes"
>
<
h2
>火爆课程</
h2
>
</
section
>
<
section
class
=
"contact-details"
>
<
h2
>联系我们</
h2
>
<
p
>北京市<
br
/>
钟声胡同18号</
p
>
</
section
>
</
aside
>
<
footer
>
© 2019 利永贞网
</
footer
>
</
div
>
<!-- .wrapper -->
</
body
>
</
html
>
|
