列表/表格/表单
HTML提供了3组常用的用来展示列表的元素
有序列表:ol、li
无序列表:ul、li
定义列表:dl、dt、dd
有序列表 – ol、li
-
ol(ordered list)
有序列表,直接子元素只能是li -
li(list item)
列表中的每一项
image.png
无序列表:ul、li
-
ul(unordered list)
无序列表,直接子元素只能是li -
li(list item)
列表中的每一项
image.png image.png -
li一定要是ul或者ol的直接子元素
定义列表:dl、dt、dd
-
dl(definition list)
定义列表,直接子元素只能是dt、dd -
dt(definition term)
列表中每一项的项目名 -
dd(definition description)
列表中每一项的具体描述,是对 dt 的描述、解释、补充
一个dt后面一般紧跟着1个或者多个dd -
dt、dd常见的组合
事物的名称、事物的描述
问题、答案
类别名、归属于这类的各种事物
image.png
列表相关的常见CSS属性有4个:list-style-type、list-style-image、list-style-position、list-style
适用于display设置为list-item的元素,比如li元素
它们都可以继承,所以设置给ol、ul元素,默认也会应用到li元素
list-style-type:设置li元素前面标记的样式
disc(实心圆)、circle(空心圆)、square(实心方块)
decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)
lower-alpha(小写英文字母)、upper-alpha(大写英文字母)
none(什么也没有)
表格
image.png-
常用属性
-
table
表格 -
tr
表格中的行 -
td
行中的单元格
-
-
细线表格的实现
- 方法1
表格的border为0(或不设置border)
分别设置表格、单元格的背景色
表格的背景色决定了表格线的颜色
设置cellspacing的值
决定了表格线的粗细 -
方法2
image.png
- 方法1
table { border-collapse: collapse; }
合并单元格的边框
表单
image.pngform: 表单 一般情况下,其他表单相关元素都是它的后代元素
input: 单行文本输入框、单选框、复选框、按钮等元素
textarea: 多行文本框
select、option: 下拉选择框
button: 按钮
label: 表单元素的标题
fieldset: 表单元素组
legend: fieldset的标题