-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtask1.html
304 lines (202 loc) · 6.21 KB
/
task1.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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html><!-- 定义文档类型 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务一：零基础HTML编码</title>
</head>
<body>
<!-- 这是注释 -->
<a href="#">定义锚</a>
<abbr title="可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本">定义缩写</abbr>
<acronym title="World Wide Web">WWW</acronym>
<address>
Written by <a href="mailto:[email protected]">地址请点击</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<img src="images/300.jpg" border="0" usemap="#planetmap" alt="Planets" />
<article>
<h1>标签规定独立的自包含内容。标签规定独立的自包含内容。</h1>
<p>一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。</p>
</article>
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
<ul>
<li> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。 <bdi> 标签是 HTML5 中的新标签。</bdi> 标签是 HTML5 中的新标签。</li>
<li>在发布用户评论或其他您无法完全控制的内容时，该标签很有用。 <bdi> 标签是 HTML5 中的新标签。</bdi> 标签是 HTML5 中的新标签。</li>
</ul>
<p>实际上我是这样的<b>Here is some text</b></p>
<p>使用标签bdo dir="rtl"看起来我是这样的<bdo dir="rtl">Here is some text</bdo></p>
<p>实际上我是这样的 <span>Here is some text</span></p>
<p>使用标签big看起来我是这样的 <big>Here is some text</big></p>
<blockquote>
标签定义块引用。Here is a long quotation here is a long quotation here is a long quotation 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
here is a long quotation here is a long quotation here is a long quotation
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
<button type="button">Click Me!</button>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<center>我是居中标签center</center>
<code>jasdk;fjkaadkjsajk;dajfdkjklafd;jfdaf;kljfakjdafdjkl</code>
<center>我是居中标签center</center>
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>
<p>下面是一个 input 元素，datalist 中描述了其可能的值：</p>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
a dozen is <del>20</del> 12 pieces
<details>
<summary>Copyright 2011.目前只有 Chrome 支持</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<table border="1">
<tr>
<th>一月 <dialog open>这是dialog 打开的对话窗口</dialog></th>
<th>二月</th>
<th>三月</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>
<div style="color:red">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<dl>
<dt>我是dt计算机</dt>
<dd>我是dd用来计算的仪器 ... ...</dd>
<dt>我是dt显示器</dt>
<dd>我是dd以视觉方式显示信息的装置 ... ...</dd>
</dl>
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="images/300.jpg" width="350" height="234" />
</figure>
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>
</body>
</html>