效果展示
案例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>