相对路径作业讲解与无序列表（Day3 1/4）

本页对应 Day03-HTML，共 6 段视频，约 59 分钟。

学习目标

• 能够根据当前文件与目标文件的层级关系，正确写出相对路径，并完成多个嵌套目录网页之间的双向跳转。
• 能够使用 ul、li 构建无序列表，并在 li 中嵌套超链接、文本标签或子列表。
• 能够使用 ol、li 构建有序列表，并根据内容是否存在明确顺序正确选择 ol 或 ul。
• 能够使用 dl、dt、dd 构建定义列表，正确实现一个 dt 对应一个 dd 及一个 dt 对应多个 dd 的结构。
• 能够总结 ul、ol、li、dl、dt、dd 六个列表标签的语义、双标签特征及 li 必须被 ul 或 ol 直接包裹的规范。

知识点

回顾：先抓语义，再记标签

为什么需要：HTML 标签不是“长什么样”最重要，而是“表示什么含义”。转写稿反复强调语义：搜索引擎要靠语义精准抓取页面，屏幕阅读设备也要靠标签区分标题、段落和内容。
怎么想：先判断内容在页面中承担什么角色；能明确判断为标题、段落，就用对应标签；判断不出来的普通区域，再用 div 兜底。
怎么做：回顾排版标签（h1–h6、p、hr、br、pre、div）、文本标签（em、strong、ins、del、sup、sub、span）、图片标签、路径、超链接与锚点。图片标签的核心写法是：

<img src="图片地址" alt="图片替代文字">

src 写图片文件地址，alt 写替代文字；宽高一般只设一个，另一个按比例自动计算。转写稿还提到 base64：它把图片变成一串文本写进 src，适合小图片，缺点是文本很长。
易错点：不要把“预格式化文本”写成“原格式显示”，对应标签是 pre；不要把所有区域都堆成 div，极端“全 div 页面”对 SEO 和屏幕阅读设备都不友好；span 常配合 CSS，和 div 的主要区别是行内/块级表现，后续 CSS 会系统总结。

相对路径：从当前文件出发找目标

为什么需要：页面里引入图片、跳转页面都要写路径。绝对路径分网络绝对路径（如 http/https 开头）和本地绝对路径（Windows 盘符开头，Linux 以 / 开头）；前端开发更常用相对路径。
怎么想：写代码的文件是“当前文件”，要引入的文件是“目标文件”。目标在同级或下级，用 ./ 开头，./ 可省略；目标在上一级或更上级，用 ../ 开头，最多两个点，不能写三个点。
怎么做：按转写稿的作业推导：从 index 找 02，先看当前目录，发现它藏在某个同级目录里，于是写“./目录名/02.html”；从 02 返回 index 时，当前文件已经变成 02，要写 ../index.html。再往更深层找 03，可能写成“./目录/子目录/03.html”；从深层返回首页，就要连续 ../../ 回到足够层级，再进入 home/index.html。调试时刷新页面、点击链接来回跳，确认路径是否真的通。
易错点：移动网页文件后，相对位置变了，原来的相对路径可能失效；不要凭感觉写 ../，要站在“当前文件”的位置一步步数层级。

无序列表：一组相关内容就用 ul

为什么需要：新闻列表、文章列表、商品列表、导航条，本质都是“一组相关的内容”。转写稿用“右键检查元素”验证：新闻列表、导航条大量使用 ul > li 结构。
怎么想：先判断是不是一组同类内容；不强调先后顺序，就用无序列表。整体用 ul 包裹，每一项用 li。li 里不一定只写文字，也可以套 a、strong 等标签。
怎么做：

<ul>
  <li>HTML：超文本标记语言</li>
  <li>CSS：层叠样式表</li>
  <li>JavaScript：浏览器端脚本语言</li>
</ul>

新闻列表可写成：

<ul>
  <li><a href="#">新闻标题</a></li>
</ul>

导航子菜单要保证 li 被 ul 直接包裹：

<ul>
  <li><a href="#">关于我们</a>
    <ul>
      <li><a href="#">联系我们</a></li>
      <li><a href="#">加入我们</a></li>
    </ul>
  </li>
</ul>

易错点：转写稿的调试很典型：子菜单的 li 少了 ul 直接包裹，浏览器“给面子”显示后，检查元素发现它们变成了同级。规则是：li 必须被 ul 或 ol 直接包裹，不能被 div 包，也不能 li 直接包 li。

有序列表：明确有顺序才用 ol

为什么需要：有步骤、有排名的内容适合有序列表，如操作步骤、排行榜。
怎么想：ol 和 ul 结构几乎一样，区别只在最外层：ul 换成 ol，列表项仍是 li。
怎么做：

<ol>
  <li>第一名</li>
  <li>第二名</li>
</ol>

易错点：小圆点、数字只是默认样式，不是选列表的理由；选列表图的是语义。转写稿也提醒：实际开发中无序列表远多于有序列表，判断不清顺序时统一用 ul 更稳妥；li 同样必须被 ul 或 ol 直接包裹。

定义列表：dt 是标题，dd 是描述

为什么需要：当内容像“名词解释”时，用定义列表更贴合语义：一个关键字配一段解释。
怎么想：整体用 dl，列表项标题用 dt，描述用 dd。常见两种结构：一个 dt 对应一个 dd；也可以一个 dt 对应多个 dd。
怎么做：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

一个标题多个描述：

<dl>
  <dt>如何掌握一个 HTML 标签</dt>
  <dd>该标签的语义功能</dd>
  <dd>该标签的属性及属性值设置</dd>
  <dd>该标签是单标签还是双标签</dd>
</dl>

易错点：dt、dd 不要和 li 混用；定义列表实际页面中出现频率不如无序列表，但京东商品分类这类模块会用“一个 dl 中一个 dt 加一个 dd”的结构，看到时要能识别。

列表总结：六个标签与一条硬规则

本节涉及六个标签：ul（无序列表包裹元素）、ol（有序列表包裹元素）、li（列表项）、dl（定义列表包裹元素）、dt（定义列表项标题）、dd（定义列表项描述），全部是双标签。最关键的硬规则是：li 必须被 ul 或 ol 直接包裹。
易错点：不要用 div 包 li，也不要让 li 直接包 li；不符合标准时浏览器可能自动改结构，表面能看，检查元素就露馅。写代码保持缩进，转写稿也强调：VS Code 的折叠功能依赖缩进，缩进乱，代码也难维护。

回顾范围与标签清单

这一节先把前面学过的标签串起来。回顾不是背标签名，而是建立一条判断链：先看内容在页面里承担什么语义，再决定用哪个标签；语义判断不清时，再用 div、span 这类通用容器配合 CSS。下面先保留本节笔记中的标签清单，后面按模块复习。

1. 排版标签
   h1~h6
   p
   hr
   br
   pre
   div
2. 文本标签
   em
   strong
   ins
   del
   sup
   sub
   span
3. 图片标签
   img 属性 src、alt、width、height
4. 相对路径和绝对路径
   绝对路径：网络绝对路径、计算机本地绝对路径
   相对路径：./  ../
5. 超链接和锚点
   a 标签，属性：href、target

排版标签：先判断“块”的语义

为什么需要：页面要先有结构。标题、段落、分割线、换行、原格式文本、通用区块，都是页面的大块组成部分。
怎么想：先问“这块内容是不是标题、段落或整块区域”。能明确判断就用语义标签；判断不清再用 div。
怎么做：标题用 h1~h6，段落用 p，分割线用 hr，强制换行用 br，需要“怎么写就怎么显示”用 pre，通用区块用 div。
易错点：br 不是分段，分段优先用 p；pre 会保留换行和空格，适合代码、诗歌等原格式内容；不要变成“满屏 div”，标题也用 div 会让 SEO 和屏幕阅读设备难以判断结构。转写稿里反复强调：语义决定使用场景，div 是最常用但不应滥用。

文本标签：行内强调与补充说明

为什么需要：一段话里常要对某个词强调、标记新增/删除、做上下标或单独包一段文字。
怎么想：看它是不是“句子内部的局部描述”。是，就优先考虑文本标签；不是整块区域。
怎么做：强调可用 em 或 strong，em 默认斜体、strong 默认加粗；新增内容用 ins，删除内容用 del；上标 sup、下标 sub；需要单独控制样式时用 span。
易错点：em 和 strong 都有强调语义，语气强弱不必过度纠结；span 本身没有明显默认效果，通常要配合 CSS；文本标签和排版标签的一个重要区别是：排版标签通常独占一行，文本标签可和其他文字同行，后续 CSS 阶段会总结为块级与行内。

图片标签：src、alt 与宽高

为什么需要：页面要引入图片文件，还要在图片加载失败或读屏时提供说明。
怎么想：先确定图片地址，再写替代文字；宽高用于控制显示尺寸。
怎么做：img 是单标签，核心属性是 src 和 alt，可设 width、height。例如 <img src="images/a.png" alt="示例图片">。转写稿还提到 base64：把图片转成一串文本写进 src，适合很小的图片，因为文本会很长。
易错点：alt 不要漏；宽高一般只设一个，另一个按比例自动计算；图片扩展名常见 jpg、png、gif、webp、bmp 等；base64 不是图片文件路径，而是一种编码文本。

路径：相对路径从当前文件出发

为什么需要：网页要找到图片、其他网页等目标文件，路径写错就加载不到。
怎么想：先分清绝对路径和相对路径。绝对路径分网络绝对路径（如 http://、https:// 开头）和计算机本地绝对路径（Windows 盘符开头，Linux 以 / 开头）。前端更常用网络绝对路径。相对路径则始终从“当前写代码的文件”出发。
怎么做：目标在同级或下级，用 ./ 开头，./ 可省略；目标在上一级，用 ../；更上级就连续写 ../。转写稿的作业调试很典型：从 index 找 02，发现 02 在 shopcut 下，就写 shopcut/02；从 02 返回 index，当前文件变成 02，index 在上一级，所以写 ../index。再如 03 藏在 shopcut/details 下，从 index 写 shopcut/details/03；从 03 回 index 要连续向上两级。
易错点：最多写两个点，不能写三个点；相对路径依赖文件之间的相对位置，网页文件被移动到别的文件夹后，原来的相对路径可能失效；网络绝对路径要求文件能在互联网上被访问到，本地绝对路径不适合直接搬到网页中。

超链接与锚点：href、target 与 # 定位

为什么需要：超链接让页面之间可以跳转，锚点让长页面能定位到某一块。
怎么想：先确定目标地址，再决定在哪个窗口打开；锚点则要先有“靶子”，再写跳转链接。
怎么做：用 a 标签，目标地址写在 href 中，target="_blank" 表示新窗口打开，默认本窗口。href 可以是网页、图片等浏览器能打开的文件，也可以是浏览器打不开的文件从而触发下载；还可唤起打电话、发短信、发邮件等内置应用；href 为空时点击有刷新效果；只写 # 可回到页面顶部。锚点分两步：先给页面中某个标签加唯一 id，再写 href="#锚点名"；跳其他页面的锚点则写“页面地址#锚点名”。
易错点：a 的目标地址属性是 href，不要写成 src；锚点必须先设置再跳转；id 要唯一，否则浏览器不知道跳哪里；本页锚点用 #名字，不是直接写名字。

课堂画面

代码示例

示例一：无序列表（UL + LI，含嵌套 A 与子列表导航）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无序列表</title>
</head>
<body>
  <!-- 1. 最基础的无序列表 -->
  <h2>前端要学习的技术</h2>
  <ul>
    <li>HTML —— 超文本标记语言</li>
    <li>CSS —— 层叠样式表</li>
    <li>JavaScript —— 浏览器端脚本语言</li>
  </ul>

  <!-- 2. LI 中再包裹其他标签（新闻列表里套超链接） -->
  <h2>新闻列表</h2>
  <ul>
    <li><a href="#">这是第一条新闻标题</a></li>
    <li><a href="#">这是第二条新闻标题</a></li>
    <li><a href="#">这是第三条新闻标题</a></li>
  </ul>

  <!-- 3. 列表项里再套列表（二级导航菜单） -->
  <h2>导航菜单</h2>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li>
      <a href="#">关于我们</a>
      <ul>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">加入我们</a></li>
        <li><a href="#">举报我们</a></li>
      </ul>
    </li>
    <li><a href="#">商城</a></li>
    <li><a href="#">博客</a></li>
  </ul>
</body>
</html>

要点解释与易错点：

• ul 是列表的“包裹元素”，表示一个整体；li 是列表项（list item），两者都是双标签，且都没有属性。
• li 里不一定只写文字，可以包裹 a、strong、i，甚至再包一层 div，都没问题。
• 最易错的地方：子列表那三个 li 必须被一个 ul 直接包裹。如果直接写在外层 ul 里（少了那层 ul），浏览器会自动“纠正”结构，把子菜单项变成同级项——外表看着像子菜单，检查元素才发现层级已经乱了。
• 小圆点是 ul 的默认样式，不是必须的；导航条横着排、没圆点，靠的是 CSS，语义上仍然是列表。

---

示例二：有序列表（OL + LI）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>有序列表</title>
</head>
<body>
  <h2>富豪排行榜</h2>
  <ol>
    <li>第一名：高晓松</li>
    <li>第二名：比尔盖茨</li>
    <li>第三名：马云</li>
  </ol>

  <hr>

  <h2>做饭的步骤</h2>
  <ol>
    <li>洗菜</li>
    <li>切菜</li>
    <li>下锅炒</li>
  </ol>
</body>
</html>

要点解释与易错点：

• ol 是有序列表的包裹元素，与 ul 的唯一区别就是外层标签；里面的列表项依然是 li，不用换标签。
• 前面的 1. 2. 3. 是默认样式，同样可以（并且实际开发中经常）用 CSS 去掉；选 ol 图的是“这几项有先后顺序”的语义。
• 易错点：li 只能被 ul 或 ol 直接包裹，不能是 div 包着 li，也不能 li 直接套 li。
• 实际开发中有序列表用得比无序列表少很多，判断不出顺序时统一用 ul 是安全的。

---

示例三：定义列表（DL + DT + DD）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>定义列表</title>
</head>
<body>
  <!-- 一个 DT 对应一个 DD，两者共同组成一个列表项 -->
  <h2>前端技术栈</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>

    <dt>CSS</dt>
    <dd>层叠样式表</dd>

    <dt>JavaScript</dt>
    <dd>浏览器端脚本语言</dd>
  </dl>

  <hr>

  <!-- 一个 DT 对应多个 DD 也可以 -->
  <h2>如何掌握一个 HTML 标签</h2>
  <dl>
    <dt>如何掌握一个 HTML 标签</dt>
    <dd>该标签的语义（功能），进一步决定了在哪里用</dd>
    <dd>该标签的属性以及属性的值如何设置</dd>
    <dd>该标签是单标签还是双标签</dd>
  </dl>
</body>
</html>

要点解释与易错点：

• dl 对标 ul / ol，是最外层的包裹元素；列表项换成了 dt（标题）+ dd（描述），dt 是 title、dd 是 description。
• 一个 dt 可以配一个 dd，也可以配多个 dd（一条概念、多条解释），两种结构都常见。
• 易错点：dl 里不能直接写 li；dt / dd 也不能单独脱离 dl 使用。另外 dd 默认会向右缩进，这只是默认样式，不是语义要求。
• 实际场景中最典型的是商品分类模块：一个 dl 里只放一个 dt 和一个 dd，dt 是左侧分类名，dd 里装右侧所有子项。

常见错误

1. 子菜单"掉"成同级，导航结构散架 现象：给"关于我们"下面写"联系我们/加入我们"，浏览器里看着像子菜单，检查元素却发现它们是同级项。 原因：li 里直接并列写了新的 li，中间没有 ul 包裹，li 的直接父元素不是 ul/ol，浏览器按自己的规则"帮忙"改了结构。 修法：在父级 li 内部再套一层 ul，把子项 li 放进去；记住 li 的直接父级只能是 ul 或 ol，中间不能夹别的。

2. 新闻列表、导航条用 div + span 拼出来 现象：视觉上和真列表一模一样，代码打开全是 div。 原因：只按"长什么样"选标签，忽略了标签语义。 修法：一组相关内容（新闻、商品、导航、热搜词）统一换成 ul > li，需要跳转就在 li 里套 a；横排、去圆点交给 CSS。

3. 为了让列表横过来 / 去掉小圆点，干脆不用列表 现象：导航条用一堆 a 直接堆在 div 里。 原因：误以为小圆点、序号、换行是列表的"功能"，怕改不掉。 修法：保留 ul/ol 语义，样式阶段用 CSS 去掉 list-style、改 display；语义和外观是两件事。

4. 排行榜、步骤类内容一律用 ul，或反过来到处用 ol 现象：明明有先后顺序的内容用了无序列表；或者拿不准就硬套有序列表。 原因：没有先判断"这组内容有没有明确先后"。 修法：能明显感到顺序（步骤、排行榜）用 ol；感受不到或有争议的，统一用 ul，实际开发中 ul 占绝大多数。

5. 相对路径写错层级：三个点、漏点、多一层 现象：图片/页面本地打开正常，换个文件夹或换个页面就 404。 原因：写路径时没以"当前文件"为起点数层级；或误写 .../。 修法：从当前文件出发，同级或下级用 ./（可省略），上一级用 ../，最多两个点，上两级就写两次 ../；文件位置一变，相对路径要重新核对。

6. 锚点点了没反应，或跳到错误位置 现象：href="#top" 点击无跳转，或跳到别的段落。 原因：目标标签没设 id，或 id 值重复、拼写不一致。 修法：先给目标标签加唯一 id 当"靶子"，再用 #id 跳；跨页面写"地址 + #id"；单写 # 是回页面顶部。

练习

1. 结构判断：给出 4 段代码片段（li 直接放 body 下、li 里并列 li、ul 里直接放 a、li 里套 ul），逐条判断是否符合标准，并说明浏览器可能怎么"纠正"、纠正后结构变成了什么样。

2. 二级导航：用 ul/li/a 写一个 5 项导航，其中"关于我们"下挂 3 个二级项（联系我们、加入我们、举报我们）。要求结构合规、缩进规范，并说明为什么不能省掉那层 ul。

3. 选型练习：为下面 4 个场景各选一种列表并写出最小结构：① 网站底部"友情链接"；② 操作步骤"第一步…第二步…"；③ 音乐排行榜 Top10；④ 京东式商品分类（左侧类目名 + 右侧一堆子类目）。

4. 路径实战：目录结构为 index.html、shopcut/details/03.html、shopcut/02.html、config/05.html。写出 index → 03、03 → index、index → 05、05 → index 四组相对路径，并在每个页面加"返回首页"链接。

5. 改写题：给一段用 div + span 写的"新闻列表 + 顶部导航"代码，改写成语义化结构，并在注释里写明每处替换的理由（至少 3 处）。

原视频对照

#	视频	时长
1	回顾	16:14
2	相对路径作业讲解	07:19
3	无序列表	18:31
4	有序列表	07:55
5	定义列表	07:59
6	列表标签总结	01:58

小结

1. 选列表先问语义，不问长相：一组相关内容用列表，有明确先后用 ol，术语—解释用 dl，拿不准就用 ul。
2. li 的直接父级只能是 ul 或 ol，这是硬规则；浏览器会"给面子"帮你改结构，但改完就不是你想要的了。
3. 小圆点、序号、缩进、横竖排全是 CSS 的事，别为了样式换标签，也别为了样式放弃语义。
4. li 内部几乎不受限：可以放 a、strong、div，也可以再套一层列表——多级菜单就是这么来的。
5. dl 有两种常见写法（1 个 dt 配 1 个 dd、1 个 dt 配多个 dd），电商商品分类是它最典型的落地场景。
6. 相对路径永远以"当前文件"为起点数层级，../ 最多两个点；文件一挪位置，路径就得重新核对。
7. 锚点是两步动作：先设唯一 id 当靶子，再用 #id 打靶；单写 # 回顶部。
8. 语义化的真实收益在搜索引擎和屏幕阅读设备上，全 div 的页面"能看"，但不好用也难被精准抓取。