表单介绍
表单的概念: 表单是用来收集用户的信息或是数据
1、提交按钮、重置按钮、普通按钮
<form >
<!--提交按钮将数据提交到指定位置-->
<input type="submit"value="提交按钮" /><!--value表示初始的值-->
<!--重置按钮,重置已经填写的表单内容-->
<input type="reset" value="重置按钮" />
<!--普通按钮-->
<input type="button"value="普通按钮" />
<!--submit reset button 表示按钮的类型-->
</form>
2、单选框、复选框
<form>
<!--单选框,单选项必须有一个共同的name,表示它们为一组-->
<input type="radio" name="rad" id="rad1"/><label for="rad1">单选A</label> <br /><!- -br表示换行-->
<input type="radio" name="rad" id="rad2"/><label for="rad2">单选B</label> <br />
<input type="radio" name="rad" id="rad3"/><label for="rad3">单选C</label> <br />
<!--多选框-->
<input type="checkbox" name="check"id="check1"/><label for="check1">多选A</label> <br /><!--br表示换行-->
<input type="checkbox" name="check"id="check2"/><label for="check2">多选B</label> <br />
<input type="checkbox" name="check"id="check3"/><label for="check3">多选C</label> <br />
<!--<label for=""></label>表示和单选或复选框连在一起,点击选项也会选中选项-->
</form>
3、文本框、密码框
<form>
<!--文本框-->
<input type="text" name="text" id="text" value="初始值"placeholder="占位符" />
<!--密码框-->
<input type="password" name="pwd" id="pwd" value="初始值"placeholder="占位符" />
<!--提交时两个属性必须有name,placeholder表示占位符,阴影显示,不占位置不会被提交-->
</form>
4、下拉框
<!--下拉框-->
<select>
<option>下拉A</option>
<option>下拉B</option>
<option>下拉C</option>
<option>下拉D</option>
</select>
5、文本域
<!--文本域-->
<textarea rows="" cols=""></textarea>
<!--rows表示文本区内可见的行数
cols表示文本区内可见的列数-->
表格介绍
<table >
<caption>表格标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--colspan="" 合并列数
rowspan=""合并行数
tr表示行
td表示列
caption表示表格标题
padding表示填充
-->
【table的常用属性】
1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
☆☆合并边框的写法style=“border-collapse:collapse;” 使用边框合并时,无需设置cellspacing。
3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
4-width/height:表格的宽高
5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
6-bgcolor:背景色
7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
8-bordercolor:设置边框颜色
【tr、td标签的属性】
当表格属性与行列属性冲突时,以行列属性为优先,属性设置优先级td>tr>table。
1-width,height:给单个的行列设置宽高
2-bgcolor:背景色
3-align:设置单元格中的文字,在单元格中的水平对齐方式 left/center/right
4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom
5-nowrap:nowrap="nowrap"设置单元格文字行末不断行
【表格的跨行与跨列】
1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。