2.2 文本与语义化元素：让内容各就各位
2.2 文本与语义化元素：让内容各就各位
本节摘要：文本类零件是页面的主体内容：六级标题构成大纲，段落装成段文字，强调元素标注轻重，无语义容器负责分组挂样式。本节的核心课题是"同一句话选哪个标签"——语义选择的依据是内容在页面里的角色，而不是它想要的外观。看板的标题大纲与统计卡片文案在本节完成填充。
标签是内容的简历，不是外观的说明书
结构班最容易走偏的地方，是把标签当成字号选择器：想大字就用大标题，想小字就用段落加样式。正确的心智是把标签当内容的简历——浏览器、搜索引擎、读屏软件都通过标签判断"这段内容在整页里扮演什么角色"。标题标签对搜索引擎意味着大纲层级，对读屏软件意味着可快速跳转的锚点；你用它来控制字号，等于在简历的学历栏里填身高，读的人会误解。
由此推出选标签的决策次序：先问内容是什么性质的（标题？正文？强调？引用？），找到对应语义标签；只有当没有任何语义标签匹配、或者目的纯粹是分组挂样式时，才动用无语义容器。这个次序贯穿本章所有零件的选择。
标题大纲：页面的目录树
标题一共六级，数字越小级别越高。关键规则只有一条：按内容层级递进，不跳级。一级标题全页最好只有一个，是整页的主题；区块主题用二级；区块内的小分组用三级，依此类推。看板的大纲可以这样设计：
<!-- 看板标题大纲：层级即结构，搜索引擎与读屏都靠它导航 --> <body> <h1>青云精密制造 · 车间生产看板</h1> <!-- 全页唯一主题：厂名加页面名，搜索结果的主标题就取自它 --> <h2>今日概览</h2> <!-- 统计卡片区的主标题：下面挂三张卡片 --> <h2>工单列表</h2> <!-- 工单表区的主标题 --> <h3>常规工单</h3> <h3>加急工单</h3> <!-- 区块内的再分组：三级标题，不跳级 --> <h2>新增工单</h2> <!-- 登记表单区的主标题 --> </body>
大纲自检法（开发者工具元素面板里折叠着看）： - 只看标题元素时，页面应当像一份目录：一个主题、三个区块、两个子分组 - 层级数字只递增不跳跃：出现一、三相连就是跳级信号 - 不用标题标签控制字号：字号是样式班的事，用样式规则调整
第二个代码块给的是自检方法而非代码——把元素面板折叠到只剩标题，一眼扫过层级数字，大纲好坏立刻现形。这个习惯维持下去，你写出的页面天然对搜索引擎友好。
段落、强调与标记：轻量零件的正确用法
正文文字装进段落元素；强调分两种：一种是"重要"，用加重语义的强调元素（浏览器默认渲染为加粗）；另一种是"语气重音"，用重音强调元素（默认渲染为斜体）。两者常被混用，区别在语义：前者影响内容的重要性排序，后者只是朗读时的重音。还有一种标记元素专用于"因为上下文相关而被涂亮"的文字，比如搜索结果里命中的关键词。
<!-- 统计卡片的文案填充：文本零件各就各位 --> <section> <h2>今日概览</h2> <p> <strong>三车间当前共三条产线运转。</strong> <!-- strong：重要事实，读屏会加重语气，搜索权重也更高 --> 其中<em>热处理产线</em>承担全厂模具的时效工序。 <!-- em：重音强调，念到这几个字时语调上扬 --> </p> <p> 加急工单已用 <mark>红色角标</mark> 标出，请各班组长优先排产。 <!-- mark：上下文相关的涂亮，类似荧光笔 --> </p> </section>
<!-- 反面教材：外观思维的选标法，简历全填错了栏 --> <p style="字级放大">今日概览</p> <!-- 用段落加行内样式冒充标题：大纲里没有它，读屏跳不过去 --> <p><b>热处理产线</b>承担时效工序。</p> <!-- b 只表示加粗外观，不承载重要性语义；此处应用 strong --> <p>3 号产线 <i>今日</i> 停机检修。</p> <!-- i 只表示斜体外观；表示语气重音应用 em -->
两个代码块对照着看：正面案例里每个标签都对应内容角色，反面教材里标签只服务于视觉。特别说明，加粗与斜体元素并非禁用品——当内容确实是纯视觉需求（比如产品型号惯用粗体显示）时它们是正确选择；被禁止的是"该讲语义时只讲外观"。
无语义容器：分组与挂样式的托盘
有两类内容找不到语义标签：一类是纯粹为了分组管理（比如把三张统计卡片包起来统一处理），一类是为了给样式班或行为班提供点名的挂点。这时使用无语义容器：块级的通用容器（默认独占一行，当托盘用）与行内的通用容器（不换行，当挂钩用）。它们没有默认外观、没有语义负担，代价是滥用之后页面变成千层饼——2.1 节的纪律在此重申：语义优先，容器兜底。
看板统计区的结构可以升级为卡片式分组，为样式班预留挂点：
<!-- 统计区改造：语义标签为主、无语义容器兜底 --> <section> <h2>今日概览</h2> <div class="stat-row"> <!-- 托盘：把三张卡片打包，样式班用它做横向排列 --> <div class="stat-card"> <span class="stat-num">12</span> <!-- 挂钩：数字单独包出来，方便样式班放大字号 --> <span class="stat-label">待开工</span> </div> <div class="stat-card"> <span class="stat-num">8</span> <span class="stat-label">加工中</span> </div> <div class="stat-card"> <span class="stat-num">5</span> <span class="stat-label">已完成</span> </div> </div> </section>
注意类名的命名思路：stat 说明它是统计区的零件，num 与 label 说明它在卡片里扮演的角色——类名是结构班写给样式班的接口文档，起名要达意，避免无意义的字母数字组合。1.2 节交接界面图上的"挂钩"，落到代码就是这个类名。
⚠️ 常见坑：统计数字由行为班脚本动态更新，结构班先把静态占位数字写死在结构里没问题，但要在注释或交接说明里标明"此处数据将由脚本替换"，避免后续维护者误以为它是写死的常量。
💡 关键直觉：遇到"不知道用什么标签"的犹豫时刻，正是回头审视内容结构的信号——犹豫往往说明内容本身还没分类清楚，先分类，标签自现。
本节要点回顾
- 选标次序：先按内容角色找语义标签，分组与挂样式才用无语义容器；
- 标题纪律：层级递进不跳级、全页一个主题标题、字号问题交给样式班；
- 强调三分：重要用加重语义、重音用语气强调、上下文涂亮用标记元素；
- 容器用法：块级容器当托盘、行内容器当挂钩，滥用成千层饼是大忌；
- 类名即接口：类名是写给样式班与行为班看的接口文档，达意优先；
- 大纲自检：元素面板折叠到只剩标题扫层级，养成写完即查的习惯。
文字零件各就各位，下一节领三类高频零件：列表、链接与图片，把看板的导航和现场照片装上。