【H5 前端开发笔记】第 04 期：HTML超文本标记语言 相对路径 和 绝对路径 详解

【H5 前端开发笔记】第 04 期HTML 相对路径 和 绝对路径 详解2026 最新版 · 实战导向 · 可直接作为学习笔记一、为什么一定要学路径在 HTML 中我们经常需要引用外部文件比如插入图片img src...跳转页面a href...引入 CSSlink href...引入 JSscript src...这些文件的位置就是通过路径来描述的。路径写错是前端新人最常见的错误之一学好路径能大幅减少调试时间。二、两种路径的核心概念类型定义特点使用场景推荐程度绝对路径从根开始的完整地址以/或http、https开头外部网站、CDN、线上资源按需使用相对路径以当前文件位置为基准计算的路径不以/开头或以./、../开头项目内部文件引用推荐★★★★★三、绝对路径详解1. 两种写法!-- 1. 网络绝对路径最常见 --imgsrchttps://www.example.com/images/logo.pngaltlogoahrefhttps://github.com去 GitHub/a!-- 2. 本地磁盘绝对路径几乎不用仅本地测试 --imgsrcC:/Users/张三/project/images/photo.jpgalt照片2. 特点优点不管当前文件在哪里都能准确找到目标缺点移植性差换电脑、部署到服务器后容易失效生产环境中主要用于引用外部 CDN或第三方资源四、相对路径详解重点掌握相对路径以当前 HTML 文件所在位置为起点使用.和..来定位。1. 相对路径三种核心写法写法含义示例假设当前文件在 project/index.html./当前目录可省略./images/logo.png或images/logo.png../上一级目录../css/style.css../../向上两级目录../../assets/js/app.js2. 实战示例推荐按此结构练习假设你的项目文件夹结构如下project/ ├── index.html ├── about.html ├── images/ │ ├── logo.png │ └── banner.jpg ├── css/ │ └── style.css ├── js/ │ └── main.js ├── pages/ │ └── news.html └── assets/ └── fonts/ └── icon.ttf在 index.html 中如何引用文件!-- 1. 当前目录下的文件 --ahrefabout.html关于我们/a!-- 2. 当前目录下文件夹中的文件 --imgsrcimages/logo.pngaltlogolinkrelstylesheethrefcss/style.cssscriptsrcjs/main.js/script!-- 3. 进入子文件夹 --ahrefpages/news.html新闻中心/a!-- 4. 回到上一级目录 --!-- 假如在 pages/news.html 中想回到 index.html --ahref../index.html返回首页/a!-- 5. 向上两级再进入其他文件夹 --imgsrc../../images/banner.jpgalt横幅记忆口诀同级直接写文件名 或./文件名下一级文件夹名/文件名上一级../上两级../../上N级../重复 N 次五、路径书写最佳实践2026 推荐项目内部一律使用相对路径移植性最好图片、CSS、JS 等资源尽量使用相对路径外部资源如 CDN、图标库使用绝对路径路径中不要出现中文可能导致部分服务器解析失败文件名和文件夹名统一使用小写 连字符推荐my-image.png而不是MyImage.PNG引用图片时务必写alt属性语义 无障碍 SEO正确示例imgsrcimages/product/banner-01.jpgalt2026 新款手机宣传图六、常见路径错误与调试技巧常见错误多写或少写/images/logo.pngvs/images/logo.png大小写不一致Windows 不敏感Mac/Linux 敏感路径中出现空格使用了本地绝对路径C:/...调试方法在浏览器中按 F12 打开开发者工具切换到Network面板刷新页面查看报红的资源鼠标悬停可看到具体路径错误七、本期练习建议全部完成练习项目结构请按此结构创建文件夹html-practice/ ├── 04-path/ │ ├── index.html │ ├── about.html │ ├── images/ │ │ └── cat.jpg │ ├── css/ │ │ └── style.css │ └── pages/ │ └── contact.html在index.html中引入css/style.css和images/cat.jpg在index.html中添加链接跳转到about.html和pages/contact.html在pages/contact.html中写一个链接返回index.html故意写错 2 个路径观察浏览器开发者工具中的报错八、笔记总结建议高亮记忆相对路径以当前文件为基准使用./、../绝对路径以/或http开头项目内部强烈推荐使用相对路径路径写错是新手最常见 Bug多用浏览器 Network 面板调试记忆口诀同级直接写下一级加文件夹名上一级用../第 05 期预告《HTML 常用语义化标签详解上—— 页面结构标签header、nav、main、section、article、aside、footer》需要我立即补充以下内容吗本期完整可运行的文件夹结构示例代码所有文件内容路径练习的标准答案含正确与错误对比包含图片、CSS、JS 的综合实战 Demo把第 01~04 期笔记合并成一份完整文档随时告诉我我立刻为你生成继续保持节奏第 04 期笔记到此结束。你的前端路径知识已经非常扎实了