表格
table 表示表格
表格的作用:
1、在之前可以使用表格进行布局
2、作为列表来显示数据
一个表格是由 thead、tbody和tfoot组成,这三个标签可以不写,浏览器会自动添加
想要创建一个表格,可以使用一下表格
table :表示当前创建一个表格
tr :表示表格中的一行
th :表示表格的一个单元格,一般代表表头
tb :表示表格的一个单元格,一般代表表内容
以上标签都是快标签
给table 添加 border 属性,设置边框
cellspacing 设置单元格和单元格之间的距离
cellpadding 设置单元格和边框之间的距离
合并单元格
colspan 和并列(横向合并)
rowspan 合并行(竖向合并)
width 设置表格的宽度,可以是具体的值,也可以是百分比
height 设置表格的高度,可以是具体的值,也可以是百分比
以上 width height 属性,可以设置到 table td th 上,width影响的是一列,height影响的是一行
使用 border-collapse 设置单元格的边框是否合并
border-collapse: separate; 不合并
border-collapse: collapse; 合并
form表单
form 标签,表单,可以用来提交数据、
form 是一个块标签
action 属性,数据要提交到的服务器地址,一般是接口地址
method 属性,数据的提交方式
他的值有
get, post, put, delete 等
get: get请求可以把数据拼接到 接口地址的 url上,缺点是,不安全,提交的数据较少
post:post请求,在post提交的信息中,不会看到提交的数据结构,相比较get是安全的,并且提交的数据较大
lable 标签,行标签,经常和input搭配使用,表示input的标题
input 标签,行标签,输入框,常用于表单输入
type属性,用来设置输入框的类型
属性值
text 文本输入框
password 密码输入框
button 普通按钮
submit 提交按钮
reset 重置按钮
radio 单选框
checkbox 多选框
hidden 隐藏框
file 提交文件
number 输入数字
value属性,设置input的值
name属性,对于界面的显示没有任何影响,主要用于数据交互,实质上name的值既是后台数据的字段名
placeholder 属性,输入框的提示信息
maxlength 属性,输入字符的最大长度
单选框 同一类型选项,他们的name值必须相同
lable 的for属性,用来绑定对应 id的input,例如
<lable for="abc"></lable> 只要对该lable操作,则会在当前页面找到 id="abc"的input,并且选中该input。
单选框和复选框的默认选中,只需要在 input 上设置checked属性即可
禁用某一个input 标签,只需要给 input 添加 disabled 属性即可
给某一个输入框添加只读属性readonly,确保该输入框内容可以通过程序修改,并且能提交到后台
disabled 和 readonly 的异同:他们都不能手动修改
不同的是disabled的值不能提交和使用,readonly的值可以提交到后台
设置 textarea
通过 css的resize属性,设置 拖拽的方向
horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽
input 属性,input虽然是行标签,但是可以设置宽高
minlength 最少字符数
required 设置为必填项
select 下拉框,行标签
他的子级必须是 option 标签,每一个 option 标签表示一个选项,option具有 value属性
fieldset 创建一个组
legend 组的标题
textarea 多行文本输入框
属性
rows 设置具有多少行
cols 设置具有多少列