forked from AndyofJuly/HTML_Study
-
Notifications
You must be signed in to change notification settings - Fork 0
/
资料说明.txt
296 lines (252 loc) · 9.86 KB
/
资料说明.txt
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
源码文件：HTML_Note
如何使用：直接双击可运行HTML_Note.html，然后右键选择查看源代码
以下给出源代码帮助大家学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node_of_HTML</title>
</head>
<body>
<h1 align="center">提醒：学习时右键查看源代码</h1>
<br/><!--换行-->
<h2>第一部分-简单标签元素</h2>
<a href="MyPage.html">1.超链接（默认替换链接）</a>
<br/><br/>
<a href="MyPage.html" target="_blank">2.新建窗口跳转至链接</a>
<br/><br/>
<a href="MyPage.html" target="_self">3.原窗口替换链接</a>
<br/><br/>
4.这一行是没有粗体、斜体时的效果，对比下面
<br/><br/>
<b>5.这个是粗体</b>
<br/><br/>
<em>6.斜体效果</em>
<br/><br/>
<u>7.下划线效果</u>
<br/><br/>
<s>8.删除效果</s>
<br/><br/>
<b><em><u><s>9.粗体、斜体、下划线、删除效果叠加</s></u></em></b>
<br/><br/>
<h2>第二部分-表格------------------------华丽的分割线---------------------------------</h2>
<br/><br/><b>1.普通表格</b><br/>
<br/>
<table border="1px" align="center">
<!-- <tr>
<td>名字</td>
<td>性别</td>
<td>密码</td>
</tr>-->
<thead>
<tr>
<th>名字</th>
<th>性别</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Admin</td>
<td>男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
<td>123</td>
</tr>
<tr>
<td>Violet</td>
<td>女</td>
<td>456</td>
</tr>
<tr>
<td>Andy</td>
<td>男</td>
<td>xxx</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名字</th>
<th>性别</th>
<th>密码</th>
</tr>
</tfoot>
</table>
<br/>
<br/><br/><b>2.合并表格</b><br/>
<table border="1px" align="center">
<tr>
<th rowspan="2">aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<!--<td>aaa</td>-->
<td colspan="2">aaa</td>
<td>aaa</td>
<!--<td>aaa</td>--><!--合并的时候，把多的单元格注释掉-->
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
<br/><br/><b>3.列表-分别为顺序、倒序和英文字母顺序排列</b><br/>
<br/>
<b>(1)顺序排列</b>
<ol>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br>
<b>(2)倒序排列</b>
<ol reversed>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br>
<b>(3)英文字母顺序排列</b>
<ol type="a">
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br/><br/><b>4.列表嵌套</b><br/>
<ol>
<li>图像处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
<li>大数据处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
<li>自然语言处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
</ol>
<br/><br/><b>5.无序标签</b><br/>
<br/>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<br/><br/>
<h2>第三部分-表单------------------------华丽的分割线---------------------------------</h2>
<form>
<br/><br/><b>1.普通文本框（可以输入信息）</b><br/>
<input><!--文本框-->
<input type="index"><!--同上面效果-->
<br/><br/><b>2.含占位符的文本框</b><br/>
<input type="index" value="java天下第一"><!--占位符-->
<br/><br/><b>3.不含占位符的文本框（有提示）</b><br/>
<input type="index" placeholder="输入账号"><!--不占位-->
<br>
<input type="index" placeholder="输入密码">
<br/><br/><b>4.限定输入字符数大小的文本框</b><br/>
<input type="index" placeholder="maxlength" maxlength="5"><!--最大能输入的字符-->
<br/><br/><b>5.拓宽了的的文本框</b><br/>
<input type="index" placeholder="输入密码" size="50"><!--拓宽单行文本框-->
<br/><br/><b>6.只读的文本框</b><br/>
<input type="index" value="你删不了我哈哈" readonly><!--只读-->
<br/><br/><b>7.密码隐藏的文本框</b><br/>
<input type="password" placeholder="输入密码">
<br/><br/><b>8.多行表单，任意拉伸</b><br/>
<textarea rows="20">
投我以木瓜，报之以琼琚。匪报也，永以为好也！投我以木桃，报之以琼瑶。匪报也，永以为好也！投我以木李，报之以琼玖。匪报也，永以为好也！《木瓜》是先秦时期卫国的一首描述爱情的民歌，是通过赠答表达深厚情意的诗作，传诵极广。成语“投桃报李”便出自这里。礼尚往来是中华民族的传统美德，不止友人，恋人之间也是如此。礼物本身的价值已不重要，象征意义更加突出，以示两心相许，两情相悦</textarea>
<br/><br/><b>9.按钮</b><br/>
<input type=button value="按钮1">
<br>
<button>按钮2</button><!--js合作并且作为绑定事件的-->
<br>
<input type="submit" value="提交"><!--提交表单-->
<br/><br/><b>10.范围选择</b><br/>
<input type="range" min="-100" max="100">
<input type="range" min="-200" max="200" step="100">
<input type="range" min="-200" max="200" step="100" value="-200"><!--数字滑动-->
<br/>
<input type="number" min="-100" max="100" value="0"><!--上下调值-->
<br/><br/><b>11.选择框</b><br/>
<input type="checkbox">选择
<br/><br/><b>12.单选框</b><br/>
那个语言天下第一<br>
<input type="radio" name="a" checked>java
<input type="radio" name="a">PHP
<input type="radio" name="a">JavaScript
<br/><br/><b>12.下拉选择表单</b><br/>
你最喜欢的手机品牌是什么
<br>
<select>
<option>华为</option>
<option>荣耀</option>
<option>苹果</option>
</select>
<br/><br/><b>13.下拉选择表单及手动输入</b><br/>
<input type="text" placeholder="其他水果请输入" list="datalist1">
<datalist id="datalist1">
<option>苹果</option>
<option>香脚</option>
<option>西瓜</option>
</datalist>
<br/><br/><b>14.邮件、电话、url、日期颜色等</b><br/>
<input type="email">
<input type="tel">
<input type="url">
<input type="date"><!--获取日期-->
<input type="color"><!--获取颜色-->
<br/><br/><b>15.隐藏表单</b><br/>
<input type="hidden" value="123"><!--浏览器上不显示，被隐藏起来了-->
<br/><br/><b>16.图片按钮及选择文件</b><br/>
薇尔莉特永远喜欢我！<br>
<input type="image" src="violet.jpg" width="20%"><!--图片按钮-->
<br>
<input type="file" multiple><!--可以选择一个文件，或者用multiple选择多个文件-->
</form>
<br/><br/>
<h2>第四部分-插入图片------------------------华丽的分割线---------------------------------</h2>
<br/><br/><b>1.创建图片</b><br/>
<!--<img src="violet.jpg">-->
<img src="violet.jpg" width="128px" alt="薇尔莉特">
<br/><br/><b>2.找不到图片时</b><br/>
<img src="viole.jpg" width="128px" alt="薇尔莉特"><!--alt在找不到文件时备用-->
<br/><br/><b>3.点击图片跳转到某个网站</b><br/>
<a href="https://www.bilibili.com/bangumi/media/md8892/?from=search&seid=14554523757864175862" target="_blank">
<img src="violet.jpg" width="128px" alt="薇尔莉特">
</a>
<br/><br/><b>4.分区响应图（大家可以点击任意一个app来玩一玩，很有意思吧）</b><br/>
<img src="tel.png" usemap="#map1">
<!-- <form>
<input type="image" src="tel.png"><!–用于查找像素位置–>
</form>-->
<map name="map1">
<area href="https://www.bilibili.com" shape="rect" coords="32,508,125,598" target="_blank">
<area href="https://wannianrili.51240.com/" shape="rect" coords="178,508,271,598" target="_blank">
<area href="https://baike.so.com/doc/10038773-10517096.html" shape="rect" coords="326,508,417,598" target="_blank">
<area href="https://baike.so.com/doc/6883746-7101237.html" shape="rect" coords="471,508,566,598" target="_blank">
<area href="http://time.tianqi.com/" shape="rect" coords="32,689,125,780" target="_blank">
<area href="http://luyin.voicecloud.cn/" shape="rect" coords="178,689,271,780" target="_blank">
<area href="http://www.kugou.com/" shape="rect" coords="326,689,417,780" target="_blank">
<area href="http://meiyan.meipai.com/" shape="rect" coords="471,689,566,780" target="_blank">
<area href="http://www.10086.cn/index/sc/index_280_280.html" shape="rect" coords="32,941,125,1032" target="_blank">
<area href="https://dianhua.qq.com/" shape="rect" coords="178,941,271,1032" target="_blank">
<area href="https://baike.baidu.com/item/%E7%9F%AD%E4%BF%A1/6203?fr=aladdin" shape="rect" coords="326,941,417,1032" target="_blank">
<area href="https://www.google.cn/intl/zh-CN/chrome/" shape="rect" coords="471,941,566,1032" target="_blank">
<area href="https://www.huya.com/" shape="circle" coords="296,188,154" target="_blank"><!--图片时间处点击有惊喜，老师这里有些小问题，coords的参数分别是圆心坐标x,y,和半径r-->
</map>
<h2>第五部分-插入视频------------------------华丽的分割线---------------------------------</h2>
<br/><br/><b>点击进行播放</b><br/>
<!--<video src="gameplay.mp4" autoplay></video>-->
<video src="gameplay.mp4" controls preload="auto" poster="violet.jpg"></video>
</body>
</html>