尚硅谷前端 2023 · 教程站

主题

HTML&CSS（Day4 1/3） ​

本页对应 Day04_HTML&CSS，共 7 段视频，约 1 小时 14 分。

学习目标 ​

  • 能使用 table、caption、thead/tbody/tfoot、tr、th、td 构建结构严谨的表格，并通过宽高、边框、单元格间距、内容对齐及 rowspan/colspan 完成简历表格的跨行跨列布局。
  • 能使用 form 的 action/target 搭建表单，并选用 input（文本框、密码框、单选框、复选框、提交/重置/普通按钮）、textarea、select/option、button 等控件实现常见表单项。
  • 能正确设置表单控件的 name、value、disabled、checked、maxlength 等属性，并说明其在控件分组、默认值、不可用状态和数据提交中的作用。
  • 能使用 label 的 for-id 关联和包裹关联两种方式，将描述文字或选项文字与输入框、单选框、复选框、文本域关联，并判断哪些控件需要关联。
  • 能使用 fieldset 与 legend 为表单控件分组并添加标题，说明其语义与使用场景。
  • 能使用 iframe 的 src、width、height、frameborder 将网页、图片、视频、PDF、文本等文件嵌入当前页面，并说明 frameborder=0、浏览器不支持文件类型时的表现及广告嵌入等应用。

知识点 ​

（说明：本节笔记正文未附图片文件与完整代码，以下依据转写稿中明确出现的标签、属性整理代码示意；转写稿提到的“老头乐照片”等图片位置以注释保留，不编造图片路径。）

简历表格：先定结构，再处理跨行跨列 ​

为什么需要：表格题最容易“看起来会、写起来跨不出来”。转写稿里反复提醒：table 内部结构要严谨，thead/tbody/tfoot、tr、td/th 各有层级；简历表格还要求总宽、列宽、行高，必须先把结构想清楚。

怎么想：先判断哪些行是普通行，哪些单元格要 rowspan 跨行、colspan 跨列。转写稿的做法是：带说明性的字用 th，需要填写的用 td；若上一行有单元格向下跨，后续行就要少写一个单元格，把位置空出来。列宽给第一行每个单元格设置，后续列会跟着走；行高则要逐行设置。

怎么做：

html
<table width="600" cellspacing="0" cellpadding="5">
  <caption>简历</caption>
  <tbody>
    <tr height="40">
      <th width="120">姓名</th><td width="120"></td>
      <th width="120">性别</th><td width="120"></td>
      <td width="120" rowspan="3"><!-- 原笔记此处放照片：老头乐 --></td>
    </tr>
    <tr height="40">
      <th>出生年月</th><td></td><th>籍贯</th><td></td>
    </tr>
    <tr height="40">
      <th>政治面貌</th><td></td><th>民族</th><td></td>
    </tr>
    <tr height="40">
      <th>家庭住址</th><td></td><th>Email</th><td colspan="2"></td>
    </tr>
  </tbody>
</table>

图片放进跨三行的单元格后，转写稿给图片设宽高约 100，再给该 td 设 align="center"、valign="middle" 让图片居中。调试时发现图片下方“格外大一点”，明确说这是行内元素底部幽灵空白，留到 CSS 布局阶段解决，不在 HTML 阶段硬改。

易错点：rowspan/colspan 写错后行列对不上；后续行忘记少写单元格；tr 只能设高度，不能设宽度；同一行两个单元格都跨行并不能把行高变成两倍，转写稿说“你跨我也跨，没有参照”，此时直接设行高更稳。

表单与表格配合：用表格做对齐 ​

为什么需要：表单里“姓名、年龄、性别、职业、自我介绍”左侧文字长短不一，直接写会歪。转写稿用 table 把描述文字和控件分列，形成整齐的左右结构。

怎么想：form 放最外层，table 放里面；table 结构严密，所以内容放 tbody，再一行行写 tr。姓名没加粗，因此用 td 不用 th。

怎么做：

html
<form action="提交地址">
  <table>
    <tbody>
      <tr><td>姓名</td><td><input type="text"></td></tr>
      <tr><td>性别</td><td>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
      </td></tr>
      <tr><td>职业</td><td>
        <select><option>公务员</option><option>程序员</option></select>
      </td></tr>
      <tr><td>自我介绍</td><td><textarea></textarea></td></tr>
      <tr><td></td><td><input type="submit"><input type="reset"></td></tr>
    </tbody>
  </table>
</form>

“自我介绍”四个字比别的字长，表格自动对齐；文字默认纵向居中，转写稿给该 td 设 valign="top" 让它靠上。提交按钮用 input type="submit"，重置用 type="reset"。

易错点：form 不能套 form；转写稿中曾出现“form 跑偏”，要检查包裹关系；单选框要同 name 才互斥；下拉选项用 select + option，不是 input。

label：让文字也能操作控件 ​

为什么需要：输入框要先点一下才获取焦点；单选框要点小圆圈才选中。label 能把描述文字和控件关联，点文字也能输入或选中，提升体验。

怎么想：输入框类常用“描述文字包 label，label 的 for 等于输入框的 id”；单选框/复选框更适合把 input 和后面的文字一起包进 label，因为一个“性别”文字无法公平地只关联男或女。

怎么做：

html
<label for="userName">用户名</label>
<input id="userName" type="text">

<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>

转写稿也演示了选择框用 for/id 关联的写法，但结论是：输入框、选择框、文本域关联有意义；下拉选项获取焦点也不能自动展开，按钮也不需要关联。

易错点：for 必须对应 id，id 必须唯一；name 可相同，但不能拿 name 做关联；不要给两个单选框设同一个 id。

fieldset 与 legend：了解带框分组 ​

为什么需要：把一组表单控件框起来并加标题，形成分组效果。转写稿说它“了解即可”，因为布局样式现在更多交给 CSS。

怎么做：

html
<fieldset>
  <legend>表单示例</legend>
  <input type="text">
</fieldset>

易错点：legend 通常与 fieldset 配合；不要把它当主要布局手段。

iframe：把其他文件引入当前页面 ​

为什么需要：转写稿用广告举例：小网站接入广告联盟后拿到一段地址，用 iframe 放到页面合适位置；广告内容会变，所以不是简单放一张图。

怎么想：iframe 的 src 是目标文件地址；宽高可设；frameborder="0" 表示无边框，其他非零数字表示有边框，它不是边框宽度。它能引入网页、图片、视频、PDF、文本等浏览器能打开的类型；打不开的文件会变成下载。

怎么做：

html
<iframe src="目标地址" width="600" height="250" frameborder="0"></iframe>

易错点：目标网站可拒绝被嵌入，转写稿演示京东会拒绝连接请求；不要以为 frameborder 的数字是边框粗细；引入文件必须是浏览器可打开类型。

回顾的定位与学习顺序 ​

本节回顾“三表”：列表、表格、表单。它们共同点是标签嵌套有明确规则，不能凭感觉乱套。转写稿里反复强调“外边必须套一个”“结构必须严谨”，说的就是先判断内容语义，再选择标签，最后才调属性。学习顺序建议是：先能默写结构，再记常用属性，最后通过小案例调试跨行跨列、表单提交标识。转写稿中的“Ction”应写作 caption，“he body”应写作 tbody，“踢foot”应写作 tfoot，“Teach”应写作 th，“salesp”应写作 cellspacing，“rooseback/cosplay”应写作 rowspan/colspan。

列表：三种列表的语义与嵌套 ​

为什么需要：并列内容用无序列表，有顺序的内容用有序列表，名词解释用定义列表。怎么想：先看内容关系——是否讲顺序、是否是“词—解释”关系。怎么做：保留笔记中的标签关系：

html
<ul>
  <li>无序列表项</li>
</ul>
<ol>
  <li>有序列表项</li>
</ol>
<dl>
  <dt>定义项</dt>
  <dd>解释说明</dd>
</dl>

易错点：li 只能被 ul 或 ol 直接包裹，不能随意塞到别的标签里；dl 内部用 dt/dd 表示定义项和解释项。转写稿说“不能胡来”，指的就是这种父子关系要先写对。

表格：结构先于样式 ​

为什么需要：表格用于表达二维数据关系，例如简历、成绩单。怎么想：先把表格分成标题区和数据区，再写行和单元格。转写稿中的表格结构可整理为：

html
<table>
  <caption>表格标题</caption>
  <thead>
    <tr><th>表头</th></tr>
  </thead>
  <tbody>
    <tr><td>数据</td></tr>
  </tbody>
  <tfoot>
    <tr><td>表尾</td></tr>
  </tfoot>
</table>

怎么做：table 上可设 width、height、border、cellspacing、cellpadding；单元格内容横向对齐用 align，纵向对齐用 valign；跨行用 rowspan，跨列用 colspan。调试时要按转写稿的思路：先写行看结构，再给第一行单元格设宽度，让整列宽度一致；行高则逐行设置；图片放进跨行单元格后设小宽度并 align="center"、valign="middle"。

易错点：转写稿说“即使你在 table 中直接写 tr，浏览器会自动补 tbody”，所以不要以为源码没写就不存在；给 td/th 设宽会影响整列，设高会影响整行；tr 能设高度但不能设宽度，因为行宽要跟整个表格一致；同一行两个单元格一起 rowspan 没有参照，等于白跨，应该直接设行高；上行有跨行时，后续行要少写对应单元格，把位置空出来。

表单：整体、控件与提交标识 ​

为什么需要：表单负责收集用户输入并提交给后端。怎么想：form 管提交地址和打开方式，控件管输入，name/value 管数据标识和值。怎么做：整体用 form 的 action 设提交地址，target 与超链接 target 同理；控件掌握 9 类：文本输入框、密码输入框、单选框、复选框、提交按钮、重置按钮、普通按钮、文本域、下拉选项。

html
<form action="后端地址" target="_blank">
  <input type="text" name="username" value="">
  <input type="password" name="pwd">
  <input type="radio" name="gender" value="男">
  <input type="checkbox" name="hobby" value="读书">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
  <input type="button" value="普通按钮">
  <textarea name="desc"></textarea>
  <select name="job">
    <option value="ceo">首席执行官</option>
  </select>
</form>

易错点：单选框要设相同 name 才能一组单选；提交按钮不建议设 name，因为它是触发开关，不该作为数据提交；value 对文本框是默认显示文字，对单选/复选是实际提交内容，转写稿说“没有实际提交过程时先尽量理解”；textarea 是双标签，默认文字写在标签内；option 不设 value 时提交双标签文本，设了才提交 value；button 标签默认 type 是 submit，不写属性也会提交；form 不能套 form。disabled 表示不可用，转写稿用“只能看不可用”概括。

小结：回顾检查表 ​

能默写三种列表结构；能画出 table→caption/thead/tbody/tfoot→tr→td/th；能说清 cellspacing/cellpadding、align/valign、rowspan/colspan；能列出表单 9 类控件并说明 name/value/disabled 的作用。调试时先看结构是否合法，再看属性是否作用到正确的行列或控件上。

表单的整体结构：form ​

为什么需要： 表单用于把用户填写或选择的数据提交给后端，所以要先有一个整体包裹元素，把各类控件组织起来。
怎么想： 最外层用 form，通过 action 指定提交地址，通过 target 控制从哪个窗口打开，含义与超链接的 target 一致。
怎么做：

html
<form action="后端程序地址" target="_blank">
  <!-- 表单控件写在这里 -->
</form>

易错点： action 通常要等实际开发时由后端程序员提供，练习时可先写一个地址；form 不能套 form，转写稿中演示时曾出现“form 跑偏”的情况，要保证各表单各自独立。

表单控件九类：input、button、textarea、select ​

为什么需要： 用户数据不只有文字，还有密码、单选、多选、按钮、多行文本和下拉选项，所以要按类型选择控件。
怎么想： 先按“输入类、选择类、按钮类、多行文本、下拉选项”分类，再记 input 的 type 值。
怎么做：

html
<input type="text">
<input type="password">
<input type="radio" name="gender">
<input type="checkbox">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<button type="submit">提交</button>
<textarea rows="5" cols="30"></textarea>
<select>
  <option>公务员</option>
  <option>程序员</option>
</select>

易错点： input 是单标签；button 标签默认 type 就是 submit，不写也会提交；textarea 是双标签，默认显示内容写在标签中间；下拉选项要由 select 包裹 option。

控件属性：name、value、disabled ​

为什么需要： 后端接收数据时要区分“这是哪个字段”，前端也要设置默认值、提交值和不可用状态。
怎么想： name 是控件标识；value 对不同控件含义不同；disabled 表示不可用。
怎么做：

html
<input type="text" name="username" value="默认文字">
<input type="radio" name="gender" value="男">
<input type="radio" name="gender" value="女">
<input type="text" name="age" disabled>

易错点： 单选框要设置相同 name 才能实现一组单选；提交按钮不建议设置 name，它本身是触发提交的开关；value 对文本框是默认显示文字，对单选/复选是实际提交内容；disabled 设置后只能看不能用。

label：提升点击体验 ​

为什么需要： 文本输入框要先点输入框才能输入；单选框要点小圆圈才能选中。用 label 可以把描述文字和控件关联起来，点文字也能聚焦或选中。
怎么想： 输入框类常用 for 关联 id；单选、复选框常把 input 和后边文字一起包进 label。
怎么做：

html
<label for="username">用户名</label>
<input id="username" type="text">

<label>
  <input type="radio" name="gender" value="男">男
</label>
<label>
  <input type="radio" name="gender" value="女">女
</label>

易错点： for 的值必须对应控件的 id，且 id 必须唯一；name 不能用于 label 关联；下拉选项和按钮一般不需要关联，因为获取焦点并不能提升实际体验。

fieldset 与 legend：分组和标题 ​

为什么需要： 一组表单控件较多时，可以用边框和标题做视觉分组。
怎么想： fieldset 包住一组控件，legend 写这组的标题，二者配合使用。
怎么做：

html
<fieldset>
  <legend>表单示例</legend>
  <label for="username">用户名</label>
  <input id="username" type="text">
</fieldset>

易错点： 它主要营造带框效果，现代布局更多交给 CSS；单独用 legend 意义不大；这组标签了解即可，不必深究。

调试与小结 ​

转写稿中的调试过程很值得复盘：写简历表格时，跨行跨列要少写被跨掉的单元格；表单和表格混用时，把 table 放进 form 里组织布局；测试 label 时，点“用户名”看输入框是否获取焦点，点“男”看单选框是否被选中。表单部分要重点掌握 form、九类控件、name/value/disabled 和 label 的两种关联方式。转写稿后段还提到 iframe，它属于内联框架，不是表单控件，可后续单独整理。

内联框架标签是什么 ​

iframe 叫内联框架标签，语义是“把各种类型的文件引入当前页面”。可以把它想成当前页面里开了一个小窗口，窗口里显示谁，由 src 决定；窗口多大，由 width、height 决定；窗口有没有边，由 frameborder 决定。它不是表单控件，也不是用来替代 img 的图片标签，而是把另一个文件“嵌”进来。

为什么需要它？因为有些内容不适合直接写死在当前 HTML 里，比如广告代码、别人提供的网页、视频、PDF、txt 等。转写稿里演示广告时提到：广告推广联盟会给一段代码，本质上就是一个网页地址，用 iframe 放到页面合适位置即可；广告内容还会变化，不同用户看到的不一样，所以不能简单用一张固定图片代替。

基本属性与写法 ​

本节笔记表格如下：

标签名功能和语义属性单标签还是双标签
iframe内联框架<br>将各种类型的文件引入当前页面src: 设置目标文件地址。<br>frameborder：设置是否有边框，0表示没有，其他数字表示有。<br>width：设置宽度。<br>height：设置高度。双标签

怎么写？先写一个 iframe，再给 src 一个目标文件地址。例如引入一个网页：

html
<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

这里要抓住几个点：src 是目标文件地址；width、height 设置这个小窗口的宽高；frameborder="0" 表示不要边框，写其他非零数字表示有边框。注意 frameborder 不是“边框宽度”，它只表示有没有边框。转写稿里专门调试过：写 0 后四周边框消失，写其他数字又出现边框。

默认大小与调试过程 ​

转写稿的演示顺序很适合理解：先写一个 iframe，src 先空着，打开页面仍能看到一个框。为什么？因为 iframe 有默认大小，演示中默认约为 300×150；有边框时看起来会略大一点，去掉边框后就是完整的 300×150。这说明：即使不写宽高，它也不是“什么都没有”，而是有默认尺寸。

接着把 src 换成网页地址，刷新后网页就出现在小窗口里；觉得小，就加 width="600"、height="400"，甚至更宽更高。再去掉 frameborder，观察边框变化。这个调试过程说明：src 决定内容，宽高决定窗口，frameborder 决定边。

能引入哪些文件 ​

iframe 可以把网页、图片、视频、PDF、txt 等引入当前页面。转写稿里分别试过：网页能打开；图片能显示，但不像 img 那样按图片原尺寸自适应，窗口设多大就显示多大，内容超出会出现滚动条；视频演示中会按设置的宽度显示；PDF、txt 也能在浏览器支持时直接显示。若引入浏览器打不开的文件，比如 Word 文件，浏览器可能不显示内容，而是变成下载。所以易错点是：不是“写了 src 就一定显示”，还要看浏览器是否支持该文件类型。

广告与限制 ​

iframe 常见用途是广告。广告联盟给一个地址，按联盟要求的尺寸写 width、height，把地址放进 src，页面中就出现广告窗口。转写稿还提到：被引入的网站可以拒绝被 iframe 引入，演示中某电商网站就拒绝了连接请求；所以不是所有页面都能随便嵌。另一个易错点是：iframe 是双标签，不要当单标签草率处理；src 为空时仍可能有默认框；frameborder="0" 不是宽度为 0；宽高不设置就用默认值。掌握这些，内联框架的基本用法就清楚了。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：简历表格（跨行跨列综合练习） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简历表格</title>
</head>
<body>
  <!-- 表格总宽 600，边框 1，单元格间距 0，内容与边框间距 5 -->
  <table width="600" border="1" cellspacing="0" cellpadding="5">
    <caption>简历</caption>
    <tbody>
      <!-- 第 1 行：5 个单元格，最后一个单元格向下跨 3 行 -->
      <tr height="40">
        <th width="120">姓名</th>
        <td width="120"></td>
        <th width="120">性别</th>
        <td width="120"></td>
        <td width="120" rowspan="3" align="center" valign="middle">
          <img src="photo.jpg" width="100" height="100" alt="照片">
        </td>
      </tr>
      <!-- 第 2、3 行：只写 4 个单元格，第 5 个位置已被上面的跨行占掉 -->
      <tr height="40">
        <th>出生年月</th><td></td>
        <th>籍贯</th><td></td>
      </tr>
      <tr height="40">
        <th>政治面貌</th><td></td>
        <th>民族</th><td></td>
      </tr>

      <!-- 下面三行结构相同：第 4 个单元格跨 2 列 -->
      <tr height="40">
        <th>家庭住址</th><td></td>
        <th>Email</th><td colspan="2"></td>
      </tr>
      <tr height="40">
        <th>毕业院校</th><td></td>
        <th>学历</th><td colspan="2"></td>
      </tr>
      <tr height="40">
        <th>专业</th><td colspan="3"></td>
      </tr>

      <!-- 求职意向：第二个单元格跨 4 列 -->
      <tr height="40">
        <th>求职意向</th><td colspan="4"></td>
      </tr>

      <!-- 学习工作经历：第 1 行 5 个单元格，第一个向下跨 5 行 -->
      <tr height="40">
        <th rowspan="5">学习工作经历</th>
        <th>起止时间</th>
        <th>工作单位</th>
        <th>职务</th>
        <th>岗位职责及业绩</th>
      </tr>
      <tr height="40"><td></td><td></td><td></td><td></td></tr>
      <tr height="40"><td></td><td></td><td></td><td></td></tr>
      <tr height="40"><td></td><td></td><td></td><td></td></tr>
      <tr height="40"><td></td><td></td><td></td><td></td></tr>

      <!-- 高度是普通行的两倍：直接给 tr 设 height=80，而不是两个 td 各跨 2 行 -->
      <tr height="80">
        <th>个人能力</th><td colspan="4"></td>
      </tr>
      <tr height="80">
        <th>兴趣爱好</th><td colspan="4"></td>
      </tr>
      <tr height="80">
        <th>个人评价</th><td colspan="4"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

关键行与易错点

  • width="600"、border、cellspacing、cellpadding 都是 table 的标签属性，不是 CSS。
  • caption 必须紧跟在 table 开始标签后面；内容统一放进 tbody，结构才严谨（table 里能放的只有 caption、thead、tbody、tfoot）。
  • 列宽只需要给第一行的每个单元格设 width="120"，后面所有行都会跟着这一列走；行高必须逐行给 tr 设置，因为 tr 只能设高、不能设宽（行的宽度由整张表格决定）。
  • 最典型的易错点：有单元格向下跨行时，后面的行必须少写对应数量的单元格。第 1 行最后一个 td 跨了 3 行，所以第 2、3 行只能写 4 个单元格，否则表格会被撑歪。
  • 图片格用 rowspan="3" + align="center" + valign="middle" 让图片居中；图片设成 100×100，因为三行加起来才 120，留出 cellpadding 后空间更小。
  • 同一行的所有单元格一起跨行是没有意义的（没有参照物，跨了也白跨），想让"个人能力"这行变高，正确做法是给 tr 设 height="80"。

示例二：表格布局的表单 + label 关联 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单 + label</title>
</head>
<body>
  <!-- form 是最外层包裹元素，绝不能再嵌套 form -->
  <form action="https://example.com/register" method="post">
    <!-- fieldset 包起来会有一圈边框，legend 是这个框的标题（了解即可） -->
    <fieldset>
      <legend>注册</legend>

      <table width="600" border="1" cellspacing="0" cellpadding="5">
        <tbody>
          <!-- 文本输入框：label 的 for 对应 input 的 id -->
          <tr height="40">
            <td width="150"><label for="username">姓名</label></td>
            <td><input type="text" id="username" name="username" maxlength="20"></td>
          </tr>
          <tr height="40">
            <td><label for="age">年龄</label></td>
            <td><input type="text" id="age" name="age"></td>
          </tr>

          <!-- 单选框：label 直接把 input 和后面的文字包起来 -->
          <tr height="40">
            <td>性别</td>
            <td>
              <label><input type="radio" name="gender" value="male">男</label>
              <label><input type="radio" name="gender" value="female">女</label>
            </td>
          </tr>

          <!-- 下拉选项：option 不写 value 时，提交的是双标签里的文字 -->
          <tr height="40">
            <td><label for="job">职业</label></td>
            <td>
              <select id="job" name="job">
                <option>公务员</option>
                <option>程序员</option>
                <option>服务员</option>
                <option>调研员</option>
                <option>消防员</option>
                <option>首席执行官</option>
              </select>
            </td>
          </tr>

          <!-- 文本域：文字靠上对齐，需要给 td 加 valign="top" -->
          <tr height="80">
            <td valign="top"><label for="desc">自我介绍</label></td>
            <td><textarea id="desc" name="desc" cols="40" rows="4"></textarea></td>
          </tr>

          <!-- 按钮：提交按钮不建议设置 name -->
          <tr height="40">
            <td></td>
            <td>
              <input type="submit" value="提交">
              <input type="reset" value="重置">
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
  </form>
</body>
</html>

关键行与易错点

  • form 的 action 是提交地址（实际工作中由后端提供），target 与超链接的 target 含义一致。
  • form 不能套 form，这是最容易出现的低级错误；fieldset 要写在 form 里面。
  • 用表格布局表单，是为了让左边的描述文字天然对齐；td 默认是普通单元格，不加粗，所以描述文字用 td 就够了。
  • label 两种关联方式：
    1. for + id：适合文本输入框、文本域。<label for="username"> 与 <input id="username"> 对应后，点文字即可让输入框获取焦点。
    2. 包裹：<label><input type="radio">男</label>，适合单选框、复选框，点"男"字也能选中。
  • 易错点：for 只能写一个值，id 必须唯一。所以"性别"这种描述文字不能去关联单选框（有两个 input，关联谁都不公平），要关联的是 input 和它后面的"男/女"文字。
  • 单选框要成为一组只能选一个，靠的是 name 相同；name 可以重复，id 不能重复。
  • 下拉选项、按钮一般不需要做关联：select 获取焦点也展不开选项，按钮点了就触发，关联没有意义。
  • 提交按钮不建议设置 name，否则按钮本身也会作为数据提交给后端；textarea 用 valign="top" 让左侧文字靠上，否则会和文本域垂直居中错位。

示例三：iframe 内联框架引入其他文件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>iframe 内联框架</title>
</head>
<body>
  <h1>iframe 内联框架</h1>

  <!-- 1. 引入一个网页文件：frameborder="0" 表示没有边框 -->
  <iframe src="demo.html" width="600" height="400" frameborder="0"></iframe>

  <!-- 2. 引入图片：内容不会自动缩放，超出的部分出现滚动条 -->
  <iframe src="photo.jpg" width="300" height="150" frameborder="1"></iframe>

  <!-- 3. 引入视频：视频会自动按设置的宽度缩放 -->
  <iframe src="movie.mp4" width="600" height="300" frameborder="0"></iframe>

  <!-- 4. 引入 txt：直接把文本内容显示出来 -->
  <iframe src="readme.txt" width="600" height="150" frameborder="0"></iframe>

  <!-- 5. 广告位：广告联盟给的地址 + 联盟规定的尺寸 -->
  <iframe src="https://pos.baidu.com/xxxx" width="300" height="250" frameborder="0"></iframe>
</body>
</html>

关键行与易错点

  • iframe 是双标签，必须成对出现；src 是目标文件地址，支持相对路径和绝对路径（网址）。
  • 不写宽高时默认是 300×150（带边框时实际渲染会略大一点），这是最容易被忽略的一点。
  • frameborder 的语义是"有没有边框"，不是边框宽度：0 表示没有边框，其他任何非 0 数字都表示有边框。
  • 能引入的前提是浏览器能打开这种类型：html、图片、视频、pdf、txt 都能正常显示；如果引入 .doc、.docx 这类浏览器打不开的文件，页面会直接变成下载。
  • 图片不会随 iframe 尺寸自动缩放，会出现滚动条；而视频会自动适应设置的宽度。
  • 被引入的一方可以拒绝被嵌套（比如京东），此时 iframe 里只会显示拒绝连接的提示，这不是你的代码写错了。
  • 常见用途是放广告位：广告联盟给你一个网址，内容会随用户变化，所以用 iframe 引入而不是用 img。

常见错误 ​

  1. 简历表格跨行后，后续行仍写满单元格 → 未给上方跨下来的单元格空出位置 → 先画网格，跨几行就在后续行少写对应单元格。
  2. 同一行多个单元格都设 rowspan 想撑高整行 → 同行一起跨行没有参照，效果不成立 → 直接给 tr 设行高。
  3. 给 tr 设 width 期待改变列宽 → 行宽必须跟随整个表格 → 列宽给首行各单元格设，或统一表格布局。
  4. label 的 for 与控件 id 不一致，或多个单选框共用同一 id → 关联失败或标识冲突 → id 唯一，for 精确对应；name 才用于单选分组。
  5. 单选按钮 name 不同却期待互斥 → 未按组设置相同 name → 同组 radio 使用相同 name。
  6. form 嵌套 form，或 table 结构随意插入 → 表单/表格结构不合法，浏览器自动纠正导致布局错乱 → 表单各自独立，table 内按 caption/thead/tbody/tfoot/tr/td 组织。
  7. iframe 的 frameborder 写成边框像素值 → 该属性只表示有无边框 → 0 为无边框，非零为有边框；宽高另用 width/height。
  8. iframe 引入 Word 等浏览器不支持类型却期待页面内显示 → 浏览器无法解析 → 接受下载行为，或改用支持类型/其他方案。

练习 ​

  1. 按尺寸完成简历表格：总宽 600、列宽 120、行高 40；照片跨 3 行，家庭住址和 email 跨 2 列，学习工作经历跨 5 行，个人能力跨 4 列。验收：跨行跨列位置正确，后续行单元格数量正确，图片居中。
  2. 用表格布局表单：姓名、年龄、性别、职业、自我介绍、提交、重置。验收：姓名/年龄/自我介绍用 label for 关联；性别用 label 包裹 radio 与文字；提交按钮不设 name；自我介绍纵向靠上。
  3. 做 label 两种关联对比页：用户名输入框用 for/id 关联；性别单选框用包裹方式关联。验收：点击文字能聚焦输入框或选中对应单选框；说明下拉选项和按钮为何通常不关联。
  4. 做 iframe 实验页：分别引入本地 HTML、图片、PDF、TXT、DOCX，统一设置宽高并设 frameborder="0"。验收：记录哪些直接显示、哪些出现滚动条、哪些触发下载；再测试一个拒绝被嵌入的站点并记录现象。
  5. 用 fieldset 和 legend 包裹一个含表格布局的表单。验收：出现分组边框和标题；确认 form 在外、table 在内，无表单嵌套。

原视频对照 ​

#视频时长
1回顾10:58
2作业讲解-简历表格15:30
3作业讲解-表单05:12
4label标签的使用15:57
5fieldset标签和legend标签03:58
6表单标签总结06:30
7iframe引入其他文件到当前页面16:50

小结 ​

  1. 表格题先画网格再写标签，跨行跨列的核心是“上方跨走，下方少写”。
  2. 列宽优先由首行单元格控制，行高逐行设置；tr 不要用来设宽度。
  3. 表单与表格配合时，form 包 table，结构清晰且禁止 form 嵌套。
  4. label 关联要区分场景：输入框/文本域重 for/id，选择框常用包裹；id 必须唯一，name 才可分组。
  5. iframe 只负责引入，能否显示取决于浏览器支持类型；目标站点也可拒绝被嵌入。
  6. fieldset/legend 了解即可，实际样式更多交给 CSS。
  7. 验收要落到尺寸、跨行跨列、点击文字交互和嵌入结果，不能只看代码是否写完。