HTML5引入了些新元素來定義頁面結構。css
新元素用於替換以前的<div>元素（在傳統DIV約定俗成的基礎進行演進）。html
- 這些元素有：
- <header> 元素用於表示頁眉
- <nav> 元素用於表示導航
- <section> 元素用於表示相關信息集中到一塊
- <article> 元素用於表示文章
- <aside>元素用於表示附屬信息，如最新文章列表，歷史存檔
- <footer> 元素用於表示頁腳
其實，全部的元素本質上都是<div>元素。java
只不過這些特殊的元素，如上面的HTML5佈局元素，在瀏覽器渲染時添加了w3c事先約定的CSS規則。ajax
HTML5佈局新元素經典用法
下面的示例代碼演示了HTML佈局新元素的用法sql
|
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
>
|