列表/表格/表单

列表展示

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

demo展示

列表相关的常见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

table { border-collapse: collapse; }
合并单元格的边框

表单

image.png

form: 表单 一般情况下，其他表单相关元素都是它的后代元素
input: 单行文本输入框、单选框、复选框、按钮等元素
textarea: 多行文本框
select、option: 下拉选择框
button: 按钮
label: 表单元素的标题
fieldset: 表单元素组
legend: fieldset的标题