H5学习笔记9 表单整理
1 <form action="" method="" name="" id="">
2 <!-- 表单字段集 -->
3 <fieldset>
4 <!-- 表单字段集标题 -->
5 <legend>表单综合</legend>
6
7 <!-- 1、文本框 -->
8 <input type="text">
9 <input type="text" value="实心的信息">
10 <input type="text" placeholder="虚焦的提示信息">
11 <!-- 2、密码框 -->
12 <p><input type="password"></p>
13 <p><input type="password" placeholder="请输入密码"></p>
14
15 <!-- 3、按钮 普通按钮 重置按钮 提交按钮 -->
16 <input type="button" value="普通按钮">
17 <button>普通中的战斗机</button> <!-- 会跳转到action所指的路径中 不会提交数据 -->
18 <!-- 重置按钮 -->
19 <input type="reset">
20 <input type="reset" value="一键清空">
21 <!-- 提交按钮 -->
22 <input type="submit">
23 <input type="submit" value="免费注册">
24
25
26 <!-- 4、单选框、单选按钮 -->
27 <!-- 单选按钮的name必须写 同一组的name值要相同 -->
28 <p>
29 <input type="radio" name="sex">男生
30 <input type="radio" name="sex">女生
31 <input type="radio" name="sex">其他
32 </p>
33 <!-- 5、信息提示标签 -->
34 <p>
35 <label><input type="radio" name="sex1">男生</label>
36 <label><input type="radio" name="sex1">女生</label>
37 <label><input type="radio" name="sex1">其他</label>
38 </p>
39 <p>
40 <input type="radio" name="sex2" id="ipt1">
41 <label for="ipt1">男生</label>
42
43 <input type="radio" name="sex2" id="ipt2">
44 <label for="ipt2">女生</label>
45
46 <input type="radio" name="sex2" id="ipt3">
47 <label for="ipt3">其他</label>
48
49 </p>
50
51 <!-- 6、多选按钮 -->
52 <!-- 多选按钮的name必须写 同一组的name值要相同 -->
53 <!-- 单选 多选都可以使用的两个属性 默认选中 禁用 -->
54 <!-- 默认选中checked -->
55 <!-- 禁止使用disabled -->
56 <label><input type="checkbox" name="star" disabled>华晨宇</label>
57 <label><input type="checkbox" name="star">薛之谦</label>
58 <label><input type="checkbox" name="star">张碧晨</label>
59 <label><input type="checkbox" name="star">李荣浩</label>
60 <label><input type="checkbox" name="star" checked>周杰伦</label>
61 <hr>
62 <!-- 7、下拉框 -->
63 <select name="" id="">
64 <option>1998</option>
65 <option>1999</option>
66 <option>2000</option>
67 <option>1990</option>
68 <option>1991</option>
69 <option>1992</option>
70 </select>
71
72 <!-- 8、多行文本域 -->
73 <!-- cols字符宽度 一行可以写多少字符 (一个英文字母是一个字符 一个中文占两个字符) -->
74 <!-- rows可以显示多少行 -->
75 <textarea name="" id="" cols="30" rows="10"></textarea>
76
77 <!-- 9、上传文件、 -->
78 <input type="file">
79
80 <!-- 10、图片域 -->
81 <input type="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fxiafan.com.cn%2Fuploads%2Fueditor%2Fimage%2F20210414%2F1618384326181184.jpg&refer=http%3A%2F%2Fxiafan.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621048006&t=26c3d5d9ef9c7d84f0bf66b1b72ef356" width="200" height="200">
82 </fieldset>
83 </form>
表格分组
表格列分组
1 <table width="500" height="300" border="1">
2 <!-- 表格列分组 -->
3 <!-- <colgroup span="数字几"></colgroup> 将几列分成一组 -->
4 <colgroup span="2" class="col1"></colgroup>
5 <colgroup span="3" class="col2"></colgroup>
6 <colgroup span="4" class="col3"></colgroup>
7 <tr>
8 <td></td>
9 <td></td>
10 <td></td>
11 <td></td>
12 <td></td>
13 <td></td>
14 <td></td>
15 </tr>
16 <tr>
17 <td></td>
18 <td></td>
19 <td></td>
20 <td></td>
21 <td></td>
22 <td></td>
23 <td></td>
24 </tr>
25 <tr>
26 <td></td>
27 <td></td>
28 <td></td>
29 <td></td>
30 <td></td>
31 <td></td>
32 <td></td>
33 </tr>
34 <tr>
35 <td></td>
36 <td></td>
37 <td></td>
38 <td></td>
39 <td></td>
40 <td></td>
41 <td></td>
42 </tr>
43 </table>
表格的属性
边框合并
1 1 /* 注意 border-spacing和边框合并不能同时使用 */ 2 border-collapse: collapse;
单元格之间的距离
1 /*2、 单元格之间的距离 等同于table中cellspacing这个属性 */
2 border-spacing: 0px;
固定单元格大小
1 table-layout: fixed;
无内容表格不显示
1 empty-cells: hide;
表格行分组
1 <table width="500" height="700" border="1">
2 <!-- 表格标题 -->
3 <caption>项目增补单</caption>
4 <!-- 表头 -->
5 <thead>
6 <tr>
7 <th>姓名</th> <!-- 表头单元格 -->
8 <th>性别</th>
9 <th>年龄</th>
10 <th>偶像</th>
11 </tr>
12 </thead>
13 <!-- 表主体 -->
14 <tbody>
15 <tr>
16 <td>多多</td>
17 <td>女</td>
18 <td>12</td>
19 <td>明道</td>
20 </tr>
21 <tr>
22 <td>勺勺</td>
23 <td>男</td>
24 <td>13</td>
25 <td>林志颖</td>
26 </tr>
27 <tr>
28 <td>好好</td>
29 <td>女</td>
30 <td>15</td>
31 <td>许嵩</td>
32 </tr>
33 </tbody>
34 <!-- 表尾/脚注 -->
35 <tfoot>
36 <tr>
37 <td>少女</td>
38 <td>总结</td>
39 <td>青年</td>
40 <td>男生</td>
41 </tr>
42 </tfoot>
43 </table>
多选框属性
1 <!-- 多选框 和单选框一样 必须写name 并且同一组的name值相同-->
2 <!-- checked默认选中 -->
3 <!-- disabled禁止使用 -->
4 <input type="checkbox" name="fruit" checked>西瓜
5 <input type="checkbox" name="fruit">水蜜桃
6 <input type="checkbox" name="fruit">菠萝
7 <input type="checkbox" name="fruit">芒果
8 <input type="checkbox" name="fruit" disabled>柿子
9 <input type="checkbox" name="fruit">草莓
加号/毗邻选择器
<style> div+p{ /* 选择的是div下面第一个兄弟元素 同时该元素为p */ background: red; } </style> </head> <body> <p>我是div上方的</p> <div>我是div</div> <p>我是div下面第一个兄弟标签 同时是p</p> <p>我是div下面第二个</p> <p>我更靠后了</p> </body>
选中checked
1 <style>
2 input:checked{ /* 指的是：被点击选中的那个input */
3 width: 100px;
4 height: 100px;
5 }
6 </style>
7 </head>
8 <body>
9 <input type="radio" name="aa">阳光
10 <input type="radio" name="aa">沉稳
11 <input type="radio" name="aa">孝顺
12 <input type="radio" name="aa">有钱
13 </body>
组分割线
1 <!-- 添加组分割线 -->
2 <!-- rules="all"默认值 横向纵向都有边框 -->
3 <!-- rules="cols" 列分割线 只有纵向有边框-->
4 <!-- rules="rows" 行分割线 只有横向有边框-->
5 <!-- rules="groups" 组分割线 有列分组或者行分组的划分 -->
6 <table border="1" rules="groups">
7 <!-- <colgroup span="2"></colgroup> -->
8 <thead>
9 <tr>
10 <th>内容</th>
11 <th></th>
12 <th></th>
13 <th></th>
14 <th></th>
15 <th></th>
16 <th></th>
17 </tr>
18 </thead>
19 <tbody>
20 <tr>
21 <td></td>
22 <td></td>
23 <td></td>
24 <td></td>
25 <td></td>
26 <td></td>
27 <td></td>
28 </tr>
29 <tr>
30 <td></td>
31 <td></td>
32 <td></td>
33 <td></td>
34 <td></td>
35 <td></td>
36 <td></td>
37 </tr>
38 <tr>
39 <td></td>
40 <td></td>
41 <td></td>
42 <td></td>
43 <td></td>
44 <td></td>
45 <td></td>
46 </tr>
47 </tbody>
48 <tfoot>
49 <tr>
50 <td>内容</td>
51 <td></td>
52 <td></td>
53 <td></td>
54 <td></td>
55 <td></td>
56 <td></td>
57 </tr>
58 </tfoot>
59 </table>
浙公网安备 33010602011771号