CSS中表格以及表单的属性以及运用

2023-10-30

一.表格（按照一定的顺序摆放数据，表格是由一些单元格组成）

1属性

border边框

cellspacing 单元格与单元格之间的距离

cell padding 单元格边框和内容之间的距离

align 表格水平的位置

**tr行**

align 调整一整行内容的水平位置

valign 调整内容的垂直位置(top middle bottom)

height 调整本行的高度

bgcolor 调整本行的颜色

**注意 tr中width是不生效的**

**td 单元格**

width，height（只要有任何一个单元格发生改变的时候，他所在的那一行或者那一列宽度和高度都会发生变化）

align调整的自身内容的水平位置

valign调整自身内容的垂直位置

bgcolor 调整的是自身的颜色

2.表格的结构

caption表格标题

1，必须跟随在table标签之后

2，表格标题只能存在一个（人为约定）

th表格的表头

thead表格的页眉

tbody表格的主体

tfoot表格的页脚

3.表格的高级运用

**跨列合并colspan**

从指定单元格的位置处开始，横向向右合并，几个单元格（包含自己）被合并掉的单元格应从tr中删除

属性：td的colspan属性

取值：合并单元格的数量

**跨行合并rowspan**

从指定单元格的位置处开始，纵向向下合并，几个单元格（包含自己）被合并掉的要删除

属性：td的rowspan属性

取值：合并单元格的数量

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个表格</title>
</head>

效果图：

二.表单form(用于显示，收集用户信息，并且提交给服务器)

1.组成

表单元素：将信息提交给服务器

表单控件：负责接收用户的数据

表单提交：点了提交按钮就会跳转到新的页面

属性：

action 设置提交表单的地址

method 设置表单的提交方式

get 显示传输

post 隐式传输

get与post的区别：

1.提交方式

get 显示传输

post 隐式传输

2.安全性

post 相对安全

get 不安全

3.数据大小

get（提交数据大小一般都是1024字节）

post（理论上没有限制但实际上根据内存大小和服务器的设置）

2.表单控件

input属性：

type类型

text 普通文本输入框

password 密码框

file 文件上传

radio 单选

textarea cols=“5” row=“5” 评论区（宽五行长五行）

checkbox 多选

submit 提交

reset 重置

image 图片（默认是提交属性）

button 按钮

value 值

name 名称

placeholder 文本占位符

checked 默认选中

disabled 禁用

readonly 只读

注意：checked只适用于单选按钮和复选框，checked和disabled设置时可以直接写属性名也可以写成checked = "checked"、checked = "true"

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个表格</title>
</head>

<body>
<from action="这里写服务器地址" method="get">
用户名<input type="text" placeholder="请输入您的用户名或者电话号码">
密码<input type="password" placeholder="请输入您的密码">
地址<input type="text" value="湖南省岳阳市" name="adress">
<br/>
性别<input type="radio" name="sex" checked="true">男<input type="radio" name="sex">女<input type="radio" name="sex">其他
<br/>
上传头像<input type="file">
<br/>
阅读<textarea cols="3" rows="3" type="readonly">wrryxujxfght</textarea>
<br/>
请你选择你喜欢的运动：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">兵乓球
<br/>
<input type="submit">
<input type="reset">
</from>
</body>
</html>

效果图:

3.关联标签

label

属性： for

第一种用法

给要关联的控件加上一个id

通过for属性连接id

第二种方法

直接包裹input元素

4.文本域 textarea

文本域的大小不取决于宽高，而是行数、列数

cols 列数

rows 行数

5.下拉菜单 select

option：列表项

size : 默认选项的数量如果取值大于1的话则成为一个滚动列表

selected 默认选中（selected=“true”）

6.拓展标签

iframe：浮动框架

第一个作用在一个屏幕中显示多个页面（小窗口的形式展现的）

第二个作用可以在小窗口中显示不同的网页

marquee：跑马灯标签

属性：

behavior 设置文本在 marquee 元素内如何滚动

scroll 默认值从右到左循环

slide 到左边停下

alternate 弹回来再弹回去

bgcolor 通过颜色名称或十六进制值设置背景颜色

direction 设置 marquee 内文本滚动的方向

可选值：left，right，up，down（默认值为left）

height 以像素或百分比值设置高度

hspace 设置水平边距

loop 设置 marquee 滚动的次数，默认值为 −1，表示 marquee 将连续滚动

scrollamount 设置每次滚动时移动的长度（以像素为单位），默认值为 6

scrolldelay 设置每次滚动时的时间间隔（以毫秒为单位）默认值为 85

truespeed 默认情况下，会忽略小于60的scrolldelay值，如果存在truespeed，那些值不会被忽略

vspace 以像素或百分比值设置垂直边距

width 以像素或百分比值设置宽度

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)