HTML 表格 + 表单 核心知识点汇总

一、表格 table 核心知识点

1. 基础标签结构
   table：表格容器
   tr table row：一行
   td table data：普通单元格
   th table header：表头单元格，默认加粗居中
2. 合并单元格（必考）
   跨列合并：colspan="n" 横向合并 n 格，删除后方多余 td
   跨行合并：rowspan="n" 纵向合并 n 格，删除下方多余 td
3. 表格分区标签（语义化）
   thead：表头区域
   tbody：主体数据（浏览器自动补全）
   tfoot：表尾汇总区域
4. 常用属性与 CSS
   原生属性（不推荐，优先 CSS）
   border：边框
   cellpadding：单元格内边距
   cellspacing：单元格间距
   CSS 表格样式
   border-collapse: collapse; 合并边框（最常用）
   text-align 单元格文字对齐
   vertical-align 垂直居中
5. 表格特性
   table 默认自适应内容宽度；
   设置 table-layout: fixed; 可固定列宽，均分表格；
   表格属于特殊布局，不会像浮动一样高度塌陷。
   二、表单 form 核心知识点
6. 外层 form 标签核心属性
   action：提交数据的后台接口地址
   method：提交方式
   GET：参数拼接在 URL，数据量小、可见，用于查询
   POST：数据放请求体，安全，适合提交表单、上传文件
   name：表单名称
   target：提交后页面打开方式（_blank 新窗口）
7. 表单控件通用规则
   name 属性必填：无 name 则数据无法提交到后台
   value：控件提交的值
   placeholder：输入框提示文字
   disabled：禁用控件，无法提交
   readonly：只读，可提交数据
   required：HTML5 原生非空校验
8. 输入框 input 常用 type 类型
   text：单行文本
   password：密码框，内容隐藏
   radio：单选框，同一组 name 必须相同
   checkbox：复选框，name 可加 [] 接收多值
   submit：提交按钮，触发 form 提交
   reset：重置按钮，清空表单
   button：普通按钮，无默认提交行为，配合 JS 使用
   HTML5 新增：email/tel/number/date/file 文件上传
9. 其他表单控件
   label 关联输入框
   for 属性绑定 input 的 id，点击文字自动选中输入框，提升体验
   textarea 多行文本域：rows 行、cols 列，默认 value 写在标签中间
   select 下拉选择框
   option 下拉选项，value 为提交值
   selected 默认选中
   multiple 开启多选下拉
   fieldset + legend：表单分组，语义化
10. 表单提交要点
    表单内有 type="submit" 按钮才可回车 / 点击提交；
    文件上传必须设置：form enctype="multipart/form-data"；
    GET 不支持文件上传，只能用 POST。
11. 语义化与优化
    label 绑定输入框，优化移动端点击区域；
    fieldset 对表单模块分组，可读性更好；
    使用 HTML5 类型，手机端弹出对应数字 / 键盘。
    三、高频对比 & 考点总结
    表格核心一句话
    table 由 tr 行、td/th 单元格组成，colspan 跨列、rowspan 跨行；CSS 用 border-collapse 合并边框，thead/tbody/tfoot 实现语义分区。
    表单核心一句话
    form 通过 action、method 提交数据；所有提交控件必须带 name；radio 同 name 互斥；label 绑定 id 提升交互；文件上传需要 enctype 和 POST 方式。