第二天：列表、链接、图片与路径 — 给网页装上有用的"零件"
蜗牛往上爬 · 前端工业可视化学习笔记 第 2 篇
上一篇我们搭出了网页的"骨架"。今天给骨架装上三样实用零件：列表（把内容列清楚）、链接（让页面之间串联）、图片（让页面看得见），再搞懂它们的路径规则 —— 这是新手最容易翻车的环节。
目录
一、列表：三种列法，各司其职
列表是网页里最高频的内容组织方式。HTML 提供了三种列表，对应三种不同的"并列关系"。
1.1 无序列表（ul + li）— 没有先后顺序
适合"并列、无先后"的内容，默认显示圆点。
<ul>
<li>温度传感器</li>
<li>压力传感器</li>
<li>流量传感器</li>
</ul>
浏览器显示：
温度传感器
压力传感器
流量传感器
1.2 有序列表（ol + li）— 有先后顺序
适合步骤、排行榜等有前后顺序的内容，默认显示 “1. 2. 3.”。
<ol>
<li>打开浏览器</li>
<li>输入网址</li>
<li>按下回车</li>
</ol>
浏览器显示：
打开浏览器
输入网址
按下回车
1.3 自定义列表（dl + dt + dd）— 名词配解释
适合"名词 → 解释"的结构，常用于设备参数等成对说明。
<dl>
<dt>功率</dt>
<dd>设备的额定功率，单位 kW</dd>
<dt>温度</dt>
<dd>设备实时温度，单位 ℃</dd>
</dl>
dl（description list）：列表容器dt（description term）：名词dd（description description）：解释
🧠 怎么选？ 记一句话：
没顺序 →
ul有顺序 →
ol成对（名词+解释）→
dl工业场景里，设备参数说明几乎全是"名词 + 解释"，
dl是天然对口的选择。
二、超链接：a 标签，让网页"活"起来
没有链接的网页是"孤岛"。a（anchor，锚）标签负责把页面和页面、页面和外部资源连起来。
2.1 三种链接方式
<!-- ① 链接到外部网址 -->
<a href="https://xingtiao.xyz">访问我的博客</a>
<!-- ② 新窗口打开（target="_blank"） -->
<a href="https://es6.ruanyifeng.com" target="_blank">阮一峰 ES6 教程（新窗口）</a>
<!-- ③ 页内锚点：点击跳到 id 为 bottom 的位置 -->
<a href="#bottom">跳到页面底部</a>
...
<div id="bottom">这里是底部</div>
2.2 页内锚点的原理
锚点 = “跳到某个有 id 的元素”。href="#bottom" 表示"跳到 id="bottom" 的这个元素"。页面比较长时，导航栏常用它做"返回顶部 / 跳到某段"。
💡
target="_blank"让用户原来的页面不受影响，对"外部链接"很友好；但站内跳转一般不开新窗口，避免标签页堆太多。
三、图片：img 标签
img（image，图片）标签让网页显示图片，它有三个最常用的属性：
<!-- src：图片地址；alt：加载失败时的替代文字（必写） -->
<img src="factory.jpg" alt="工厂车间实景图">
<!-- 指定宽高 -->
<img src="factory.jpg" alt="工厂车间实景图" width="400" height="300">
为什么 alt 必须写？三重价值
体验兜底：图片加载失败或网络慢时，用户还能看到一段说明文字，而不是一片空白
无障碍：屏幕阅读器靠它把图片"朗读"给视障用户
SEO：搜索引擎靠
alt理解图片内容，利于收录
⚠️ 别忘了
img是单标签，没有结束标签。
四、路径：相对路径 vs 绝对路径
图片里的 src、链接里的 href 都涉及"怎么告诉浏览器资源在哪"。搞懂路径，就能解决 90% 的"图片不显示"问题。
4.1 两种路径的本质区别
4.2 相对路径的三种写法
<!-- ./ 当前目录（通常可省略） -->
<img src="./images/factory.jpg" alt="当前目录下 images 文件夹里的图">
<img src="images/factory.jpg" alt="等价写法，./ 可省">
<!-- ../ 上一级目录 -->
<img src="../logo.png" alt="上一级目录的图">
<!-- / 网站根目录（站点部署后有效） -->
<img src="/assets/logo.png" alt="网站根目录下的图">
4.3 绝对路径
<!-- 站外完整地址 -->
<img src="https://xingtiao.xyz/favicon.jpg" alt="网络上的完整地址">
🧠 路径小口诀：
./= 我身边
../= 我上面一级
/= 整个网站的根网络图片 = 完整的
https://...
五、动手练：我的学习资源导航页
把今天所有知识串起来：列表 + 链接 + 图片 + 锚点，做一个"学习资源导航页"。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的学习资源导航</title>
</head>
<body>
<h1 id="top">我的学习资源导航</h1>
<hr>
<!-- 有序列表：有先后顺序的学习路线 -->
<h2>📚 必学清单</h2>
<ol>
<li>HTML + CSS（本周）</li>
<li>JavaScript + ES6（阶段1）</li>
<li>TypeScript（阶段2）</li>
<li>ECharts / Three.js / Cesium（阶段2-3）</li>
</ol>
<!-- 无序列表 + 链接 -->
<h2>🔗 常用网站</h2>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN 开发者文档</a></li>
<li><a href="https://es6.ruanyifeng.com" target="_blank">阮一峰 ES6 教程</a></li>
<li><a href="https://xingtiao.xyz" target="_blank">我的博客</a></li>
</ul>
<!-- 自定义列表：名词 + 解释 -->
<h2>🏭 一句话理解三大技能</h2>
<dl>
<dt>HTML</dt>
<dd>网页的骨架，负责结构</dd>
<dt>CSS</dt>
<dd>网页的皮肤，负责样式</dd>
<dt>JavaScript</dt>
<dd>网页的大脑，负责行为</dd>
</dl>
<!-- 图片示例：alt 必写 -->
<img src="favicon-option-2-snail-v2.jpg" alt="蜗牛向上爬的网站图标" width="200">
<hr>
<!-- 页内锚点：回到顶部 -->
<a href="#top">回到顶部</a>
</body>
</html>
验证方式：浏览器打开后，逐项检查 —— 列表是否带编号/圆点、链接能否跳转、新窗口是否打开、"回到顶部"点击后是否回到 id="top" 的 h1 位置。
💡 如果图片没显示，通常会显示
alt文字。先确认src指向的路径是真实存在的文件。
六、常见坑点与最佳实践
坑 1：图片路径写错导致不显示
<!-- ❌ 常见：当前目录根本没有 logo.png -->
<img src="logo.png">
<!-- ✅ 正确：先确认文件在哪，再写对应路径 -->
<img src="images/logo.png">
排查法：按 F12 → Network（网络） 面板 → 刷新页面，找到那张图片的请求，看它实际请求的 URL 是什么，就能定位路径错在哪。
坑 2：alt 忘写 / 写成模板
<!-- ❌ 错误：alt 直接套用 src -->
<img src="factory-018.jpg" alt="factory-018.jpg">
<!-- ✅ 正确：alt 描述图片含义 -->
<img src="factory-018.jpg" alt="工厂一车间产线实景图">
坑 3：站内全部用 target="_blank"
<!-- ❌ 站点内部导航也开新窗，标签页越堆越多 -->
<a href="/about" target="_blank">关于我们</a>
<!-- ✅ 站内跳转不用开新窗；外部链接才用 -->
<a href="/about">关于我们</a>
<a href="https://other.site" target="_blank">外部站点</a>
最佳实践清单
[x] 三种列表按"关系"选：
ul/ol/dl[x]
a必写href；外部站点用target="_blank"，站内跳转不开新窗[x]
img必写src和alt，必要时给width/height[x] 路径 > 文件层级：
./当前、../上级、/根目录[x] 图片不显示时，先用 F12 Network 排查真实路径
七、这些知识在工业可视化里用在哪？
「资源导航页」本身就是大屏信息架构的缩影。 智慧工厂大屏通常需要：
设备清单 → 用
ul或ol罗列设备设备参数 → 用
dl呈现"参数名 + 值"导航入口 / 页面跳转 → 用
a链接，比如"点击设备卡片跳转到设备详情页"厂区图纸、设备照片 → 用
img展示
一个典型的大屏某数据面板：
<section>
<h2>产线设备概览</h2>
<ul>
<li><a href="#device-a">压缩机 A</a> — <strong>运行中</strong></li>
<li><a href="#device-b">冷却泵 B</a> — <em>待机</em></li>
<li><a href="#device-c">供料机 C</a> — <strong>运行中</strong></li>
</ul>
<!-- 点击设备名，锚点跳到下方对应设备的详细面板 -->
</section>
今天的列表、链接承载了"信息组织"和"信息跳转"两大任务，它们会伴随你整个可视化生涯。
八、自测挑战 10 题
不看示例默写，写不出来再回看。
无序列表 / 有序列表分别用什么标签？何时用哪个？
dl/dt/dd适合什么场景？举一个工业场景的例子。a标签的href和target="_blank"分别什么作用？页内锚点怎么实现？
href="#bottom"会跳到哪个元素上？img的src/alt/width分别什么作用？为什么alt必写？./images/a.png和../a.png分别表示什么？相对路径与绝对路径的区别是什么？各自适合什么场景？
把导航页中的学习清单改成有序列表，验证编号自动出现。
在导航页加一个"回到顶部"的锚点链接。
故意把一张图片的
src写成不存在的路径，观察alt文字的显示效果。
加分挑战：用 F12 打开你的博客或任意网站，在 Elements 面板里找出一个 ul、一个 a、一个 img，试着改一下 img 的 src，看图片会不会切换。
九、总结
今天学完，你应该能做到：
[x] 灵活使用三种列表（
ul/ol/dl）组织内容[x] 用
a标签做外链、新窗口、页内锚点[x] 用
img展示图片并写对alt[x] 搞懂相对路径（
./、../、/）和绝对路径[x] 独立做出一页"资源导航页"并在浏览器验证
一句话带走：列表让内容有条理，链接让信息能跳转，图片让页面看得见；这三样零件的本质，是让结构产生"组织和互连"。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 1 周 · 第 2 篇