1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>03_复习随敲_0111</title>
8 <style>
9 *{margin: 0;padding: 0;}
10 h1{text-align: center;color: red;}
11 ol{margin: 0 0 0 30px}
12 .zd{color: red;font-size: 20}
13 </style>
14 </head>
15 <body>
16 <h1>03_复习笔记_0111</h1>
17 <hr color="blue" size="5" />
18
19 <h2>主要内容</h2>
20 <ol type="1">
21 <li>form表单</li>
22 <li>label元素</li>
23 <li>textarea元素</li>
24 <li>input元素</li>
25 <li>表格元素</li>
26 <li>frameset框架</li>
27 </ol>
28 <hr color="blue" size="5" />
29
30 <h2>1.form表单</h2>
31 <ol type="A">
32 <li>格式</li>
33 <ul>
34 <li class="zd"><form action=""><br />
35 表单域<br />
36 </form></li>
37 </ul>
38 <hr />
39
40 <li>属性</li>
41 <ul>
42 <li>action: 收集到的数据提交到哪个页面 --> # 表示当前页面</li>
43 <li>
44 method：提交数据的方式 --> GET 显示提交，请求快，URL地址有长度限制、POST 隐式提交
45 </li>
46 </ul>
47 <hr />
48
49 <li>效果展示</li>
50 <form action="#" method="GET">
51 性别：
52 <input type="radio" name="gender" value="男" />男
53 <input type="radio" name="gender" value="女" />女
54 <br />
55 提交：<input type="submit" name="submit" value="Yes">
56 </form>
57 </ol>
58 <hr color="blue" size="5" />
59
60 <h2>2.label标签</h2>
61 <ol type="A">
62 <li>功能</li>
63 <ul>
64 <li>
65 可以将两个标签链接起来，如：将男和男前面的radio元素关联起来，点击男就相当于点击了男前面的radio按钮<br />
66 利用id来实现关联
67 </li>
68 </ul>
69 <hr />
70
71 <li>格式</li>
72 <ul>
73 <li class="zd"><input type="radio" name="gender" id="男" /> <label for="男">男</label> </li>
74 </ul>
75 <hr />
76
77 <li>效果</li>
78 <ul>
79 <form action="#">
80 性别：
81 <input type="radio" name="gender" id="男" /> <label for="男">男</label>
82 <input type="radio" name="gender" id="女" /> <label for="女">女</label>
83 </form>
84 </ul>
85 </ol>
86 <hr color="blue" size="5" />
87
88 <h2>3.多行文本输入框标签 --> textarea标签</h2>
89 <ol type="A">
90 <li>格式</li>
91 <ul>
92 <li class="zd">
93 <textarea name="个人介绍" id="" cols="30" rows="10"></textarea>
94 </li>
95 </ul>
96 <hr />
97
98 <li>属性</li>
99 <ul>
100 <li>name：元素名字</li>
101 <li>id：类似于身份证号码，不能有重复值</li>
102 <li>cols：文本框的列数</li>
103 <li>rows：文本框的行数</li>
104 </ul>
105 <hr />
106
107 <li>效果展示</li>
108 <ul>
109 <li>
110 <textarea name="个人介绍" id="" cols="30" rows="10"></textarea>
111 </li>
112 </ul>
113 </ol>
114 <hr color="blue" size="5" />
115
116 <h2>4.input元素</h2>
117 <ol type="A">
118 <li>input实现按钮</li>
119 <ol type="a">
120 <li>格式</li>
121 <ul>
122 <li class="zd"><input type="button" name="" value="按钮"></li>
123 </ul>
124 <li>效果展示</li>
125 <ul>
126 <li>
127 <input type="button" name="" value="按钮">
128 </li>
129 </ul>
130 </ol>
131 <hr />
132
133 <li>input实现隐藏域</li>
134 <ol type="a">
135 <li>格式</li>
136 <ul>
137 <li class="zd">
138 <input type="hidden" name="hidden" value="我是被隐藏的数据">
139 </li>
140 </ul>
141 <li>实现效果</li>
142 <ul>
143 <li><input type="hidden" name="hidden" value="我是被隐藏的数据"></li>
144 <li>没有效果，但是如果将其进行提交就知道啦</li>
145 <li class="zd">注意：隐藏域和提交都必须位于同一个表单域时才能提交成功</li>
146 </ul>
147 </ol>
148 <hr />
149
150 <li>input实现文件打开</li>
151 <ol type="a">
152 <li>格式</li>
153 <ul>
154 <li class="zd"><input type="file" name="文件" /></li>
155 </ul>
156 <li>实现效果</li>
157 <ul>
158 <li>
159 <form action="#">
160 <input type="file" name="文件" />
161 <input type="submit" name="" />
162 </form>
163 </li>
164 </ul>
165 </ol>
166 <hr />
167
168 <li>input实现重置按钮</li>
169 <ol type="a">
170 <li>格式</li>
171 <ul>
172 <li class="zd"><input type="reset" name="reset" value="重置" /></li>
173 </ul>
174 <li>实现效果</li>
175 <ul>
176 <li>
177 <form action="">
178 用户名：<input type="text" name="username" placeholder="请输入用户名" />
179 <input type="reset" name="reset" value="重置" /><br />
180 <input type="submit">
181 </form>
182 </li>
183 </ul>
184 </ol>
185 <hr />
186
187 <li>input实现滑块</li>
188 <ol type="a">
189 <li>格式</li>
190 <ul>
191 <li class="zd"><input type="range" style="width:300px" name=""<</li>
192 </ul>
193 <li>实现效果</li>
194 <ul>
195 <li>
196 <input type="range" style="width:300px" name="">
197 </li>
198 </ul>
199 </ol>
200 <hr />
201
202 <li>注意：input元素要放在form表单域中</li>
203 </ol>
204 <hr color="blue" size="5" />
205
206 <h2>5.表格元素</h2>
207 <ol type="A">
208 <li>格式</li>
209 <ul>
210 <li class="zd">见源代码</li>
211 </ul>
212 <hr />
213
214 <li>实现效果</li>
215 <ul>
216 <li>
217 <table border="1">
218 <thead>
219 <tr>
220 <td colspan="3">学生信息</td>
221 </tr>
222 </thead>
223 <tbody>
224 <tr>
225 <td>学号</td>
226 <td>姓名</td>
227 <td>爱好</td>
228 </tr>
229 <tr>
230 <td>2012114018</td>
231 <td>王杨帅</td>
232 <td>basketball</td>
233 </tr>
234 <tr>
235 <td>21116092312</td>
236 <td>杨帅王</td>
237 <td>programming</td>
238 </tr>
239 </tbody>
240
241 </table>
242 </li>
243 </ul>
244 <hr />
245
246 <li>注意：详细笔记见 03_课堂随敲03_表格</li>
247 </ol>
248 <hr color="blue" size="5" />
249
250 <h2>6.frameset框架</h2>
251 <ol type=""A>
252 <li>见单独的frame文件</li>
253
254 </ol>
255
256 </body>
257 </html>
