持续创作,加速成长!这是我参与「掘金日新计划 · 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:默认被选中