-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-basic.html
239 lines (225 loc) · 8.34 KB
/
html-basic.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
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="" />
<script src=""></script>
</head>
<body>
<!-- 存放Lorem假文和假文标题-->
<header>
<hgroup class="Lorem">
<h1>Lorem.</h1>
<h2>Lorem ipsum.</h2>
<h3>Lorem ipsum dolor.</h3>
</hgroup>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dignissimos, eum et blanditiis
corporis,
ipsa animi explicabo ducimus ab nobis, alias autem reiciendis. Placeat,adipisicing elitadipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quaerat sint commodi est itaque vero,
incidunt,quisquam obcaecati iusto minus inventore voluptatum. Consequuntur, at sequi ut nihil fugit amet
possimus.</p>
</header>
<!--a标签的练习-->
<div class="label-a">
<a href="www.jd.com">在新窗口打开京东</a>
<a href="mailto:xieranmaya@qq.com">点击给我发邮件</a>
<a href="#bottom">跳转本页底部</a>
<a href="https://drscdn.500px.org/photo/229389427/m%3D1170/v2?user_id=7012987&webp=true&sig=196fa0c161aa562478d08571764872f7d69a346c3c0b2e12aa00e2c6414eb28b"
download="grapes.jpg">点我可以下载一个文件</a>
</div>
<!--img标签练习-->
<div class="label-img">
<img width="200px" height="200px" src="https://drscdn.500px.org/photo/229389427/m%3D1170/v2?user_id=7012987&webp=true&sig=196fa0c161aa562478d08571764872f7d69a346c3c0b2e12aa00e2c6414eb28b"
alt="grapes">
</div>
<hr>
<hr>
<!--marquee是屏幕水平滚动，默认从右往左-->
<div class="marquee-em">
<marquee class="no-longer-use-marquee" behavior="" direction="">飘~~~</marquee>
<!--强调只有strong和em，strong强调更重，b和i仅仅是加粗和斜体-->
<p>
<i>这几种强调</i><b>有什么区别呢？</b><u>这个呢 </u><em>这个呢?</em>
<br>
<!--这段注释需要出现在页面里面-->
</p>
</div>
<div class="comment-code">
<!-- HTML注释该这样写?-->
<p>HTML注释怎么写？</p>
<p>下面是一段JavaScript代码，最适合用何种标签表示呢</p>
<pre>
function a(){
return 8;
}
</pre>
</div>
<hr>
<!--无序表与有序表练习-->
<div class="grade">
<ul>
<li>小学</li>
<ol>
<li>一年级</li>
<ol>
<li>上学期</li>
<li>下学期</li>
</ol>
<li>二年级</li>
<li>三年级</li>
</ol>
<li>中学</li>
<li>大学</li>
</ul>
</div>
<hr>
<!--基本没怎么见过，也不会再使用的标签的看看-->
<div class="school-class">
<dl>
<dt>班级</dt>
<dd>三年二班</dd>
<dt>老师</dt>
<dd>张老师</dd>
<dd>李老师</dd>
<dd>王老师</dd>
<dt>学生</dt>
<dd>小明</dd>
<dd>豆豆</dd>
</dl>
</div>
<hr>
<form action="www.google.com/search" target="_blank">
<h2>Google搜索</h2>
<input type="text" placeholder="请输入想要搜索的内容">
<input type="submit" value="在新窗口打开搜索结果">
</form>
<div class="person-message">
<p>个人信息调查表</p>
<dl>
<dt>性别</dt>
<dd>
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
</dd>
<dt>年龄</dt>
<dd>
<select name="age">
<option selected hidden>请选择</option>
<optgroup label="少年">
<option>1-6岁</option>
<option>6-12岁</option>
</optgroup>
<optgroup label="青年">
<option>13-15岁</option>
<option>16-18岁</option>
</optgroup>
<optgroup label="壮年">
<option>18-22岁</option>
<option>22到30岁</option>
</optgroup>
</select>
</dd>
<dt>生日</dt>
<dd>
<input type="date">
</dd>
<dt>生辰</dt>
<dd>
<input type="time">
</dd>
<dt>照片</dt>
<dd>
<label><input hidden type="file">点我上传照片，我比文件上传按钮好看</label>
</dd>
<dt>肤色</dt>
<dd>
<input type="color">
</dd>
<dt>自我介绍</dt>
<dd>
<textarea name="" id="" cols="30px" rows="10px"></textarea>
</dd>
</dl>
<div>
<form action="/">
<fieldset disabled="disabled">
<legend>这里面的全都禁用了</legend>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</fieldset>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</div>
<hr>
<div class="fruit">
<table border="1" cellspacing="0">
<tbody>
<caption>货品列表</caption>
<thead>
<th>编号</th>
<th colspan="red">品名</th>
<th>进价</th>
<th>出价</th>
</thead>
<col>
<col bgcolor="red">
<tr>
<td>001</td>
<td>苹果</td>
<td rowspan="2">5</td>
<td>8</td>
</tr>
<tr>
<td>001</td>
<td>桔子</td>
<td>8</td>
</tr>
<tr>
<td>001</td>
<td>香蕉</td>
<td>5</td>
<td>8</td>
</tr>
<tr>
<td>001</td>
<td>山竹</td>
<td>5</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<hr>
<!-- map能够操作图片的一些区域，分区域可以点击-->
<div class="iframe">
<img title="image title" src="https://drscdn.500px.org/photo/174778125/m%3D1170_k%3D1/2841ccf2a3720e8e794a6a6930f6ff2c"
width=300 usemap="#somemap" alt="">
<map name="somemap">
<area shape="rect" coords="55,108,205,200" href="https://www.mi.com/" alt="ieksoef" title="abc" target="_blank">
<area shape="circle" coords="133,262,90" href="" alt="">
<area shape="poly" coords="57,82,8,265,163,397,225,256,187,83" href="" alt="">
</map>
</div>
<div>
<a href="httpts://mi.com" target="foo">点击我会在下面的iframe里打开小米商城，但为什么打不开呢？</a>
<br>
<iframe src="https://nodejs.org/zh-cn/" name="foo" frameborder="1"></iframe>
</div>
</div>
<!-- 是个非常的空格，一般浏览器不认识，容易出错-->
<footer>
<p>怎样 在这两个字之间空这么大呢？
<br>
怎样在页面中显示下面的内容呢 <br>
<span></span>
</p>
</footer>
</body>
</html>