表格
注意:表格只能向右向下合并,不能向左向上合并
<table border="1" width="" height="" cellspacing="" cellpadding=""
align=""></table>
border 表格边框
width 和 height 表格的宽高
cellspacing 文字与表格的距离
cellpadding 单元格内的空间
<tr align="" valign=""></tr>
align 水平方向对齐方式
valign 垂直方向对齐方式
合并单元格
<td colspan="2">7</td>
<td>8</td>
注意:合并单元格后,后面的td要删除 colspan 指合并行方向的单元格 2 指的是合并两个单元格
属性值是⼀些数字,表示合并单元格的数量 上边线在同⼀⾏的,就算在同⼀⾏
<td rowspan="2">7</td>
<td>8</td>
rowspan 列方向单元格
bgcolor 给表格加背景颜色
<caption>表头</caption>
表的大致框架
<table>
<caption>表头</caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单
<form action="" method="" enctype="" name="" ></form>
action 将来提交数据的位置
method 提交方式 默认是get 通过地址进行传递数据
name 给整个表单起名字
enctype:属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值:
application/x-www-form-urlencoded(默认的设置,没有文件上传可以不加)
multipart/form-data (有文件上传)
单行文本框
用户名:<input type="text" name="username" placeholder="请输入用户名" maxlength="15"><br>
type 指的是文本框的类型
name 给文本框起个名称
placeholder 占位符(提示文字)
maxlength 文本框可以输入的最大长度
size 文本框的长度
密码框
密码 :<input type="password" name="pwd" placeholder="请输入密码" maxlength="15"> <br>
多行文本框
<textarea name="" cols="10" rows="20" id=""></textarea>
cols 影响多行文本框的列的宽度(总共的宽)
rows 影响多行文本框行的高度 (总共的高)
单选框
男<input type="radio" name="" value="" checked />
女<input type="radio" name="" value="" />
radio 表示单选框
checked 为默认值
注意:单选框name值相同则为同一按钮组; 单选框中被提交的值是value中的值
label
<label for="man">
男<input type="radio" name="sex" id="man" />
</label>
<label for="woman">
女<input type="radio" name="sex" id="woman" />
</label>
lable 当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上
当点击男和女这个字的时候也会勾兑对应的选项
复选框
<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">
注意:复选框name值必须为同名数组则为同一按钮组
只能点勾选框才能选中
<label for="pingpang">
乒乓球<input type="checkbox" name="hobby[]" value="乒乓球" id="pingpang">
</label>
<label for="baskball">
篮球<input type="checkbox" name="hobby[]" value="篮球" id="baskball">
</label>
<label for="yumaoqiu">
羽毛球<input type="checkbox" name="hobby[]" value="羽毛球" id="yumaoqiu">
</label>
<label for="wangqiu">
网球<input type="checkbox" name="hobby[]" value="网球" id="wangqiu">
</label>
属性值type="checkbox"
也能够同构label来实现点文字勾选对应的选项
多选name 相同时后面跟数组[ ]
下拉菜单 select
<select name="fenlei" id="" size="1">
<optgroup label="饮料">
<option value="可乐">可乐</option>
<option value="">雪碧</option>
<option value="">芬达</option>
<option value="">东鹏</option>
</optgroup>
<optgroup label="零食">
<option value="可乐">薯片</option>
<option value="">饼干</option>
<option value="">面包</option>
<option value="">鸡腿</option>
</optgroup>
</select>
浏览框 (选择文件)
<input type="file" name="" accept="" />
隐藏域
<input type= " hidden" name="" value="" />
注意:隐藏域不会在页面的显示 隐藏域的值仍会被提交到服务器