表格和表单
表格
1. 基础知识
tr 表示行
td 表示列
rowspan 纵向的合并单元格
colspan 横向的合并单元格
<table border="1" width="50%" align=" center">
<!--在table中使用tr表示表格中的一行,有几个tr就有几行-->
<tr>
<!--在tr中使用td表示一个单元格,有几个td就有几个单元格-->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!--rouspan 纵向的合并单元格-->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>AB</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!-- colspan横向的合并单元格 -->
<td colspan="2">C4</td>
</tr>
</table>
2. 长表格
注意: 这三个部分才是table的子元素,而不是tr
一般不写这三个部门,默认都是thead,所以css中如果通过关系选择,别忘了使用thead
表格有三个部分
这种写法的好处就是:头部一定在表格的顶部,底部一定在底部,不论你写在哪个位置
但是一般不会使用这种方式写
- 头部
thead
- 主体
tbody
- 底部
tfoot
<table>
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>1200</td>
</tr>
</tfoot>
</table>
3.表格css样式
border-spacing
边框距离border-collapse
边框合并
table {
width: 50%;
margin: 0 auto;
border: 1px black solid;
/* border-spacing:指定边框之间的距离;边框之间虽然没有距离了,但是实际上是两条边框的和,看起来是变粗了 */
/* border-spacing: 0; */
/*border-collapse:collapse;设置边框的合并;真正的将两条边框合并成一条边框 */
border-collapse: collapse;
/* 默认情况下元素在td中是垂直居中的,可以通过vectical-align来修改 */
vertical-align: middle;
text-align: center;
}
/* 如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中
所以说,tr不是table的子元素 */
tbody tr:nth-child(odd) {
background-color: rgb(211, 216, 188);
}
td {
border: 1px black solid;
}
表单
- 用于提交数据
- 将本地数据提交给服务器
1 . 表单属性
-
action
属性定义提交表单时要执行的操作,提交数据的服务器地址如果省略 action 属性,则将 action 设置为当前页面。
<form action="/action_page.php"> //提交后数据发送到action_page.php
-
Target
规定提交表单后在何处显示响应。
<form action="/action_page.php" target="_blank">
method
属性指定提交表单数据时要使用的 HTTP 方法get
URL变量发送post
HTTP post 事务发送
注意:如果表单数据包含敏感信息或个人信息,请务必使用 POST!
autocomplete
属性规定表单是否应打开自动完成功能,也就是有没有历史输入提示
2. 表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单的提交位置,可以是网站,也可以是一个请求处理地址
method:两种方法:post和get
get:可以在url种看到我们提交的信息,不安全,但是高效
post: 不可以在url种看到我们提交的信息,比较安全,且可以传输大文件
-->
<form action="2.请求处理的地址.html" method="get">
<!--文本输入框 : input type = "text"-->
<p>账号:<input type="text" name="username"></p>
<!--密码框 : input type = "password"-->
<p>密码:<input type="password" name="pwd"></p>
<p>
<!--单选框 : input type = "radio"-->
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<!--多选框 : input type = "checkbox"-->
•<input type="checkbox" value="sleep" name="hobby"/>睡觉
•<input type="checkbox" value="code" name="hobby"/>写代码
•<input type="checkbox" value="chat" name="hobby"/>聊天
•<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<p>
<!--下拉框 -->
国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<p>
<!--文本域-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<p>
<!--文件域-->
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<!--邮件验证-->
邮箱:
<input type="email" name="email">
</p>
<p>
<!--URL验证-->
URL:
<input type="url" name="url">
</p>
<p>
<!--数字-->
商品数量:
<input type="number" name="num" max="100" min="0" step="1">
</p>
<p>
<!--滑块-->
音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<!--搜索框-->
搜索:
<input type="search" name="search">
</p>
<!--提交和重置-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>