-
表格
表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单
1、在HTML中,使用table标签来创建一个表格
2、在table标签中使用tr来表示表格中的一行,有几行就有几个tr
3、在tr中需要使用td来创建一个单元格,有几个单元格就有几个td
例:创建两行实列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表格的属性
-
设置宽高
width:设置宽;height:设置高
-
设置边框线
border:边框线大小 边框线样式 边框线的颜色
-
设置单线边框:
border-spacing:0px ;
border-collapse:collapse
-
调整td文字在表格中的位置
vertical-align:水平居中
text-align 垂直居中
-
设置隔行变色
tr:nth-child(even) 括号中的值偶数行:2n;奇数行:2n+1
-
鼠标移入到tr以后,改变颜色
tr:hover{
background-color: red;
}
-
表单
表单:
将用户信息等本地的数据信息提交给服务器的
比如:百度的搜索框 注册 登录这些操作都需要填写表单
-
创建
form标签
属性:
action属性(必须要写)
指向的是一个服务器的地址,当我们提交表单时将会表单相关的数据提交到action属性对应的地址
-
input
-
文本
:
type属性:text
name属性:提交内容的名字;如果希望表单项中的数据会提交到服务器中,必须指定一个name属性
value属性值:作为文本框的默认值显示;就是用户输入的内容,也就是要提交给服务器的值
-
密码:
type属性值:password
name属性:提交密码的名字
-
单选按钮
type属性:radio
- name属性进行分组,属性相同是一组按钮,如果不设置,则都可以选择
- value属性必须设置,这样被选中的表单项的value属性值将会最终提交给服务器
- checked属性 默认选中 可以直接添加属性,不写属性值
-
多选
input创建一个多选框
-type属性:checkbox
-checked属性 默认选中
-
提交按钮/重置
type属性值:submit
-value属性:指定按钮上的文字,默认是提交
创建一个重置按钮,type="reset"
点击重置按钮以后表单中内容将会恢复为默认值
-
补充
|
-
文本域
|
<textarea name="" cols="40" rows="10"></textarea>
-
下拉框
|
-
button
|