主题
相对路径和绝对路径与超链接和锚点（Day2 3/3）
本页对应 Day02_HTML，共 6 段视频，约 1 小时 36 分。
学习目标
- 能够区分当前文件与目标文件，并解释绝对路径与相对路径的含义及适用场景。
- 能够使用网络绝对路径和本地绝对路径在 HTML 中引入图片，并说明前端开发中优先使用网络绝对路径的原因。
- 能够使用相对路径引入同级、下级、上级及跨目录中的目标文件，并正确处理
./、../与目录层级。 - 能够使用
<a>标签创建超链接，通过href设置目标地址，通过target控制本窗口或新窗口打开。 - 能够使用超链接跳转网页、打开图片/PDF/视频等浏览器可打开文件，触发浏览器不可打开文件的下载，并实现拨打电话、发送短信、发送邮件和刷新页面等功能。
- 能够通过为标签设置唯一
id创建锚点，并实现本页面锚点跳转、其他页面指定锚点跳转及返回页面顶部。
知识点
先分清当前文件和目标文件
为什么需要：路径的本质，是告诉浏览器“目标文件在哪里”。如果连当前文件、目标文件都分不清，就不知道这个地址是相对于谁写的。
怎么想：当前文件就是正在写 HTML 代码的文件；目标文件就是被引用的文件。比如在 index.html 里写 <img src="...">，index.html 是当前文件，图片就是目标文件。
怎么做：写路径前先问两句：我现在在哪个文件里写代码？我要引用的文件是谁？然后才决定用绝对路径还是相对路径。
易错点：不要把“当前文件”理解成浏览器窗口，也不要理解成图片文件；当前文件是 HTML 代码所在的那个文件。
绝对路径：完整地址，分网络和本地
为什么需要：当目标文件不在当前目录，或者在别的服务器上时，需要一个完整、无歧义的地址。
怎么想：转写稿里用“去鲁迅公园”打比方：说“中华人民共和国上海市……鲁迅公园”，就是完整地址，在哪儿说都指向同一个地方，这就是绝对路径。
怎么做：绝对路径有两种。网络绝对路径以 http 或 https 开头，例如：
html
<img src="https://example.com/img/logo.png">本地绝对路径以盘符开头，例如从文件属性里复制出来的位置：
html
<img src="D:\images\01.jpg">转写稿还强调：网络绝对路径先通过域名找到网络中的计算机，再进入目录找文件；本地绝对路径从盘符开始找目录。这里的“目录”就是文件夹，Windows 常叫文件夹，Linux 常叫目录。
易错点：本地绝对路径依赖“你这台电脑”的盘符和目录，用户电脑上不一定有 D:\images；前端实际开发主要用网络绝对路径，本地绝对路径更多是后端在自己运行的服务器上使用。另外，网络图片直接引用别人的地址叫“盗链”，对方可能做“反盗链”。
相对路径：从当前文件出发找目标
为什么需要：项目内的图片、页面通常放在一起，用相对路径更短，也方便整个项目移动。
怎么想：把当前文件当出发点，把目标文件当目的地，“从 index.html 发车”，看路怎么走：在隔壁就直接写；在下级目录就先进目录；在上级目录就先 ../ 回上一级。
怎么做：转写稿里的练习可以归纳为几种写法：
html
<!-- 同级：01 和 index.html 在一起 -->
<img src="01.jpg">
<img src="./01.jpg">
<!-- 下级：先进入 images 目录 -->
<img src="images/02.jpg">
<!-- 再下一级：进入 images/demo -->
<img src="images/demo/03.jpg">
<!-- 上级：先回到上一级 -->
<img src="../04.jpg">
<!-- 先回上一级，再进入 assets -->
<img src="../assets/05.jpg">
<!-- 先回上一级，再进入 assets/images -->
<img src="../assets/images/06.jpg">./ 表示当前目录，写在开头时可以省略；../ 表示上一级目录，不能省略。没有 .../ 这种写法，要上两级就写 ../../。
易错点：./ 可省略只限开头；../ 不能省；不要把 ../assets/05.jpg 写成 assets/05.jpg；相对路径不能跨盘，比如 HTML 在 D 盘、图片在 C 盘，相对路径找不到。
调试过程：刷新页面验证每一步
为什么需要：路径写错时图片不显示，必须按层级排查，不能靠猜。
怎么想：先确定当前文件位置，再把路径拆成“同级、下级、上级、先上后下”几种情况。
怎么做：转写稿的调试过程是：从 index.html 找同级 01，直接写文件名；找 images/02，先写 images/；找 images/demo/03，继续加目录；找上级 04，先写 ../04；找 ../assets/05，先 ../ 再进 assets/；找 ../assets/images/06，先 ../assets/images/。每改一次刷新页面看结果。
易错点：只看文件名不看目录；把“先回上一级再进别的目录”误认为目标一定在上一级；路径层级多时漏写一个 ../。
前端为什么主要用网络绝对路径
为什么需要：前端代码最终运行在成千上万用户的电脑上，资源必须能从网络上访问。
怎么想：用户在北京、上海甚至国外，不能让他去自己电脑的 D 盘找你的图片。转写稿说得很直白：前端主要使用网络绝对路径；本地绝对路径浏览器也支持，但实际开发不这么用。
怎么做：引用互联网资源用 http/https 地址；如果真要访问自己电脑上的图片，需要把电脑搭成 Web 服务器并接入万维网。转写稿演示了局域网 IP 可以访问，但别人回家后就不一定能访问，因为那只是局域网地址。
易错点：把“本机能打开”当成“上线能用”；把局域网 IP 当成公网地址；忘记网络绝对路径开头通常是 http 或 https。
易错点汇总与同音字纠正
转写稿里的“三对路径”就是“相对路径”，“决定路径”就是“绝对路径”，“外围网”就是“万维网”，“外部服务器”就是“Web 服务器”。检查路径时按顺序问：当前文件是谁？目标文件是谁？绝对路径开头是 http/https 还是盘符？相对路径开头是同级、下级还是 ../？同级可省 ./，上级不能省 ../，相对路径不能跨盘。前端优先使用网络绝对路径，项目内部文件再用相对路径。
先分清“当前文件”和“目标文件”
为什么需要：超链接的本质是“点一下，去另一个地方”，所以必须写清楚目标文件在哪里。写地址前先分清：当前文件是正在写 HTML 代码的文件；目标文件是被链接、被引用的文件。
怎么想：路径就是目标文件的地址。绝对路径是完整地址；相对路径要站在当前文件的位置去找目标文件。转写稿里用“从大厦打车去鲁迅公园”作比喻：说完整地址就是绝对路径，只说“鲁迅公园”则要司机结合当前位置判断，就是相对路径。
怎么做：超链接用 <a> 标签，地址写在 href 里。转写稿中口误的“half”应纠正为 href。
html
<!-- 绝对路径：目标网页在互联网上 -->
<a href="https://www.baidu.com">百度</a>
<!-- 相对路径：目标文件与当前文件同级，点杠可省略 -->
<a href="01.jpg">看图片</a>
<a href="./01.jpg">看图片（等价写法）</a>易错点：相对路径不能跨盘；./ 表示当前目录，常可省略；../ 表示上一级目录，没有 .../ 这种写法。实际开发应把文件放近一些，别故意制造复杂路径。
<a> 与 href：文字、图片都能做超链接
为什么需要：互联网页面靠超链接互相连接。百度、网易首页大量可点文字，鼠标放上去变小手，就是超链接。
怎么想：<a> 是双标签，href 写目标地址，标签中间写“用户能看懂的目标描述”。不能只写“超链接”三个字，要写“新闻标题”“百度”“淘宝”等。
怎么做：
html
<a href="https://www.baidu.com">百度</a>
<a href="https://www.taobao.com">淘宝</a>图片也能做超链接：把 <img> 包进 <a> 里。注意 <img> 是引入图片，<a> 是点击后跳转，两者功能不同。
html
<a href="https://www.baidu.com">
<img src="./image/05.jpg" alt="小乐图片" width="300">
</a>易错点：href 不要拼成 half；图片超链接不是把图片“引入”页面，而是让图片成为可点击入口。调试时点一下，看地址栏是否变化、图片是否被单独打开。
target：本窗口打开还是新窗口打开
为什么需要：点超链接后，有时希望保留当前页，有时希望直接在当前页跳走。
怎么想：target 控制目标文件在哪个窗口打开。默认 _self 是本窗口；_blank 是新窗口。转写稿中“tget”“black”“Clf”分别纠正为 target、_blank、_self。
怎么做：
html
<a href="https://www.baidu.com" target="_self">百度（本窗口）</a>
<a href="https://www.taobao.com" target="_blank">淘宝（新窗口）</a>易错点：_blank 前面有下划线；_self 写不写通常都是本窗口。实际项目听产品经理，不必死记“站内本窗口、站外新窗口”的所谓规则。
目标文件类型：能打开就打开，打不开就下载
为什么需要：超链接不只链网页，也可以链图片、PDF、视频、Word、压缩包等。
怎么想：浏览器能解析的文件，点击后直接打开；浏览器打不开的，就触发下载。下载按钮本质上常是一个 <a> 链接。
怎么做：
html
<a href="./resource/小乐的业余生活.jpg">小乐的业余生活</a>
<a href="./resource/如何30岁之前走上人生巅峰.pdf">PDF文件</a>
<a href="./resource/小乐的幸福生活.mp4">视频文件</a>
<a href="./resource/如何拥有百亿资产.docx">Word文件（会下载）</a>
<a href="./resource/小乐的私房照片.zip">压缩包（会下载）</a>易错点：不要以为 <a> 会把图片、PDF 嵌进当前页；它只是链接。调试时点图片链接，浏览器会单独打开图片；点 .docx、.zip 通常直接下载。
唤起应用与刷新：tel:、sms:、mailto:、空 href
为什么需要：网页上常见“打电话”“发短信”“发邮件”按钮，也可以用超链接实现。
怎么想：用协议前缀告诉浏览器要唤起什么应用；href 不写值，浏览器会把“当前页面自己”当作目标，于是重新加载。
怎么做：
html
<a href="tel:10086">打电话</a>
<a href="sms:10010">发短信</a>
<a href="mailto:test@example.com">发邮件</a>
<a href="">刷新</a>易错点：电脑没有电话、短信能力时点了没反应，手机上才明显；mailto: 会唤起默认邮件客户端。href="" 是刷新，href="#" 是回到页面顶部，别混。
锚点：先设 id，再用 #id 跳转
为什么需要：长页面内部要快速定位，比如点“第六部分”直接滚到页面下方，而不是打开新页面。
怎么想：锚点像靶心，要先在页面中设好点，再让超链接往这个点跳。给标签设置 id，该标签就成为锚点；id 值就是锚点名。所有标签都能设 id，但 id 不能重复。
怎么做：
html
<h2>锚点练习</h2>
<a href="#first">第一部分</a>
<a href="#second">第二部分</a>
<a href="#sixth">第六部分</a>
<div id="first">
<h2>第一部分：普通乐</h2>
<img src="./image/00.jpg" alt="普通乐">
</div>
<div id="second">
<h2>第二部分：文艺乐</h2>
<img src="./image/01.jpg" alt="文艺乐">
</div>
<div id="sixth">
<h2>第六部分：泰乐</h2>
<img src="./image/05.jpg" alt="泰乐">
</div>
<a href="#">返回页面顶部</a>跳转到其他页面的锚点，写法是“页面地址 + # + 锚点名”：
html
<a href="03锚点.html#fifth">去锚点练习页看老头乐</a>易错点：id 名两边必须对得上；id 不能重名；# 后面是锚点名，不是文件路径；只写 href="#" 会回顶部。调试时点“第六部分”，滚动条应直接滚到对应区域；从 01.html 跳到 03锚点.html#fifth，打开后应定位到老头乐位置。
作业目标：把“路径”和“超链接”练成一套动作
本节作业有两项：课堂案例复现、相对路径和超链接练习。
为什么需要：前端页面里的图片、网页、PDF、视频、压缩包，都要靠“地址”找到；超链接则负责把这些目标文件串起来。
怎么想：先分清当前文件（正在写 HTML 的文件）和目标文件（被引用的文件），再判断两者是同级、下级还是上级。
怎么做：在课堂案例中先用图片标签练路径，再在“相对路径练习”目录里把 6 张图逐个引入，最后用超链接完成页面跳转、图片链接和锚点跳转。
易错点：不要把“当前文件所在目录”和“目标文件所在目录”混为一谈；相对路径不能跨盘；./ 可省略，../ 不能省。
课堂案例：先分清当前文件和目标文件
为什么需要：不理解“当前/目标”，写路径只能靠猜。
怎么想：以 01-页面中引入图片.html 为当前文件，它里面要引用的图片就是目标文件；两者在同一目录时，直接写文件名即可。
怎么做：在课堂案例中写图片标签，先引入同级图片；再新建 03-使用绝对路径引入图片.html，从浏览器右键“复制图片地址”，粘贴到 src 中，观察网络绝对路径以 http/https 开头。
易错点：本地绝对路径以盘符开头，浏览器虽支持，但前端实际开发不推荐；引用别人服务器图片属于“盗链”，对方可能反盗链；自己电脑图片要能被访问，需要 Web 服务器环境。
html
<img src="01.jpg" alt="同级图片">
<img src="https://从浏览器复制的图片地址" alt="网络绝对路径图片">相对路径练习：从 index.html 出发“发车”
为什么需要：目标文件不一定和当前文件挨着，必须会“上一级、下一级”地找。
怎么想：把 index.html 当出发点：同级直接写文件名；下级写“目录名/文件名”；上级先写 ../，再进目录。
怎么做：下载“相对路径练习”整个目录，打开 index.html，删掉代码，自己把 01—06 六张图逐一引入；再练“小乐出狱图”这种跨多层目录的写法。
易错点：./ 表示当前目录，可省略；../ 表示上一级，不能省略；不要写 .../；相对路径不能跨盘。
html
<img src="01.jpg" alt="同级图片">
<img src="images/02.jpg" alt="下级目录图片">
<img src="images/dinner/03.jpg" alt="多级目录图片">
<img src="../04.jpg" alt="上一级图片">
<img src="../assets/05.jpg" alt="先上一级再进目录">
<img src="../assets/images/06.jpg" alt="先上一级再进多级目录">调试时就看浏览器是否出图；不出图先检查目录层级和文件名，不要急着改代码结构。
超链接练习：href、target、图片链接和锚点
为什么需要：网页靠超链接跳转；路径写对，超链接才有意义。
怎么想：href 写目标文件地址，既可以是网络绝对路径，也可以是相对路径；target="_self" 本窗口打开，target="_blank" 新窗口打开。
怎么做：写文字链接跳新闻页、百度首页；把图片包在 <a> 里做图片链接；用 href="" 做刷新，用 href="#" 返回顶部；用 id 设置锚点，用 #锚点名 跳转。
易错点：href="" 是刷新当前页，不是无效链接；# 是回顶部；id 不能重名；target 的下划线不要漏。
html
<a href="复制的新闻页网络绝对路径">新闻标题</a>
<a href="https://百度首页地址" target="_self">百度</a>
<a href="https://淘宝首页地址" target="_blank">淘宝</a>
<a href="">
<img src="images/05.jpg" alt="小乐图片链接">
</a>
<a href="#first">第一部分</a>
<div id="first">第一部分内容</div>
<a href="03-锚点.html#laotou">老头乐</a>
<a href="#">返回页面顶部</a>作业自检：按“当前文件→目标文件”复查
为什么需要：路径错误往往不是标签错，而是出发点错。
怎么想：每写一个 src 或 href，都问一句“从当前文件出发，怎么走到目标文件”。
怎么做：刷新页面看图片；点链接看本窗口/新窗口；点锚点看滚动位置；点 Word、ZIP 看是否下载。
易错点：锚点两边名字要一致；图片链接不要漏 </a>；跨盘相对路径不要试，前端作业按给的目录结构完成即可。
课堂画面
代码示例
1. 相对路径引入图片（当前文件：index.html）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对路径引入图片</title>
</head>
<body>
<h1>相对路径练习</h1>
<!-- 1. 同级目录：./01.jpg，开头的 ./ 可以省略 -->
<img src="01.jpg" alt="01 同级图片">
<br>
<!-- 2. 下一级目录：images/02.jpg -->
<img src="images/02.jpg" alt="02 下一级图片">
<br>
<!-- 3. 下一级的下一级：images/dinner/03.jpg -->
<img src="images/dinner/03.jpg" alt="03 两级下一级图片">
<br>
<hr>
<!-- 4. 上一级目录：../04.jpg -->
<img src="../04.jpg" alt="04 上一级图片">
<br>
<!-- 5. 先回上一级，再进 assets：../assets/05.jpg -->
<img src="../assets/05.jpg" alt="05 先上级再进目录">
<br>
<!-- 6. 先回上一级，再进 assets/images：../assets/images/06.jpg -->
<img src="../assets/images/06.jpg" alt="06 先上级再进两级目录">
<br>
<!-- 7. 连上两级再进同级目录：../../02-图片标签/小乐出狱图.jpg -->
<img src="../../02-图片标签/小乐出狱图.jpg" alt="跨两级目录的图片" width="300">
</body>
</html>关键行与易错点
src里写的就是“目标文件”的地址，index.html是“当前文件”，先想清楚两者谁在哪一级。./表示当前目录，可以省略，01.jpg与./01.jpg等价；只要是./开头都能省。../表示上一级目录，不能省略；要上两级就写../../，没有.../这种写法，只能一层一层往上退。- “感觉是平级”的文件（如
../assets/05.jpg）也必须先../退回上一级才能进得去，路径是“走”出来的，不是按层级“猜”的。 - 相对路径不能跨盘符（代码在 D 盘、图片在 C 盘就找不到）；实际开发把图片和页面放近一点，别自己给自己制造困难。
2. 超链接的各种功能
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接的各种功能</title>
</head>
<body>
<h1>超链接练习</h1>
<!-- 1. 目标文件是网页：网络绝对路径，target 默认 _self 本窗口打开 -->
<a href="https://news.163.com/">网易新闻（本窗口打开）</a>
<br>
<!-- 2. 目标文件是网页：相对路径同样可以 -->
<a href="03-相对路径练习/index.html">相对路径练习页面</a>
<br>
<!-- 3. 目标文件是图片：浏览器能打开，直接显示图片 -->
<a href="./resource/小乐的业余生活.jpg">小乐的业余生活（图片）</a>
<br>
<!-- 4. 目标文件是 PDF、视频：浏览器也能打开 -->
<a href="./resource/如何30岁之前走上人生巅峰.pdf">如何30岁之前走上人生巅峰（PDF）</a>
<br>
<a href="./resource/小赵的幸福生活.mp4">小赵的幸福生活（视频）</a>
<br>
<!-- 5. 浏览器打不开的文件：点击变成下载 -->
<a href="./resource/如何拥有百亿资产.docx">如何拥有百亿资产（Word，会下载）</a>
<br>
<a href="./resource/小乐的私房照片.zip">小乐的私房照片（压缩包，会下载）</a>
<br>
<!-- 6. 新窗口打开：target="_blank" -->
<a href="https://www.taobao.com" target="_blank">淘宝（新窗口打开）</a>
<br>
<!-- 7. 图片也能做超链接 -->
<a href="https://news.163.com/" target="_blank">
<img src="image/05.jpg" alt="小乐" width="300">
</a>
<br>
<hr>
<!-- 8. 唤起指定应用 -->
<a href="tel:10086">打电话</a>
<br>
<a href="sms:10010">发短信</a>
<br>
<a href="mailto:xxx@163.com">发邮件</a>
<br>
<!-- 9. href 不写值：点击刷新本页面 -->
<a href="">刷新</a>
</body>
</html>关键行与易错点
href是超链接最重要的属性，写的就是目标文件地址，绝对路径、相对路径都能用；文字要描述清楚跳过去是什么，别乱写。target="_self"是本窗口打开（默认值，写不写一样）；target="_blank"是新窗口打开——注意是_blank，不是black，也不是_blannk。- 浏览器打得开的文件（网页、图片、视频、PDF、md 等）点击后直接打开；打不开的（Word、zip、exe 等）点击后自动下载，很多下载站点的“下载按钮”就是一个指向文件的
a标签。 href="tel:10086"/sms:10010/mailto:邮箱是唤起设备内置应用，在手机上才真正生效，电脑上只会弹出提示。href=""空值表示“目标就是我自己”，点击等于刷新页面（和 F5、Ctrl+R 一样）。- 想让图片变小，用
width属性或 CSS 控制，别直接改图片文件。
3. 超链接 + 锚点
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>锚点</title>
</head>
<body>
<h1>锚点练习</h1>
<!-- 顶部导航：href = # + 锚点名 -->
<a href="#first">第一部分</a>
<a href="#second">第二部分</a>
<a href="#third">第三部分</a>
<a href="#fourth">第四部分</a>
<a href="#fifth">第五部分</a>
<a href="#sixth">第六部分</a>
<hr>
<!-- 给标签加 id，这个标签就成了锚点，id 的值就是锚点名 -->
<div id="first">
<h2>第一部分：普通乐</h2>
<img src="image/00.jpg" alt="普通乐">
</div>
<div id="second">
<h2>第二部分：文艺乐</h2>
<img src="image/01.jpg" alt="文艺乐">
</div>
<div id="third">
<h2>第三部分：光头乐</h2>
<img src="image/02.jpg" alt="光头乐">
</div>
<div id="fourth">
<h2>第四部分：胖哥乐</h2>
<img src="image/03.jpg" alt="胖哥乐">
</div>
<div id="fifth">
<h2>第五部分：老头乐</h2>
<img src="image/04.jpg" alt="老头乐">
</div>
<div id="sixth">
<h2>第六部分：泰国乐</h2>
<img src="image/05.jpg" alt="泰国乐">
</div>
<hr>
<!-- 只写一个 # ：返回页面顶部 -->
<a href="#">返回页面顶部</a>
</body>
</html>关键行与易错点
- 设置锚点 = 给标签加
id属性，id的值就是锚点名；所有标签都能设id，这是全局属性。 id必须唯一，不能重名（像身份证号）；但名字叫什么随意，只要和href里对得上即可，拼错了不影响，只要两边一致。- 跳本页锚点：
href="#锚点名"；跳其他页面锚点：href="页面地址#锚点名"，如<a href="03-锚点.html#fifth">老头乐</a>，井号写在地址后面。 - 只写一个
#：浏览器认为你没指定锚点名，就跳到页面最顶部，这就是“返回顶部”的写法。 id加在div上比加在h2上更合适，因为div的起始位置就是这一整块内容的最前面。- 点击过的超链接会变颜色（访问过的链接样式），这是 CSS 的默认表现，不是写错。
常见错误
- 现象：图片裂图、控制台 404 → 原因：上级目录误写成
.../，或漏写../→ 修法：上级只用../，上两级用../../，按“从当前文件出发”逐级核对请求 URL。 - 现象：本机预览正常，部署后资源全失效 → 原因：
src写了C:\...、D:/...等本地绝对路径 → 修法：改为相对路径或网络绝对 URL，前端资源避免盘符路径。 - 现象：
target="_blank"不生效或报错 → 原因：拼成_black、_blanck，或把target写到href里 → 修法：统一写target="_blank"，默认本窗口为_self，href只放地址。 - 现象：点锚点不滚动、跳错位置 → 原因：
href="#first"与id="First"大小写/拼写不一致，或id重复 → 修法：两边逐字一致，id全页唯一，用 DevTools 检查元素。 - 现象：点“空链接”页面刷新 → 原因：
href为空或写成#以外的空值，浏览器按当前页重新加载处理 → 修法：需要真实跳转就写地址/锚点；仅占位用按钮或阻止默认行为，不要误当普通链接。
练习
- 按给定目录写 4 个
img的src：同级图片、下级images/、上级../、先上级再进assets/img/；验收标准为 Network 面板全部 200。 - 做一个长页面：6 个内容区块各设唯一
id，顶部做 6 个锚点导航，底部加“返回顶部”；验收为点击滚动准确、无重复id。 - 从
index.html链接到detail.html#part2并新窗口打开；验收为打开新窗口后直接定位到part2。 - 准备网页、图片、PDF、ZIP 四类目标文件，各写一个超链接；记录点击后是“打开”还是“下载”，并解释是否符合预期。
- 给一段含 3 处错误的代码：
src=".../img.png"、href="#First"对应id="first"、target="_black"；找出并修正，验收为路径 200、锚点可跳、新窗口生效。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 使用绝对路径引入图片 | 20:05 |
| 2 | 相对路径练习 | 18:42 |
| 3 | HTML中路径的应用场景 | 01:43 |
| 4 | 超链接 | 14:49 |
| 5 | 超链接的各种功能 | 24:49 |
| 6 | 锚点 | 16:47 |
小结
- 先定“当前文件/目标文件”，相对路径永远从当前文件所在目录出发。
- 同级可省略
./，下级用“目录/”，上级用../，可连续但不要写.../。 - 前端部署优先相对路径或网络绝对 URL，本地盘符绝对路径不作为常规方案。
href决定去哪，target决定在哪开；默认_self，新窗口_blank，拼写必须准确。- 锚点依赖唯一
id；本页用#id，跨页用“页面地址#id”，单独#回顶部。 - 超链接目标类型决定浏览器行为：能打开则打开，不能打开则下载，不要误判为故障。
- 路径和锚点排错优先看 DevTools 的请求 URL、Console/Network 与元素
id。