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" 在顶级窗口打开新页面