2.3 列表、链接与图片：看板的零件库
2.3 列表、链接与图片：看板的零件库
本节摘要：列表、链接与图片是使用频率最高的三类结构零件。本节讲无序与有序列表的选择逻辑、链接的三种跳转形态与安全写法、图片的路径体系与替代文本规范，并把这些零件装上看板：导航列表、车间现场照片与底部导航。替代文本一节同时为可访问性验收打下第一块基石。
零件库里最忙的三件套
页面上出现频率最高的内容形态，恰好就是这三类：一串并列的条目（导航菜单、工单编号序列）、一个可以点走的入口（链接）、一张现场照片（图片）。它们的共同特点是"成组出现"——导航从来不止一个入口，工单照片也从来不止一张，所以学习重点不是单个标签怎么写，而是它们如何组织成组、如何挂到骨架上。
先看列表。列表分无序与有序两种，选择标准是"顺序是否有含义"：工序流程的第一步第二步互换含义就变，用有序列表；导航菜单的先后无所谓，用无序列表。新手容易忽略的一点：列表项必须直接挂在列表容器下，中间不能隔其他标签——浏览器对列表结构的容错修正比较激进，隔层嵌套会被默默重排，页面看起来正常、元素树却已面目全非。
<!-- 看板页头的车间切换导航：无序列表，顺序无含义 --> <nav> <ul class="workshop-nav"> <!-- ul：无序列表容器；class 挂给样式班做横向排列 --> <li><a href="#board">生产看板</a></li> <!-- li：列表项；内装链接，指向本页看板锚点 --> <li><a href="#quality">质检记录</a></li> <li><a href="#archive">历史工单</a></li> </ul> </nav> <!-- 工单的加工工序：有序列表，顺序就是工艺 --> <ol class="process-steps"> <!-- ol：有序列表，浏览器自动编号，编号随增删自动重排 --> <li>领料与图纸核对</li> <li>粗车成型</li> <li>精铣至公差</li> <li>热处理时效</li> <li>终检入库</li> </ol>
列表选择的判断口诀： - 抽掉编号后含义受损（工序、排名、步骤）——有序列表 - 抽掉编号后毫无影响（导航、标签、商品卖点）——无序列表 - 想自己画圆点方块图标——仍然用列表，装饰是样式班的活 - 条目之间有标题分组——考虑定义列表或分区标题，别硬塞
链接：页面之间的传送门
链接元素的核心属性是目标地址，取值形态决定跳转形态：完整的网络地址跳往别的站点；以井号开头的值跳往本页内的锚点；还有一类留给行为班——写一个井号占位或干脆由脚本接管点击。看板用到的形态是锚点跳转与备用站点链接。
<!-- 锚点跳转：本页内的传送门 --> <h2 id="board">今日工单</h2> <!-- id 是锚点的靶心：全页唯一，行为班也靠它精确点名 --> <p>返回顶部目录请点 <a href="#top">这里</a>。</p> <!-- 井号加靶点名：点击后滚到对应元素，不重新加载页面 --> <!-- 外部链接：新标签页打开要声明 --> <p>设备操作规程详见 <a href="https://内网文档地址" target="_blank" rel="noopener">厂内规程库</a>。</p> <!-- target 设为空标签页在新窗口打开；rel 的补充说明告诉浏览器 新页面与本页解除引用关系，防止被打开的页面反向操作本页 -->
<!-- 链接的可用性底线：别拿链接当按钮 --> <a href="javascript:void(0)" onclick="doSomething()">提交工单</a> <!-- 反面写法：把链接当按钮用，键盘与读屏用户会困惑它到底是跳转还是动作 --> <button type="button" id="submit-btn">提交工单</button> <!-- 正确写法：触发动作用按钮元素，样式班同样能把它做成链接的样子 -->
第二个代码块对比了新手高频误区。"点了做一件事"用按钮，"点了去一个地方"用链接——这条边界与三班岗的分工同理：角色先分清，外观随便调。伪链接看起来无害，实际伤的是键盘用户：他们用制表键在链接间跳转，期待的是跳转行为，踩到一个执行动作的假链接会造成误操作。
图片：带说明书的零件
图片元素的三个关键属性：地址（图片文件在哪）、替代文本（图片加载失败或读屏时显示什么）、尺寸（预留多大位置）。替代文本是最容易被偷懒省略的属性，也是可访问性的第一道关卡——写好它，视障用户听到的就不是"图片"两个字，而是"三号产线正在加工模具"这样有意义的信息。
<!-- 看板侧栏的现场照片：三属性齐备 --> <figure> <!-- figure：自包含的内容单元，配图与说明文字成对出现 --> <img src="workshop-line3.jpg" alt="三号产线：操作工正在核对手件尺寸" width="320" height="180"> <!-- src 图片地址；alt 替代文本描述画面信息，不是"图片"两个字； width 与 height 预留尺寸，1.3 节讲过的"内容跳动"就此根除 --> <figcaption>图：三号产线晨检（摄影：质检组）</figcaption> <!-- figcaption：图注，与 alt 分工——alt 给读屏，图注给所有人 --> </figure>
<!-- 装饰性图片：替代文本留空的正确姿势 --> <div class="stat-card"> <img src="gear-icon.svg" alt="" width="24" height="24"> <!-- 纯装饰图标：alt 写空字符串，读屏直接跳过，不念"图片"打扰用户 --> <span class="stat-label">待开工</span> </div>
两个代码块的对照点在替代文本的"信息量判断"：传递信息的图片，替代文本要描述画面承载的信息；纯装饰的图片，替代文本留空让读屏跳过。而"每张图都写'图片'两个字"是最差的做法——等于告诉视障用户"这里有个你看不见的东西"，零信息量还打断收听节奏。
地址属性还有相对与绝对之分：相对地址从当前文档出发找文件（同目录写文件名，子目录写路径），绝对地址从站点根或完整域名出发。本地开发的看板用相对地址，整个文件夹搬到哪里都能打开；绝对地址绑死域名，本地一搬家全裂。图片文件与三份源文件放在同一项目目录下的做法，上一节已经建立。
⚠️ 常见坑：图片不写宽高，加载慢的页面会反复跳动重排（1.3 节回环重算的现场案例）；反过来，宽高写死后样式班又要覆盖一次。现代做法是结构班如实填写图片原始宽高，尺寸微调交给样式规则处理。
💡 关键直觉：替代文本的写作标准是"打电话描述这张图"——如果你在电话里会说"这是三号产线，师傅在量尺寸"，替代文本就该这么写；如果你会说"就是个装饰齿轮"，那就留空。
本节要点回顾
- 列表选择：顺序有含义用有序、无含义用无序，编号与装饰图标都是样式班的事；
- 嵌套纪律：列表项直接挂列表容器，隔层嵌套会被浏览器静默重排；
- 链接与按钮：去一个地方用链接、做一件事用按钮，伪链接伤键盘用户；
- 新窗口打开：声明新标签页的同时补上关系说明属性，防反向操作；
- 替代文本：信息图按"打电话描述"标准写，装饰图留空跳过；
- 图片尺寸：结构班如实写原始宽高，根除加载期跳动，微调归样式班。
零件库逛完，下一节上重装备：表格与表单，看板的数据展示与录入两套结构一次到位。