1.表格标签
table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距 `**`
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列
水平对齐方式:align `**`
align:默认靠左对其 left
center 居中
right 靠右对齐
如果给tr设置 设置当前行的所有
如果给td/th 设置当前一列
valign: 默认垂直居中 `**`
top:靠上对其
bottom:靠下对其
单元格合并: `**`
跨行合并
rowspan: 设置当前列 占几个行的高度
跨列合并
colspan: 设置当前列占 几个列的宽度
下面的代码段基本全部覆盖了表格的一些基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="0" width="600" height="300">
<!-- 第一行 -->
<tr align="center">
<td>编号</td>
<td align="right">姓名</td>
<td>性别</td>
<td>年龄</td>
<td>简介</td>
<td>描述</td>
</tr>
<!-- 第二行 -->
<tr>
<td>1</td>
<td>吴昊</td>
<td rowspan="2">男</td>
<td>18</td>
<td colspan="2">貌似潘安,身高八尺</td>
<!-- <td>貌似潘安,身高八尺</td> -->
</tr>
<!-- 第三行 -->
<tr valign="top">
<td>2</td>
<td valign="bottom">王洋洋</td>
<!-- <td>男</td> -->
<td>26</td>
<td>暖水壶</td>
<td>暖男一枚</td>
</tr>
</table>
</body>
</html>
2.表单
form声明一个表单域。
属性:
action:提交地址 如果不写,提交到当前页面
method: 指定提交数据的方式
get:默认是get提交
将数据明文显示在地址栏 相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏 相对安全
理论上数据大小不受限制 表单的数据是要提交给后台,提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容 所以表单控件除了按钮都要加name属性
表单控件的属性:
name: 必须添加 座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框
同一组多选框的name属性的值必须相同
必须设置默认值 value属性
select>option: 下拉选框 option 选项
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框 双标签
hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
提交按钮: type="submit"
<button>按钮</button>
单纯的按钮:
在form 表单域中 type="button" 只是单纯的按钮 没有提交意义
checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态 给option设置
disabled 禁用
代码中都有对以上知识的体现,测试代码的时候需要把图片地址改一下就好了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="./1.py" method="post">
用户名:<input type="text" name="uname" disabled > <br>
密码: <input type="password" name="pwd" ;"> <br>
性别: <input type="radio" name="gender" value="1" checked> 男
<input type="radio" name="gender" value="0" > 女
<br>
爱好: <input type="checkbox" name="like" value="1" checked> 女
<input type="checkbox" name="like" value="2"> 男
<input type="checkbox" name="like" value="3" checked> 学习
<br>
地址:
<select name="address">
<option value="0">--请选择地址--</option>
<option value="1">--商丘--</option>
<option value="2" selected>--睢县--</option>
</select>
<br>
自我介绍:
<textarea name="info">我的CSDN是A白D</textarea>
<br>
小秘密: <input type="hidden" name="uid" value="110">
<br>
提交按钮: <input type="submit" value="提交1" disabled>
<button>提交2</button>
<br>
单纯的按钮:
<input type="button" value="按钮">
<br>
重置按钮:
<input type="reset" value="重置">
<br>
图片按钮:
<input type="image" src="../img/0.jpg">
</form>
</body>
</html>
表格中标注*号的是比较重要的且常用的,一定要牢记。
有问题请留言,谢谢