【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
相关推荐
极客密码4 小时前
感谢雷总!Mimo大模型价值¥659/月的 MAX 套餐,让我免费领到了!
前端·ai编程·claude
深念Y5 小时前
我明白为什么B站没法在浏览器开直播了——Windows Chrome推流踩坑全记录
前端·chrome·webrtc·浏览器·srs·直播·flv
zhangxingchao5 小时前
AI应用开发七:可以替代 RAG 的技术
前端·人工智能·后端
Sun@happy6 小时前
现代 Web 前端渗透——基础篇(1)
前端·web安全
希冀1236 小时前
【CSS学习第十一篇】
前端·css·学习
隔窗听雨眠6 小时前
doctype、charset、meta如何控制整个渲染流水线
java·服务器·前端
kyriewen6 小时前
写组件文档写到吐?我用AI自动生成Storybook,同事以后直接抄
前端·javascript·面试
excel7 小时前
🧠 Prisma 表名大写 vs SQL 导出小写问题深度解析(附踩坑与解决方案)
前端·后端
周淳APP7 小时前
【前端工程化原理通识:从源头到运行时的理论阐述】
前端·编译·打包·前端工程化
五点六六六7 小时前
你敢信这是非Native页面写出来的渐变效果吗🌝(底层原理解析
前端·javascript·面试