第三天：表格、表单与语义化 — 让网页真正"能用"

蜗牛往上爬 · 前端工业可视化学习笔记第 3 篇
前两篇我们搭了骨架、装了零件，网页能看了。但要让它"真正能用"——展示数据、收集信息、结构清晰——还需要三样利器：表格（展示结构化数据）、表单（让用户输入）、语义化标签（让代码有"名字"）。今天学完，你的网页就能从"展示页"升级为"功能页"。

一、表格：table，展示结构化数据
二、表单：form，让用户输入信息
三、语义化标签：div/span 之外的"有名字的盒子"
四、动手练：设备信息登记表单页
五、常见坑点与最佳实践
六、这些知识在工业可视化里用在哪？
七、自测挑战 10 题
八、总结

一、表格：table，展示结构化数据

表格是网页上展示"行+列"结构化数据的主力，尤其适合工业场景里的设备清单、参数对比。

1.1 基本表格结构

<table border="1">
  <thead>
    <tr>
      <th>设备名称</th>
      <th>状态</th>
      <th>温度(℃)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>压缩机 A</td>
      <td>运行中</td>
      <td>58</td>
    </tr>
    <tr>
      <td>冷却泵 B</td>
      <td>待机</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

一行一行拆解

标签	角色	记忆点
`<table>`	表格容器	所有内容包在它里面
`<thead>`	表头区	放列名，浏览器知道他叫"表头"
`<tbody>`	表体区	放数据行，与表头语义分开
`<tr>`	一行（table row）	最基本单元，包含本行所有单元格
`<th>`	表头单元格	默认加粗居中，天生"标题感"
`<td>`	普通单元格	放数据

🧠 分层看：table → thead/tbody → tr → th/td，三层嵌套。写的时候从外往里写，不容易乱。

1.2 合并单元格（偶尔要用）

<!-- 纵向合并：rowspan="2" 表示这个单元格占 2 行 -->
<td rowspan="2">公用备注</td>

<!-- 横向合并：colspan="2" 表示这个单元格占 2 列 -->
<td colspan="2">跨两列的表头</td>

rowspan = 跨行，colspan = 跨列。记住：数字是"占几个格子"。

二、表单：form，让用户输入信息

表单是网页和用户交互的核心手段。登录、搜索、设置、提交数据，全都靠表单。

2.1 表单容器 + 文本输入

<form action="/submit" method="post">
  <!-- label 的 for 绑定 input 的 id：点文字也能聚焦输入框 -->
  <label for="deviceName">设备名称</label>
  <input type="text" id="deviceName" name="deviceName" placeholder="请输入设备名称">
</form>

属性	作用
`action`	数据提交到哪个地址
`method`	提交方式（`get` / `post`）
`for` + `id`	label 和 input 绑定，点文字即可聚焦输入框

💡 label 的 for 绑定 input 的 id 是表单最核心的配合写法。不仅提升点击体验，对屏幕阅读器也非常友好。

2.2 常用 input 类型一览

<!-- 文本 -->
<input type="text" placeholder="请输入设备名称">

<!-- 密码（输入时不显示） -->
<input type="password" placeholder="请输入密码">

<!-- 单选框：同名 name 互斥（只能选一个） -->
<label><input type="radio" name="status" value="running"> 运行中</label>
<label><input type="radio" name="status" value="stopped"> 已停止</label>

<!-- 复选框：可多选 -->
<label><input type="checkbox" name="alarm" value="temp"> 温度过高</label>
<label><input type="checkbox" name="alarm" value="pressure"> 压力异常</label>

<!-- 下拉选择 -->
<label for="area">所属车间</label>
<select id="area" name="area">
  <option value="a">一车间</option>
  <option value="b" selected>二车间</option>
  <option value="c">三车间</option>
</select>

<!-- 多行文本 -->
<label for="remark">备注</label>
<textarea id="remark" name="remark" rows="3" cols="30" placeholder="设备备注信息"></textarea>

<!-- 数字、邮箱、日期、文件 -->
<input type="number" min="0" max="100">
<input type="email" placeholder="请输入邮箱">
<input type="date">
<input type="file">

<!-- 提交按钮 -->
<button type="submit">提交</button>

2.3 关键区分：radio 与 checkbox

类型	用途	关键规则
`radio`	单选（N 选 1）	同一组 `name` 相同，自动互斥
`checkbox`	多选（N 选 M）	每个独立，`name` 可相同也可不同

<!-- radio：name 相同 = 一组，只能选一个 -->
<label><input type="radio" name="status" value="running"> 运行中</label>
<label><input type="radio" name="status" value="stopped"> 已停止</label>

<!-- checkbox：每个独立，可全选 -->
<label><input type="checkbox" name="alarm" value="temp"> 温度过高</label>
<label><input type="checkbox" name="alarm" value="pressure"> 压力异常</label>

三、语义化标签：div/span 之外的"有名字的盒子"

3.1 为什么语义化？

HTML 里最常见的两个标签是 <div> 和 <span>：

div：无语义的块级盒子，占一整行
span：无语义的行内盒子，不换行

但如果整个页面全是 <div>，代码会变成这样：

<!-- ❌ 全是 div，谁看得懂结构？ -->
<div>
  <div>网站标题</div>
  <div>导航</div>
</div>
<div>
  <div>内容区</div>
  <div>侧边栏</div>
</div>
<div>页脚</div>

语义化标签就是给这些"盒子"起上有意义的名字：

<!-- ✅ 语义化：一眼看懂结构 -->
<header>
  <h1>网站标题</h1>
  <nav>导航</nav>
</header>
<main>
  <section>内容区</section>
  <aside>侧边栏</aside>
</main>
<footer>页脚</footer>

3.2 语义化标签速查表

标签	含义	适合放什么
`header`	页头	网站 logo、导航栏
`nav`	导航	菜单、链接集合
`main`	主体	页面核心内容，每页只用一次
`section`	章节/区块	内容分组，如"设备监控区"、“告警区”
`article`	独立内容块	可独立复用的内容，如文章、卡片
`aside`	侧边/附加	侧边栏、相关链接、广告
`footer`	页脚	版权信息、联系方式

3.3 什么时候用 div，什么时候用语义化标签？

一句话：能用语义化标签表达结构时，就不要用 div 包一层。

<!-- ❌ 不好的写法 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- ✅ 好的写法 -->
<header>...</header>
<nav>...</nav>
<main>...</main>

🧠 语义化不只是"好看"，它对 SEO（搜索引擎能读懂页面结构）、屏幕阅读器（能按区域导航）都有实际价值。工业大屏里，section 天然对应"数据面板"，aside 天然对应"告警侧栏"。

四、动手练：设备信息登记表单页

综合本周所有知识，做一个"设备信息登记"页面。它包含表格（已有设备列表）+ 表单（新增设备）+ 语义化结构。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>设备信息登记</title>
  </head>
  <body>
    <!-- 页头：标题 + 导航锚点 -->
    <header>
      <h1>设备信息登记</h1>
      <nav>
        <a href="#device-table">已有设备</a> |
        <a href="#device-form">新增设备</a>
      </nav>
    </header>

    <!-- 主体：一页只用一次 main -->
    <main>
      <!-- 区块1：已有设备列表 -->
      <section id="device-table">
        <h2>已有设备</h2>
        <table border="1">
          <thead>
            <tr>
              <th>设备名称</th>
              <th>所属车间</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>压缩机 A</td>
              <td>一车间</td>
              <td>运行中</td>
            </tr>
            <tr>
              <td>冷却泵 B</td>
              <td>二车间</td>
              <td>待机</td>
            </tr>
            <tr>
              <td>供料机 C</td>
              <td>一车间</td>
              <td>运行中</td>
            </tr>
          </tbody>
        </table>
      </section>

      <!-- 区块2：新增设备表单 -->
      <section id="device-form">
        <h2>新增设备</h2>
        <form action="/submit" method="post">
          <p>
            <label for="deviceName">设备名称</label>
            <input type="text" id="deviceName" name="deviceName" placeholder="请输入设备名称">
          </p>
          <p>
            <label for="area">所属车间</label>
            <select id="area" name="area">
              <option value="a">一车间</option>
              <option value="b">二车间</option>
              <option value="c">三车间</option>
            </select>
          </p>
          <p>
            设备状态：
            <label><input type="radio" name="status" value="running"> 运行中</label>
            <label><input type="radio" name="status" value="stopped"> 已停止</label>
          </p>
          <p>
            <label>
              <input type="checkbox" name="alarm" value="temp"> 温度过高
            </label>
            <label>
              <input type="checkbox" name="alarm" value="pressure"> 压力异常
            </label>
          </p>
          <p>
            <label for="remark">备注</label>
            <textarea id="remark" name="remark" rows="3" cols="30" placeholder="设备备注信息"></textarea>
          </p>
          <button type="submit">提交</button>
        </form>
      </section>
    </main>

    <!-- 页脚 -->
    <footer>
      <p>© 2026 蜗牛往上爬 · 前端工业可视化学习</p>
    </footer>
  </body>
</html>

验证方式：浏览器打开后，逐项检查：

表格 3 行数据是否正常显示
表单各控件能否正常交互（点文字聚焦、radio 互斥、checkbox 多选、下拉切换）
导航锚点能否跳转到对应区块
按 F12 → Elements 面板，确认结构是 header → main → section → footer 而非一堆 div

💡 这个页面的骨架就是未来大屏的雏形：header（标题栏）+ main（主体）+ section（数据模块）+ footer（页脚）。

五、常见坑点与最佳实践

坑 1：表单控件没有 label 绑定

<!-- ❌ 错误：没有 label，点文字不会聚焦输入框 -->
设备名称：<input type="text" name="deviceName">

<!-- ✅ 正确：label 的 for 绑定 input 的 id -->
<label for="deviceName">设备名称</label>
<input type="text" id="deviceName" name="deviceName">

坑 2：radio 忘了设同名 name

<!-- ❌ 错误：name 不同，两个都能选 -->
<input type="radio" name="status1" value="running"> 运行中
<input type="radio" name="status2" value="stopped"> 已停止

<!-- ✅ 正确：同名 name 自动互斥 -->
<input type="radio" name="status" value="running"> 运行中
<input type="radio" name="status" value="stopped"> 已停止

坑 3：页面全是 div，没有语义化

<!-- ❌ 全 div 结构，维护困难 -->
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- ✅ 语义化，一目了然 -->
<header>...</header>
<main>...</main>
<footer>...</footer>

🧠 一个实用的检查方法：读代码时，能不能不靠 class 名就理解每块是什么？能 → 语义化到位了；不能 → 该换标签了。

最佳实践清单

[x] 表格用 thead/tbody 分组，th 做表头
[x] 表单控件必须配 label，用 for + id 绑定
[x] radio 同名互斥，checkbox 独立多选
[x] 页面用语义化标签（header/main/section/footer），少用无意义 div
[x] main 每页只用一次

六、这些知识在工业可视化里用在哪？

表格 → 大屏数据区

智慧工厂大屏上最常见的"设备监控表"：

<section>
  <h2>产线设备实时数据</h2>
  <table>
    <thead>
      <tr>
        <th>设备</th>
        <th>温度</th>
        <th>压力</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>压缩机 A</td>
        <td>58℃</td>
        <td>2.3MPa</td>
        <td>运行中</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</section>

表单 → 设备配置、参数筛选

大屏左侧常有一个配置面板，用于筛选设备、设置告警阈值：

<aside>
  <h3>筛选条件</h3>
  <form>
    <label><input type="checkbox" name="area" value="a"> 一车间</label>
    <label><input type="checkbox" name="area" value="b"> 二车间</label>
    <label>温度阈值：<input type="number" min="0" max="200"></label>
    <button type="submit">应用</button>
  </form>
</aside>

语义化 → 大屏布局框架

大屏的标准布局本身就是语义化标签的天然映射：

<header>  <!-- 顶部标题栏 -->
<main>    <!-- 中间内容区，大屏核心 -->
  <section>数据面板1</section>
  <section>数据面板2</section>
  <section>数据面板3</section>
  <aside>  <!-- 侧面告警/通知栏 -->
</main>
<footer>  <!-- 底部信息栏 -->

七、自测挑战 10 题

不看示例默写，写不出来再回看。

thead / tbody / tr / th / td 分别是什么？写出一个 3 行 2 列的表格。
rowspan 和 colspan 是做什么的？各举一个场景。
label 的 for 属性和 input 的 id 是什么关系？为什么推荐这样写？
radio 组如何做到互斥（只能选一个）？
select 默认选中的 option 怎么写？
header / main / section / aside / footer 各适合放什么？
div 与 span 的区别是什么？什么时候应该用语义化标签？
给设备表加一行"巡检人"列（用 th 和 td）。
给表单加一个"设备编号"输入框（type="text"），并配上 label。
把登记页的导航链接改为页内锚点，点击能跳到对应区块。

加分挑战：在"设备信息登记页"上再加一个 section，用 dl（自定义列表）列出某个设备的详细参数说明。

八、总结

今天学完，你应该能做到：

[x] 用 table 展示结构化数据，分清 thead/tbody/th/td
[x] 写一个完整的表单（input 各种类型 + select + textarea + button）
[x] 用 label 的 for + id 绑定表单控件
[x] 区分 radio（同名互斥）和 checkbox（独立多选）
[x] 用语义化标签（header/main/section/aside/footer）替代纯 div 结构
[x] 独立做出"设备信息登记表单页"这个综合页面

一句话带走：表格让数据"看得清"，表单让页面"用得上"，语义化标签让代码结构"读得懂"——三者合一，网页从"展示"升级为"能用"。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 1 周 · 第 3 篇

【HTML+CSS】day03-tables-forms-semantic