列表元素、表格常见元素

136 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第8天,点击查看活动详情

1.列表

1.1有序列表-ol - li

ol (ordered list)

有序列表,直接子元素只能是li

li (list item)

列表中的每一项

1.2无序列表-ul -li

ul(unordered list)

无序列表,直接子元素只能是li

1.3定义列表-dl - dt - dd

dl (definition list)

定义列表,直接子元素只能是dt、dd

dt(definition term)

term是项的意思,列表中每一项的项目名

dd (definition description)

列表中每一项的具体描述,是对dt的描述、解释、补充

一个dt后面一般紧跟着1个或者多个dd

2.表格常见的元素

编写表格最常见的是下面的元素:

table 表格

tr(table row) 表格中的行

td(table data) 行中的单元格

另外表格有很多相关的属性可以设置表格的样式,但是已经不推荐使用了

表格的其他元素

thead

表格的表头

tbody

表格的主体

tfoot

表格的页脚

caption

表格的标题

th

表格的表头单元格

单元格合并

单元格合并分成两种情况:

跨列合并:使用colspan

√在最左边的单元格写上colspan属性,并且省略掉合并的td;

跨行合并:使用rowspan

√在最上面的单元格协商rowspan属性,并且省略掉后面tr中的td;

快速创建6列12行表格:tr * 12 > td{内容} * 6

3.常见的表单元素

form表单,一般情况下,其他表单相关元素都是它的后代元素

input 单行文本输入框、单选框、复选框、按钮等元素

textarea 多行文本框公

select、option下拉选择框

button 按钮

label 表单元素的标题

4.input元素的使用

input元素有如下常见的属性:

type: input的类型

text:文本输入框(明文输入)

password:文本输入框(密文输入)

radio:单选框

checkbox:复选框

button:按钮

reset:重置

submit:提交表单数据给服务器

file:文件上传

readonly:只读

disabled:禁用

checked: 默认被选中

只有当type为radio或checkbox时可用

autofocus:当页面加载时,自动聚焦

name:名字

在提交数据给服务器时,可用于区分数据类型

value:取值

表单按钮

表单可以实现按钮效果:

普通按钮(type=button) :使用value属性设置按钮文字

重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)

提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)

我们也可以通过按钮来实现:

input和label的关系

label元素一般跟input配合使用,用来表示input的标题

labe可以跟某个input绑定,点击label就可以激活对应的inpout,变成选中

textarea的使用

textarea的常用属性:

cols:列数

rows:行数

缩放的CSS设置

禁止缩放: resize: none;

水平缩放: resize: horizontal;

垂直缩放: resize: vertical;

水平垂直缩放:resize: both;

select和option的使用

option是select的子元素,一个option代表一个选项

select常用属性

multiple:可以多选

size:显示多少项

option常用属性

selected:默认被选中