HTML-表格、表单
1.表格
基本构成标签
1.table标签:表格标签
属性:align 规定表格相对周围元素的对齐方式。
值:left、center、right
属性:bgcolor 规定表格的背景颜色。
值:rgb(x,x,x)、#xxxxxx、colorname
属性:border 规定表格边框的宽度。
值:pixels
属性:cellpadding 规定单元边沿与其内容之间的空白。
值:pixels、%
属性:cellspacing 规定单元格之间的空白。
值:pixels、%
属性:width 规定表格的宽度。
值:pixels、%
2.th标签:定义表格内的表头单元格。
属性:align 规定表格相对周围元素的对齐方式。
值:left、center、right
属性:valign 规定单元格内容的垂直排列方式。
值:top、middle、bottom
属性:bgcolor 规定表格的背景颜色。
值:rgb(x,x,x)、#xxxxxx、colorname
属性:border 规定表格边框的宽度。
值:pixels
属性:cellpadding 规定单元边沿与其内容之间的空白。
值:pixels、%
属性:cellspacing 规定单元格之间的空白。
值:pixels、%
属性:width 规定表格的宽度。
值:pixels、%
3.tr标签:标签定义 HTML 表格中的行。
属性:align 规定表格行相对周围元素的对齐方式。
值:left、center、right
属性:valign 规定表格行内容的垂直排列方式。
值:top、middle、bottom
属性:bgcolor 规定表格行的背景颜色。
值:rgb(x,x,x)、#xxxxxx、colorname
属性:colspan 规定单元格可横跨的列数。
值:number
属性:rowspan 规定单元格可横跨的行数。
值:number
4.td标签:
属性:align 规定单元格相对周围元素的对齐方式。
值:left、center、right
属性:valign 规定单元格内容的垂直排列方式。
值:top、middle、bottom
属性:bgcolor 规定单元格的背景颜色。
值:rgb(x,x,x)、#xxxxxx、colorname
属性:colspan 规定单元格可横跨的列数。
值:number
属性:rowspan 规定单元格可横跨的行数。
值:number
注:使用colspan和rowspan时记得删除多余的单元格。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="50%" height="100">
<caption>学生信息</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>王芳</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
结果如图
2.表单
1.从客户端可以向服务器发送数据。
2.表单中有许多可以输入或选择的组件。
3.用户就可以在表单中输入信息,从而向服务器发送。
form标签表示一个表单,不显示。
属性
action=“向服务器端发送的地址”
method=“向服务器端发送数据方式” get/post(更安全)
组件:input :输入
组件属性:
type=“text” 单行文本输入框(默认text)
type=“password” 黑圆点输入框,看不见输入字符。一般用于密码输入。
type=“radio” 单选框。
type=“checkbox” 多选框。
id=“” 值要求唯一,自定义值。
name=“” 属性名可以重复,自定义值,向服务器端发送数据的键
value=“” 提交的值给服务器,不会显示。
placeholder=“” 提示信息,当输入内容后自动消失。
size=“” 框宽度。
readonly=“readonly” 只读。
disabled=“disabled” 禁用组件,一旦组件被禁用了,值就不会向服务器端提交。
accept=“” 过滤文件
checked=“checked” 默认选中。
注:1.name相同为一组,一组之内可单选。
2.选择性组件需要给默认值
3.表单提交时,只会提交选中的那个
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<label for="id">账号</label>
<input type="text" id="id" name="id" placeholder="请输入账号" />
<br />
<label for="mima">密码</label>
<input type="password" id="mima" name="mima" placeholder="请输入密码" />
<br />
<label for="fujian">附件</label>
<input type="file" accept=".jpg" id="fujian" name="fujian" /><label for="fujian">选择附件</label>
<br />
<label for="xingbie">性别</label>
<input type="radio" id="xingbie" name="xingbie" /><label for="xingbie">男</label>
<input type="radio" id="xingbie" name="xingbie" checked="checked" /><label for="xingbie">女</label>
<br />
<label for="kecheng">课程</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">java</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">c</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">css</label>
<input type="checkbox" id="kecheng" name="kecheng" /><label for="kecheng">html</label>
</form>
</body>
</html>
结果:
下拉框标签
<select>
<option value="向服务器提交的值">只是在页面显示</option>
</select>
表单会默认提交选中的内容
多行文本域标签
<textarea cols="列数" rows="行数" ></textarea>
注:标签体就是value
按钮
<input type="reset" value="重置"> 重置按钮,还原原始状态
<input type="submit" value="提交"> 提交按钮,向服务器提交表单
<input type="button" value="普通按钮"> 普通按钮,主要用于触发事件
内联框架
<iframe src="网址" name="框架名" width="宽度" height="高度" frameborder="边框宽度" ></iframe>
补充:
target="网址" 在指定名称的窗口打开新页面
target="_parent" 在父级窗口打开新页面
target="_top" 在顶级窗口打开新页面