【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
相关推荐
用户461169657287 分钟前
网站 HTTPS 不稳定?证书排查指南
前端
n876518 分钟前
Playwright Java WEB UI 自动化实现框架与逻辑
java·前端·ui
keyipatience20 分钟前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge20251 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
wangruofeng1 小时前
2026 Web 技术选型指南,AI 时代如何选择适合项目的技术栈
前端·aigc·ai编程
honkun61 小时前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
爱勇宝2 小时前
研究数字孪生的这半年,做了个 Demo,也有了一些新想法
前端·程序员
不可能片场2 小时前
工程实践 一个缓存把选片从十分钟压到一分钟
前端·electron
前端小万2 小时前
探索副业五个月,最终以放弃告终
前端·后端·面试
FRing032 小时前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式