表格标签（Day3 3/4）

本页对应 Day03-HTML，共 5 段视频，约 48 分钟。

学习目标

1. 能列出表格涉及的 8 个标签（table、caption、thead、tbody、tfoot、tr、th、td），并正确写出其嵌套结构。
2. 能说明 table、tr、th/td 等标签的常用属性（如宽高、边框、cellspacing、cellpadding、align、valign、rowspan、colspan）并编写对应示例。
3. 能使用 form 包裹表单控件，并通过 action、target 属性设置提交地址和打开方式，演示表单提交行为。
4. 能创建文本输入框和密码输入框，设置 type="text"/"password" 与 maxlength，并验证输入长度限制和密码掩码效果。
5. 能创建单选框和复选框，使用相同 name 实现单选效果，使用 checked 设置默认选中，并验证单选/多选行为。
6. 能使用 input 和 button 创建提交、重置、普通按钮，设置 value 或按钮文本，并说明 type 默认值及提交按钮必须位于 form 内的原因。

知识点

本节笔记未附图片和代码，因此不虚构素材；以下依据转写稿中“表格标签总结”的标签清单与属性归属展开，并把同音字统一为正确写法。

先明确：表格标签一共8个

为什么需要： 表格不是只画几条线，而是把“外层、标题、分区、行、单元格”分层组织起来。先知道总数，才不会漏标签、混属性。
怎么想： 按“从外到内”数：最外层是 table；里面是 caption、thead、tbody、tfoot；再往里是行 tr；行里是单元格 td 和表头单元格 th。
怎么做： 记住清单：table、caption、thead、tbody、tfoot、tr、td、th，一共8个。课上也是逐个过完后，留两三分钟现场记忆。
易错点： 不要把 thead 写成“T head”，不要把 tfoot 理解成“表角”，它是表格脚/表尾；这些表格标签都是双标签，不要按单标签写。

table：最外层包裹元素

为什么需要： 一个表格必须有一个整体容器，宽高、边框、单元格间距等整体设置才有地方放。
怎么想： 先判断“这是整张表”还是“表里的一行/一格”。整张表归 table，行归 tr，格子归 td/th。
怎么做： 用 table 包住表格内容；它可设置宽、高、cellspacing（单元格之间的间距）、cellpadding（单元格内部白/边框与内容的距离）、border（边框）。
易错点： cellspacing 不是单元格内部距离，cellpadding 才是内部距离；border 是边框。属性名要拼准，不要写成“sell space”“sell padding”“bder”。

caption、thead、tbody、tfoot：标题与分区

为什么需要： 表格不只有数据，还需要标题、表头区、表体区、表尾区，结构清楚后语义和样式都更好控制。
怎么想： caption 是表格标题；thead 是表格头；tbody 是表格体；tfoot 是表格脚。它们负责“分区”，不负责具体一行一格。
怎么做： 按转写稿总结：caption 属性没什么可讲；thead、tbody、tfoot 都可设置 align 和 valign，用来控制所包裹单元格内容的横向、纵向对齐。
易错点： 不要把 thead/tbody/tfoot 当成行标签；行是 tr。转写稿里的“合 we”应纠正为 align 和 valign，不要照抄同音字。

tr：表示一行

为什么需要： 表格是二维结构，必须先有“行”，才能把单元格组织起来。
怎么想： 看到“这一整行”就想到 tr；行里再放 td 或 th。
怎么做： 用 tr 表示行；它可设置高度，也可设置 align 和 valign 控制对齐。它同样是双标签。
易错点： 不要给 tr 设“宽度”来控制某一列，列宽通常落在单元格上；转写稿特别提醒 tr 很重要，别把行和单元格混为一谈。

td与th：单元格与表头单元格

为什么需要： 真正承载内容的是单元格；表头单元格还要表达“这是表头”。
怎么想： td 是普通单元格，th 是表头单元格；两者属性基本一样，差别在语义。
怎么做： 二者都能设置宽、高、align、valign，还能跨行 rowspan、跨列 colspan。给单元格设宽，实际影响列宽；给单元格设高，实际影响行高。
易错点： 转写稿里的“Cs by”“Ros板”应纠正为 colspan、rowspan；对齐只作用于自己那个单元格范围，不要以为能控制整张表。th 也能用这些属性，不要只记 td。

收束：按结构记，不要按外观记

为什么需要： 表格标签多，死记外观容易乱；按结构记才能写对嵌套。
怎么想： 先 table，再标题/分区，再 tr，最后 td/th；属性按“整表属性、分区对齐、行高与对齐、单元格宽高/对齐/跨行跨列”归属。
怎么做： 复习时按8个标签逐个说“它管什么、能设什么属性”，再用“外层→分区→行→单元格”的顺序复述。
易错点： 不要把表单标签混进本节；本节表格标签清单就是8个，先记准数量与层级，再补属性细节。

表单整体设置：用 form 把控件包成一个提交整体

为什么需要：登录、注册、搜索、留言都不是单个输入框能完成的，而是“一组控件 + 一个提交地址”的整体。浏览器需要知道把哪些数据、提交到哪里。

怎么想：先找包裹元素 form，它类似表格里的 table，负责圈定提交边界；action 写后端处理程序地址，target 控制结果在哪打开；每个要提交的控件用 name 做字段标识。转写稿中演示了把搜索表单提交给百度：action 指向百度搜索地址，输入框 name 必须对上百度的 wd，否则后端不知道这是搜索关键字。

怎么做：

<form action="https://www.baidu.com/s" target="_blank">
  <input type="text" name="wd">
  <button type="submit">搜索</button>
</form>

调试时输入“如何一夜暴富”点搜索，页面会带着关键字跳到百度结果页；把 target 改成 _blank 后，原表单页仍保留。说明表单不是普通跳转，而是“带数据提交”。

易错点：form 不要拼成 from；action 不能随便写普通文件地址；没有 name，后端无法识别字段；提交按钮写到 form 外面点了也白瞎；target 默认是 _self。

文本输入框与密码输入框：type 决定控件形态

为什么需要：用户名、搜索词、密码都要让用户输入，但密码不能明文显示。

怎么想：input 是单标签，靠 type 变身。不写 type 时默认就是 text；密码框把 type 改成 password；两者都能用 maxlength 限制最大输入长度。

怎么做：

<input type="text" maxlength="10"><br>
<input type="password" maxlength="6"><br>

文本框中英文、标点都计数，超过 10 个输不进去；密码框显示为点，最多 6 个字符。

易错点：input 是单标签，不要写成双标签；不写 type 默认是 text，乱写一个不存在的类型没有意义；maxlength 不是 max lines；密码框只是显示掩码，不等于加密。

单选框：相同 name 才互斥

为什么需要：性别等场景只能选一个，不能“既是男又是女”。

怎么想：用 type="radio"；同一组单选框必须设置相同的 name，浏览器才认为它们是一组；默认选中用 checked。

怎么做：

<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked>其他

转写稿中的调试很关键：三个 radio 一开始没有相同 name，结果可以全选；加上同一个 name 后立刻互斥。checked 不用写值，光写属性名就生效。

易错点：name 不同就各自为战；checked 写成 checked="checked" 可以，但写其他值没有额外意义；同一组单选写多个 checked，最终只最后一个生效。

复选框：多选靠 checkbox，checked 可多个

为什么需要：爱好、权限等场景允许一次选多个。

怎么想：用 type="checkbox"；它本来就是多选，不靠 name 互斥；name 主要用于提交分组，checked 可以给多个选项默认选中。

怎么做：

<input type="checkbox" checked>唱跳
<input type="checkbox">rap
<input type="checkbox" checked>敲代码

易错点：复选框不要指望相同 name 变成单选；checked 可以同时出现多个；实际开发中 name 要和后端约定，不能随便对不上。

按钮：提交、重置、普通按钮

为什么需要：表单要有提交入口；有时要恢复默认；有时要让 JS 绑定自定义功能。

怎么想：input 和 button 都能做按钮。input 是单标签，用 value 改文字；button 是双标签，标签内容就是文字。button 不写 type 时默认是 submit，而 input 不写 type 默认是 text，这点最容易混。

怎么做：

<form action="https://www.baidu.com/s">
  <input type="text" name="wd">
  <input type="submit" value="注册">
  <input type="reset" value="重置">
  <input type="button" value="普通按钮">
  <button type="submit">登录</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

重置按钮会把表单控件恢复到默认状态，不是简单清空；普通按钮本身没有提交或重置功能，通常留给 JS 赋功能。转写稿还提醒：表单内按回车也可能触发提交，所以提交按钮要写，但不要以为只有点按钮才会提交。

易错点：提交按钮必须在 form 内；button 不写 type 默认提交，容易误触；input type="button" 默认没有文字，要用 value；重置是恢复默认值，不是删除所有内容。

课堂画面

代码示例

示例一：表格标签的完整结构（table / caption / thead / tbody / tfoot / tr / td / th）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格标签</title>
  <style>
    table { border-collapse: collapse; }
    td, th { border: 1px solid #333; }
  </style>
</head>
<body>
  <!-- table 是最外层的包裹元素，可设置 width/height/border/cellspacing/cellpadding -->
  <table width="500" border="1" cellspacing="0" cellpadding="6">
    <!-- 表格标题 -->
    <caption>前端课程表</caption>

    <!-- 表格头 -->
    <thead>
      <tr>
        <th>时间</th>
        <th>课程</th>
        <th>讲师</th>
      </tr>
    </thead>

    <!-- 表格体 -->
    <tbody align="center">
      <tr height="40">
        <td>上午</td>
        <td>HTML</td>
        <td>李</td>
      </tr>
      <tr>
        <td>下午</td>
        <!-- 跨列：把后两列合并 -->
        <td colspan="2">CSS + JS</td>
      </tr>
    </tbody>

    <!-- 表格角 -->
    <tfoot>
      <tr>
        <td colspan="3">共 2 节课</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

要点解释：

• table 是表格的最外层包裹元素，可设置 width、height、border、cellspacing（单元格之间的间距）、cellpadding（单元格内部边框与内容的距离）。
• 表头 thead、表体 tbody、表角 tfoot 都可以设置 align 和 valign，作用到它们包裹的单元格内容的水平、垂直对齐。
• tr 表示行，可设置 height、align、valign；td 是单元格，th 是表头单元格，两者属性相同：宽高、对齐、rowspan（跨行）、colspan（跨列）。
• 易错点：这 8 个标签（table、caption、thead、tbody、tfoot、tr、td、th）全部是双标签，不能自闭合；给某一个单元格设宽，其实影响的是整列，设高其实影响的是整行。

---

示例二：表单总体设置（form / action / target / input / submit）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单总体设置</title>
</head>
<body>
  <!-- form 是表单的包裹元素，action 是提交地址，target 默认 _self -->
  <form action="https://www.baidu.com/s" target="_blank">
    请输入关键字：
    <!-- input 是单标签，type 默认值是 text；name 是提交数据的标识 -->
    <input type="text" name="wd">
    <!-- 提交按钮，value 用来改按钮上的文字 -->
    <input type="submit" value="搜索">
  </form>
</body>
</html>

要点解释：

• form 是表单的包裹元素，作用是收集用户输入的内容并提交到指定地址。拼写是 form，不是 from（where are you from 那个 from 不提交数据）。
• action 用来设置提交地址，类似超链接的 href，但必须是一个具备处理这些信息能力的程序地址；不写 action 就提交给自己，而当前页面没有处理能力，等于白提交。
• name 是提交数据的标识，后端靠它区分哪个是用户名、哪个是密码、哪个是搜索关键字；本例中百度搜索关键字的 name 就是 wd，写错了后端就不认。
• target 和超链接一样，默认 _self，改成 _blank 后提交结果在新窗口打开，原表单还在。
• 易错点：input 是少见的单标签；提交按钮必须写在 form 里面，写到外面点了也白点。

---

示例三：表单控件（文本框 / 密码框 / 单选框 / 复选框 / 三种按钮）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单控件</title>
</head>
<body>
  <form action="https://www.baidu.com/s">
    <!-- 1. 文本输入框：type 不写默认就是 text -->
    用户名：<input type="text" name="username" maxlength="10"><br><br>

    <!-- 2. 密码输入框：内容以密文（点点点）显示 -->
    密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" maxlength="6"><br><br>

    <!-- 3. 单选框：相同 name 才能实现"只能选一个" -->
    性&nbsp;&nbsp;&nbsp;别：
    <input type="radio" name="gender" value="man">男
    <input type="radio" name="gender" value="woman">女
    <input type="radio" name="gender" value="other" checked>其他<br><br>

    <!-- 4. 复选框：可一次选多个，checked 可给多个 -->
    爱&nbsp;&nbsp;&nbsp;好：
    <input type="checkbox" name="hobby" value="sing">唱跳
    <input type="checkbox" name="hobby" value="rap">rap
    <input type="checkbox" name="hobby" value="ball">打篮球
    <input type="checkbox" name="hobby" value="code" checked>敲代码<br><br>

    <!-- 5. 三种按钮 -->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮01">

    <!-- button 是双标签，type 默认值就是 submit -->
    <button>登录</button>
  </form>
</body>
</html>

要点解释：

• type 是 input 的类型开关，值不同就是不同的控件；type 的默认值是 text，所以不写 type 或乱写一个不存在的值，表现都是文本输入框。
• maxlength 限制最大输入长度，超过就敲不进去了，中文、字母、标点都按 1 个算。
• 单选框要实现单选，必须给同一组 radio 设置相同的 name，否则它们互不相干，会出现“全性别无死角”的情况。
• checked 用来设置默认选中，它不需要值，只把属性名写上就生效（写成 checked="checked" 也可以，但纯属画蛇添足）。单选框同时写两个 checked 只认最后一个，属于无意义操作；复选框可以给多个 checked。
• 三种按钮：submit 提交表单（value 可改按钮文字）、reset 恢复到默认状态、button 是没有任何功能的普通按钮，专门留给 JS 赋功能。
• 易错点：input 的 type 默认是 text，而 button 标签的 type 默认是 submit，两者不一样；button 是双标签，里面必须写字；重置按钮现在实际开发中已经很少写了。

常见错误

1. 现象：<form> 写成 <from>，点击提交无反应。→ 原因：拼写错误，浏览器不识别为表单容器。→ 修法：统一改为 form，并检查 action、target 是否写在 form 上。
2. 现象：多个性别单选框可以同时选中。→ 原因：同组 radio 的 name 不一致，浏览器不认为它们是一组。→ 修法：同组单选框设置相同的 name。
3. 现象：复选框写 checked="false" 以为不会默认选中。→ 原因：checked 是布尔属性，出现即选中，属性值无实际意义。→ 修法：要默认选中只写 checked；不选中则删除该属性。
4. 现象：点击按钮后页面刷新或提交到当前页。→ 原因：按钮写在 form 外，或 button 未写 type 时默认按提交按钮处理。→ 修法：提交按钮放入 form 内；非提交按钮显式写 type="button"。
5. 现象：表格的 cellspacing 和 cellpadding 效果混淆。→ 原因：分不清“单元格之间距离”和“单元格内容与边框距离”。→ 修法：间距用 cellspacing，内边距用 cellpadding，实际开发优先用 CSS 控制。
6. 现象：输入框有内容但目标页收不到，或搜索参数无效。→ 原因：缺少 name，或 name 与目标程序约定不一致。→ 修法：需要提交的控件设置正确 name，并与后端/目标接口对齐。
7. 现象：忘记写提交按钮，测试时按回车却能提交，误以为功能完整。→ 原因：表单内回车可触发提交，掩盖了缺少提交按钮的问题。→ 修法：显式添加提交按钮，并分别测试点击提交和回车提交。
8. 现象：给单选框/复选框设置 maxlength 想限制选择数量。→ 原因：maxlength 只对文本类输入有效。→ 修法：选择数量限制用业务逻辑或 JavaScript 控制。

练习

1. 用 table、caption、thead、tbody、tfoot、tr、th、td 写一个课程表，至少包含一处 rowspan 和一处 colspan，并标注每个属性作用在哪个元素上。
2. 写一个登录表单：action 指向 /login，target="_blank"；包含用户名文本框、密码框、提交按钮。提交按钮分别用 input 和 button 各写一版，并比较默认行为。
3. 找错并修改：三个 radio 的 name 各不相同；一个 checkbox 默认选中写成 checked="false"；一个普通按钮在 form 内未写 type。说明每处修改理由。
4. 写一组爱好复选框：唱跳、rap、敲代码，默认选中“敲代码”，提交按钮文字为“免费注册”；要求需要提交的控件都设置 name。
5. 简答：为什么表单控件需要 name？单选框为什么要设置相同 name？提交按钮为什么应放在 form 内？

原视频对照

#	视频	时长
1	表格标签总结	03:21
2	表单总体设置	20:00
3	表单控件-文本输入框和密码输入框	05:31
4	表单控件-单选框和复选框	10:29
5	表单控件-按钮	09:28

小结

1. 表格按“容器—分区—行—单元格”的层级记忆，属性要结合作用范围判断。
2. 表单不是单个输入框，而是“容器 + 控件 + 提交目标”的整体。
3. input 的 type 决定控件形态，name 决定提交标识和单选分组。
4. 单选与复选的核心差异是选择规则，默认选中统一用 checked。
5. 提交按钮是表单闭环的关键，button 默认 submit 要特别小心。
6. HTML 负责语义与提交，CSS 负责外观，JavaScript 负责普通按钮等交互。
7. 测试表单要同时覆盖点击提交、回车提交、目标地址和参数名。