效果展示
案例06：實現圖文排版
涉及到圖文排版的時候，圖片總是以圖片自身的寬高顯示，如果想讓圖片自動適應上級元素的寬高，則需要給圖片添加width=“100%”。
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖文排版</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5" width="80%" align="center">
<caption><h2>圖文排版</h2></caption>
<tr align="center">
<td width="20%" colspan="3">
<img src="img/1-1.jpg" width="100%" />
</td>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/1-2.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/1-3.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/1-4.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/1-5.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
時間管理是而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"40"</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/2-1.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/2-2.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/2-3.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/2-4.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/2-5.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"100%"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是國家而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是國家而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
時間管理是國家而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是國家而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"20%"</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span>></span>
理是國家而根據彭
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/189-eye.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>123
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/188-target.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>456
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"img/184-bar-chart.png"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"15"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"absmiddle"</span> /></span>789
<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-title">table</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
效果展示
HTML 框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
HTML中有很多框架標簽，但是大多數都棄用了，沿用至今的就是<iframe>
<iframe>標簽
<iframe>語法:
<iframe src="URL"></iframe>
<iframe>屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left |right| top| middle |bottom | |
| scrolling | yes| no |auto | <iframe> 中顯示滾動條。 |
| height | 像素 | 規定 <iframe> 的高度。 |
| name | name | 規定 <iframe>的名稱。 |
| src | URL | 規定在 <iframe> 中顯示的文檔的 URL。 |
| width | 像素 | 規定 <iframe>的寬度。 |
案例07
<iframe>可以顯示一個目標鏈接的頁面，目標鏈接的屬性必須使用<iframe>的name屬性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<th width="15%">
<a href="https://www.baidu.com" target="myframe">百度</a>
<hr/>
<a href="https://www.tmall.com/" target="myframe">天貓</a>
<hr/>
<a href="https://www.sina.com.cn/" target="myframe">新浪</a>
</th>
<th width="85%">
<iframe src="https://www.aliyun.com/" name="myframe" width="100%" height="600"></iframe>
</th>
</tr>
</table>
</body>
</html>
效果展示
HTML 列表
HTML列表有三種：**無序列表**、**有序列表**、**自定義列表**
無序列表
無序列表使用兩個標簽，組成一個整體使用。
| 標簽 | 描述 |
|---|---|
<ul> |
無序列表 |
<li> |
有序列表和無序列表的一個列表項 |
無序列表有三種類型，使用type屬性來設置列表的顯示符號
| 屬性 | 描述 |
|---|---|
type="circle" |
空心圓 |
type="disc" |
實心圓 |
type="square" |
實心方塊 |
示例代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無序列表</title>
</head>
<body>
<ul type="circle">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ul type="disc">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ul type="square">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</body>
</html>
效果展示
案例08
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無序列表</title>
</head>
<body>
<h4>無序列表（默認:type="disc"）</h4>
<ul>
<li>PHP</li>
<li>HTML</li>
</ul>
<h4>無序列表（type="circle"）</h4>
<ul type="circle">
<li>PHP</li>
<li>HTML</li>
</ul>
<h4>無序列表（type="square"）</h4>
<ul type="square">
<li>PHP</li>
<li>HTML</li>
</ul>
</body>
</html>
效果展示
有序列表
有序列表使用兩個標簽，組成一個整體使用。
| 標簽 | 描述 |
|---|---|
<ol> |
有序列表 |
<li> |
有序列表和無序列表的一個列表項 |
有序列表有五種：
| 屬性 | 描述 |
|---|---|
type="1" |
數字序號 |
type="a" |
有小寫字母序號 |
type="A" |
大寫字母序號 |
type="i" |
小寫羅馬序號 |
type="I" |
大寫羅馬序號 |
示例代碼
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol type="1">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="i">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="I">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
</html>
效果展示
案例09
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有無序列表</title>
</head>
<body>
<h4>有序列表（默認:type="1"）</h4>
<ol type="1">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認:type="a"）</h4>
<ol type="a">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認:type="A"）</h4>
<ol type="A">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認:type="i"）</h4>
<ol type="i">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認:type="I"）</h4>
<ol type="I">
<li>PHP</li>
<li>HTML</li>
</ol>
</body>
</html>
效果展示
自定義列表
| 標簽 | 描述 |
|---|---|
<dl> |
自定義列表 |
<dt> |
自定義列表的標題 |
<dd> |
自定義列表的內容 |
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定義列表</title>
</head>
<body>
<dl>
<dt>自定義列表</dt>
<dd>自定義列表的內容（前面由固定長度的間距）</dd>
</dl>
</body>
</html>
效果展示
案例10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定義列表</title>
</head>
<body>
<h4>自定義列表</h4>
<dl>
<dt>自定義列表標題1</dt>
<dd>自定義列表選項</dd>
<dt>自定義列表標題2</dt>
<dd>自定義列表選項</dd>
</dl>
</body>
</html>
效果展示
列表嵌套
列表和其他標簽一樣，可以想和嵌套，並且可以實現各種不同的效果
案例11
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表嵌套</title>
</head>
<body>
<dl>
<dt>HTML列表</dt>
<dd>知識點梳理</dd>
<dd>
<ol>
<li>
無需列表
<ul type="circle">
<li>空心圓circle</li>
</ul>
<ul type="disc">
<li>實心圓disc</li>
</ul>
<ul type="square">
<li>實心方塊square</li>
</ul>
</li>
<li>
有需列表
<ol type="1">
<li>數字：1</li>
</ol>
<ol type="a">
<li>小寫字母a：a</li>
</ol>
<ol type="A">
<li>大寫字母a：A</li>
</ol>
<ol type="i">
<li>小寫字母a：i</li>
</ol>
<ol type="I">
<li>大寫字母a：I</li>
</ol>
</li>
<li>
自定義列表
<dl>
<dt>自定義列表標題</dt>
<dd>自定義列表選項</dd>
</dl>
</li>
</ol>
</dd>
</dl>
</body>
</html>
效果展示
作業
制作方塊導航器
使用table實現如下企業主頁
實現如下效果，整體寬度80%，居中顯示。
實現如下效果
</article>