【CSS】高级元素:列表、表格、表单

列表

  • 列表的元素
    • 有序列表:ol、li
    • 无序列表:ul、li
    • 自定义列表:dl dt dd
  • 自定义列表
    • dl
      • 定义列表,直接元素只能是dt、dd
    • dt
      • 列表中每一项的项目名
    • dd
      • 列表的每一项的具体描述

表格

  • table
    • 表格
    • border-collapse:collapse; (塌陷的意思)
  • tr (table row)
    • 表格中的行
  • td (table data)
    • 行中的单元格
  • thead
    • 表头
  • tbody
    • 表格的主体
  • tfoot
    • 表格的页脚
  • caption
    • 表格的标题
  • th
    • 表格表头的单元格
  • 单元格合并
    • 跨行合并
      • colspan(clumn span)跨列合并
      • rowspan(row span)跨行合并

表单

  • 常见的表单元素

    • form
      • 表单,一般情况下,其他表单相关元素都是他的后代元素
    • textarea
      • 多行文本框
    • select、option
      • 下拉选择框
    • button
      • 按钮
    • label
      • 表单元素的标题
    • input:
      • text:文本输入框
      • password:文本输入框,密文
      • radio:单选框
      • checkbox:复选框
      • button:按钮
      • reset:重置
      • submit:提交表单数据给服务器
      • file:文件上传
      • readonly:只读
      • disabled:禁用
      • checked:默认被选中
        • 只有当type为redio或checkbox时可用
      • autofocus:当页面加载时,自动聚焦
      • name:名称
      • value:取值

    *其他取值查看文档:*https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

    常见的boolean属性有disabled、checked、readonly、multiple、autofocus、selected,只需要写上名称就代表这个属性

  • 表单按钮

    • 普通按钮type = button
    • 重置按钮type = reset
    • 提交按钮type = submit
    • 也可以使用button来实现
      • type = button
      • type = reset
      • type = submit
  • input和label的关系

    • label的for属性绑定input的id属性
    • radio中name值相同的才具备单选功能
    • type类型设置为checkbox成为多选框
      • 同一种类型的checkbox,name值要保持一致
  • textarea的使用

    • textarea的常用属性
      • cols:列数
      • rows:行数
    • 缩放的CSS设置
      • 禁止缩放:resize:none;
      • 水平缩放:resize:horizontal
      • 垂直缩放:resize:vertical;
      • 水平垂直缩放:resize:both;
  • select和option的使用

    • option是select的子元素,一个option代表一个选项
    • select常用属性
      • multiple:可以多选
      • size:显示多少项
    • option常用属性
      • selected:选中
  • form常见属性

    • form通常作为表单元素的父元素
      • form可以对整个表单作为一个整体进行操作
      • 表单重置或表单提交
    • form常见的属性如下:
      • action
        • 用于提交表单数据的请求接口
        • method
          • 请求方法(get、post)默认为get
        • target
          • 在什么地方打开URL
相关推荐
hunterandroid2 分钟前
[Android 从零到一] Navigation Component:让页面跳转更清晰
前端
搬砖的码农4 分钟前
(05)进程一关对话就没了:聊天记录怎么存、重启怎么恢复
前端·agent·ai编程
Csvn1 小时前
Vue 3 defineModel 翻车实录:多个 v-model 绑定到底怎么写?
前端·vue.js
甲维斯1 小时前
坦克大战测试全翻车了!豆包,DeepSeek,Qwen,GPT,Claude
前端·人工智能·游戏开发
乘风gg2 小时前
还在养虾吗?虾王已诞生:微信龙虾 ClawBot
前端·ai编程·claude
小小小小宇2 小时前
LLM 长期记忆构建
前端
lichenyang4532 小时前
从 Express 老项目到 NestJS + Docker:一次车辆管理系统的渐进式重构
前端
Momo__4 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
程序员小富4 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇4 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端