首页 > 代码库 > PythonNote03_HTML标签

PythonNote03_HTML标签

技术分享
  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">&lt;form action=""&gt;<br />
 35                     &nbsp;&nbsp;表单域<br />
 36                     &lt;/form&gt;</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">&lt;input type="radio" name="gender" id="男" /&gt;&nbsp;&lt;label for="男"&gt;&lt;/label&gt;&nbsp</li>
 74                 </ul>
 75             <hr />
 76 
 77             <li>效果</li>
 78                 <ul>
 79                     <form action="#">
 80                         性别:
 81                             <input type="radio" name="gender" id="男" />&nbsp;<label for="男"></label>&nbsp;&nbsp;
 82                             <input type="radio" name="gender" id="女" />&nbsp;<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                         &lt;textarea name="个人介绍" id="" cols="30" rows="10"&gt;&lt;/textarea&gt;
 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">&lt;input type="button" name="" value="http://www.mamicode.com/按钮"&gt;</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                                 &lt;input type="hidden" name="hidden" value="http://www.mamicode.com/我是被隐藏的数据"&gt;
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">&lt;input type="file" name="文件" /&gt;</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">&lt;input type="reset" name="reset" value="http://www.mamicode.com/重置" /&gt;</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">&lt;input type="range" style="width:300px" name=""&lt;</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>
复习代码

 

PythonNote03_HTML标签