文章目录
【HTML】 表格和表单
基础表格
作用：显示数据
表格组成
<table width="value" height="value" border="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一个tr表示一行；一个td表示一列(一个单元格)
表格的html属性
| 属性 | 描述 |
|---|---|
| width | 表格的宽度 |
| height | 表格的高度 |
| border | 表格的边框 |
| bgcolor | 表格的背景色 |
| bordercolor | 表格的边框颜色 |
| cellspacing | 单元格与单元格之间的间距 |
| cellpadding | 单元格与内容之间的间距 |
行的html属性
| 属性 | 取值 | 描述 |
|---|---|---|
| align | left（默认左对齐）、right（右对齐）、center（居中对齐） | 单元格内容的水平对齐方式 |
| valign | top（顶对齐）、bottom（底对齐）、middle（默认居中）、baseline（基线） | 单元格内容的垂直对齐方式 |
注：valign="baseline"：与基线对齐。基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
单元格的html属性
| 属性 | 描述 |
|---|---|
| rowspan | 向下合并 |
| colspan | 向右合并 |
单元格合并
- 合并的时候总是向下或者向右
- 合并几个单元格，属性就写几个
- 把多余的单元格注释掉
表格的进阶标签
表格的标题：caption
数据列分组：colgroup
- span=数字（把几列分为一组）
数据行分组
-
thead 表格的头部
-
tbody 表格的主体
-
tfoot 表格的底部
注：
- 必须包含有一个tr
- tbody可以有很多个
- thead和tfoot只能有一个
tr — 每一行
- th—表头单元格（自带加粗居中效果）
- td—普通单元格
实例
<style>
/* 基础样式 */
table {
width: 500px;
height: 400px;
}
table,
td {
border: 1px solid #000;
}
.foot {
background-color: cyan;
text-align: center;
}
/* 进阶样式 */
caption {
height: 100px;
background-color: cyan;
font-size: 40px;
line-height: 100px;
}
.col1 {
background-color: pink;
}
.col2 {
background-color: green;
}
th {
height: 80px;
border: 1px solid #000;
}
tr {
text-align: center;
}
</style>
</head>
<body>
<!-- table>tr*5>td*4{$} -->
<table cellspacing="0">
<caption>班级信息的表格</caption>
<colgroup span="2" class="col1"></colgroup>
<colgroup span="2" class="col2"></colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>兴趣爱好</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>踢足球</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>跑步</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>唱歌</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<td colspan="4">高三（4）班全体学生</td>
</tr>
</tfoot>
</table>
</body>
效果图 ：
表格的css属性
- 单元格是分离模式（边框分开）还是合并模式（边框合并）
border-collapse:
separate /*分离模式*/
collapse /*合并模式*/
- 单元格与单元格之间的间距 -- 分离模式
border-spacing: 0px;
- 空单元格是否隐藏 -- 分离模式
empty-cells:
show /*出现（默认）*/
hide /*隐藏*/
表格布局算法
table-layout:
auto /*表格宽度靠内容决定（默认）*/
fixed /*表格宽度固定（不会随着内容改变单元格）*/
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
表单
表单的作用：用来收集用户的信息。
表单组成
- 表单框（表单域form）
- 提示信息
- 表单控件/表单元素
表单域（form）
<form name="表单名称（英文字母开头的）" method（提交方式）="post/get" action="表单提交的地址"></form>
| 属性 | 描述 |
|---|---|
| name | 表单名称（英文字母开头的） |
| method | 提交方式（post/get） |
| action | 表单提交的地址 |
Form中的获取数据的两个方式get和post的区别？
- get请求通常是从服务器上获取数据，post请求通常表示向服务器提交数据。
- get请求发送的数据都写在地址栏上，用户可见。而post请求发送的数据用户不可见。
- get请求不能提交大量的数据，但post可以，因此不要混用。
建议：
- get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
- 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
表单控件
type的属性
| type的属性值 | 描述 |
|---|---|
| text | 文本输入框 |
| password | 密码框 |
| submit | 提交按钮 |
| button | 普通按钮 |
| reset | 重置按钮 |
| radio | 单选框（同一组单选框name值相同） |
| checkbox | 多选框 |
| file | 文件上传框 |
| hidden | 隐藏表单控件框（用js绑定数据，和表单一起提交到后台） |
| image | 图片域提交按钮 |
<input type="image" src="" alt="">
<!-- src : 图片地址
alt ：图片加载失败之后的提示信息
-->
各类表单实例
-
文本框
<input type="text" value="默认值"maxlength="5" placeholder="提示文本" /> -
密码框
<input type="password" placeholder="密码"/> -
提交和重置按钮
<input type="submit" value="按钮内容" />提交按钮 <input type="reset" value="按钮内容"/>重置按钮注：
button和submit的
区别是：submit是提交按钮起到提交信息的作用。
type类型是button只起到跳转的作用，不进行提交。
-
单选框/单选按钮
<input type="radio" name="ral" value="radiovalue"/> <input type="radio" name="ral" checked="checked" />注：单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
-
复选框
<input type="checkbox" name="like" value="checkboxvalue" />注：
复选按钮里的name属性必须写，同一组复选按钮的name属性值必须一样。
checked="checked"表示默认被选中，可简写成checked
disabled="disabled"表示禁用，可简写成disabled
enabled:可用状态
-
下拉菜单
<select name=""> <option name="" value="表单被提交时被发送到服务器的值" selected="selected">菜单内容</option> </select> -
多行文本框（文本域）
<textarea name="textareal" cols="字符宽度" rows="行数"> </textarea> -
跳转按钮
<input name="'" type="button" value=“按钮内容” /> <button></button> -
上传文件框
文件域：<input type="file" /> -
图像域
<input type="image" src="" width="100" height="100" alt="上传图片" /> -
隐藏文本框
<input type="hidden" value="值" />上传隐藏的值/字段 -
提示信息标签(作用：将提示信息及相应的表单控件进行关联)
<label for="user">提示信息</label> <input type="text" id="user"/>
表单字段集
<fieldset></fieldset>于对表单中的元素进行分组,可以嵌套。
功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。
字段级标题
<legend></legend>
功能：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。
表单标签的 html 属性
-
单选框的禁用状态
disabled和 默认选中状态checked<fieldset> <legend>单选框</legend> <input type="radio" name="sex" disabled="disabled">男 <input type="radio" name="sex" checked>女 </fieldset> -
多选框的默认选中状态
checked和 禁用状态disabled<fieldset> <legend>复选框</legend> <input type="checkbox" disabled>足球 <input type="checkbox" checked>羽毛球 <input type="checkbox">蓝球 </fieldset> -
下拉框option的默认选中状态
selected和 禁用状态disabled<fieldset> <legend>下拉框</legend> <p> 下拉框： <select name="" id=""> <option value="" disabled selected>请选择city：</option> <option value="">杭州</option> <option value="">厦门</option> <option value="">上饶</option> </select> </p> </fieldset>效果图 ：
表单标签的css属性
1.最常用鼠标指针类型： cursor: pointer;
<div></div>
/*-----------分割线-----*/
div {
background-color: red;
width: 200px;
height: 200px;
cursor: pointer;
}
其他鼠标指针类型
2.文本框（textarea）是否可以拖拽
由textarea的css属性：resize的属性值控制。
| resize的属性值 | 描述 |
|---|---|
| horizontal | 水平方向可以拖拽 |
| vertical | 垂直方向可以拖拽 |
| none | 禁止拖拽 |
| both | 水平方向和垂直方向都可以拖拽 |
3.去掉表单控件的外轮廓 outline: none;
input {
outline: none;
}
/*-----------分割线-----*/
<input type="text">
4.iframe 在网页中嵌套网页
<iframe src="http://www.4399.com" frameborder="0"></iframe>
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
