第23篇文件组织与路径管理好的目录结构就像好的书架——找东西不用想放东西不会乱。学习目标掌握HTML项目的标准目录结构理解相对路径、绝对路径和根路径的区别与使用场景学会在不同层级间正确引用资源文件了解文件命名规范与组织技巧核心知识点一、标准目录结构一个典型的前端项目目录结构如下my-website/ ├── index.html # 网站首页必须放在根目录 ├── about.html # 其他页面可直接放根目录 ├── contact.html │ ├── css/ # 样式文件 │ ├── main.css │ ├── reset.css │ └── components/ │ ├── header.css │ └── footer.css │ ├── js/ # JavaScript文件 │ ├── main.js │ └── utils.js │ ├── images/ # 图片资源 │ ├── logo.png │ ├── icons/ │ │ ├── email.svg │ │ └── phone.svg │ └── products/ │ ├── product-01.jpg │ └── product-02.jpg │ ├── assets/ # 其他静态资源 │ ├── fonts/ │ │ └── custom-font.woff2 │ └── documents/ │ └── manual.pdf │ └── pages/ # 如果页面较多可单独存放 ├── blog/ │ ├── index.html # /pages/blog/ 的首页 │ └── post-01.html └── products/ ├── index.html └── detail.html目录结构原则原则说明扁平优先不要嵌套太深3层以内最佳按类型分组css放一起、js放一起、图片放一起语义命名目录名用英文小写见名知意index.html每个目录放index.html作为默认页二、路径详解路径分为三种相对路径、绝对路径、根路径。1. 相对路径以当前文件所在位置为起点计算路径。最常用。目录结构 my-website/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── logo.png └── pages/ └── about.html!-- 在 index.html 中引用 logo.png --!-- 当前在根目录images 是同级子目录 --imgsrcimages/logo.pngaltLogo!-- 在 pages/about.html 中引用 logo.png --!-- 需要先返回上一级..再进入 images --imgsrc../images/logo.pngaltLogo!-- 在 index.html 中引用 css/style.css --linkrelstylesheethrefcss/style.css相对路径符号符号含义示例./当前目录可省略./images/logo.pngimages/logo.png../上一级目录../images/logo.png../../上两级目录../../images/logo.png2. 绝对路径以完整URL形式书写包含协议和域名。!-- ✅ 引用外部CDN资源 --scriptsrchttps://cdn.example.com/lib/jquery.min.js/script!-- ✅ 引用外部图片 --imgsrchttps://picsum.photos/300/200alt随机图片!-- ❌ 不要用于站内资源本地开发和部署域名可能不同 --imgsrchttps://localhost:8080/images/logo.pngaltLogo3. 根路径绝对根路径以/开头表示从网站根目录开始。!-- 无论当前在哪个目录都从根目录找 --linkrelstylesheethref/css/style.cssimgsrc/images/logo.pngaltLogoahref/pages/about.html关于我们/a路径类型优点缺点适用场景相对路径灵活、本地可运行、移植方便文件移动后需要修改站内资源引用绝对路径明确、不受文件位置影响依赖域名、本地测试困难外部资源、CDN根路径清晰、不受文件层级影响需要服务器环境中大型项目、多人协作三、路径使用实战假设项目结构如下website/ ├── index.html ├── css/ │ └── main.css ├── js/ │ └── app.js ├── images/ │ ├── banner.jpg │ └── icons/ │ └── arrow.svg └── pages/ ├── about/ │ └── index.html └── products/ └── index.html场景 1根目录页面引用资源!-- website/index.html --!DOCTYPEhtmlhtmllangzh-CNheadlinkrelstylesheethrefcss/main.css/headbodyimgsrcimages/banner.jpgaltBannerahrefpages/about/关于我们/ascriptsrcjs/app.js/script/body/html场景 2子目录页面引用上级资源!-- website/pages/about/index.html --!DOCTYPEhtmlhtmllangzh-CNhead!-- 从 pages/about/ 返回两级到根目录 --linkrelstylesheethref../../css/main.css/headbodyimgsrc../../images/banner.jpgaltBanner!-- 同级目录跳转 --ahref../products/产品页/a!-- 返回首页 --ahref../../首页/ascriptsrc../../js/app.js/script/body/html场景 3使用根路径推荐中大型项目!-- 无论在哪级目录写法都一样 --linkrelstylesheethref/css/main.cssimgsrc/images/banner.jpgaltBannerahref/pages/about/关于我们/aahref/首页/ascriptsrc/js/app.js/script注意根路径/需要服务器环境才能正常工作。直接双击打开HTML文件file://协议时根路径会指向磁盘根目录导致404。四、文件命名规范1. 命名规则规则正确错误小写字母about-us.htmlAboutUs.html用连字符分隔contact-form.htmlcontact_form.html不用空格my-photo.jpgmy photo.jpg不用中文product-list.html产品列表.html不用特殊字符report-v2.pdfreportv2#.pdf2. 常用文件命名模式✅ 推荐 index.html # 目录默认页 about.html # 关于页面 contact-form.html # 联系表单 product-detail.html # 产品详情 blog-post-01.html # 博客文章 style-main.css # 主样式表 script-utils.js # 工具函数 icon-email.svg # 邮箱图标 logo-white.png # 白色Logo ❌ 避免 新建文本文档.html # 中文无意义 1.html # 纯数字 a.html, b.html # 单字母 final-final-v2.html # 版本混乱五、特殊目录与文件1. favicon.ico浏览器标签页图标放在根目录!-- 标准写法 --linkrelicontypeimage/x-iconhref/favicon.ico!-- PNG格式推荐支持透明 --linkrelicontypeimage/pnghref/images/favicon.png2. robots.txt告诉搜索引擎哪些页面可以爬取User-agent: * Allow: / Disallow: /private/ Disallow: /admin/ Sitemap: https://example.com/sitemap.xml3. .htaccessApache服务器用于URL重写、自定义错误页等超出HTML范围了解即可。动手练习练习 1路径填空根据以下目录结构填写正确的路径project/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── cat.jpg └── blog/ ├── index.html └── 2024/ └── hello.html起点文件目标文件相对路径index.htmlcss/style.csscss/style.cssindex.htmlblog/index.html?blog/index.htmlimages/cat.jpg?blog/2024/hello.htmlcss/style.css?blog/2024/hello.htmlindex.html?参考答案起点文件目标文件相对路径index.htmlblog/index.htmlblog/或blog/index.htmlblog/index.htmlimages/cat.jpg../images/cat.jpgblog/2024/hello.htmlcss/style.css../../css/style.cssblog/2024/hello.htmlindex.html../../或../../index.html练习 2目录结构设计为一个摄影作品集网站设计目录结构要求包含首页、作品集页按风景/人像/街拍摄影分类、关于页、联系页图片按分类存放有独立的CSS和JS目录参考答案photography-portfolio/ ├── index.html ├── about.html ├── contact.html ├── portfolio/ │ ├── index.html # 作品集总览 │ ├── landscape/ │ │ ├── index.html │ │ └── detail.html │ ├── portrait/ │ │ ├── index.html │ │ └── detail.html │ └── street/ │ ├── index.html │ └── detail.html ├── css/ │ ├── main.css │ ├── gallery.css │ └── responsive.css ├── js/ │ ├── gallery.js │ └── lightbox.js └── images/ ├── logo.png ├── landscape/ │ ├── mountain-sunrise.jpg │ └── ocean-waves.jpg ├── portrait/ │ ├── studio-01.jpg │ └── outdoor-01.jpg └── street/ ├── city-night.jpg └── market-day.jpg练习 3修复路径错误以下代码中的路径有错误请修正!-- 文件位置project/pages/blog/post.html --!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefcss/style.css/headbodyimgsrcimages/photo.jpgalt照片ahrefindex.html返回首页/aahrefpages/about.html关于/a/body/html参考答案!-- 文件位置project/pages/blog/post.html --!DOCTYPEhtmlhtmllangzh-CNhead!-- 需要返回两级到根目录 --linkrelstylesheethref../../css/style.css/headbodyimgsrc../../images/photo.jpgalt照片!-- 返回根目录首页 --ahref../../返回首页/a!-- 关于页在 pages/about.html --ahref../about.html关于/a/body/html常见误区 ⚠️误区正确理解“文件放哪都行路径写对就行”合理的目录结构让项目更易维护“相对路径用../越多越灵活”深层嵌套应改用根路径/“中文文件名能正常显示就行”URL编码后丑且易出问题一律用英文“根路径/在本地也能用”根路径需要服务器环境本地双击打开会失效“目录层级越深越有条理”扁平化优先超过3层就要考虑简化“所有页面都叫index.html会混淆”放在不同目录下是唯一路径不会冲突速查卡片 路径写法对照表目录结构 root/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── pic.jpg └── pages/ └── about.html起点目标相对路径根路径index.htmlcss/style.csscss/style.css/css/style.csspages/about.htmlimages/pic.jpg../images/pic.jpg/images/pic.jpgindex.htmlpages/about.htmlpages/about.html/pages/about.html目录结构模板small-project/ # 小型项目1-5页 ├── index.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── app.js └── images/ └── ... large-project/ # 中大型项目 ├── index.html ├── css/ ├── js/ ├── images/ ├── pages/ # 页面子目录 │ ├── about/ │ └── products/ └── assets/ # 字体、文档等文件命名检查清单全部小写使用连字符-分隔单词不含空格和特殊字符不含中文有意义能描述内容扩展阅读MDN: 绝对路径与相对路径Google Web Fundamentals: 文件路径Apache 目录索引配置MDN: 服务端网站基础下一篇第24篇性能优化入门24-性能优化入门.md
第23篇：文件组织与路径管理
第23篇文件组织与路径管理好的目录结构就像好的书架——找东西不用想放东西不会乱。学习目标掌握HTML项目的标准目录结构理解相对路径、绝对路径和根路径的区别与使用场景学会在不同层级间正确引用资源文件了解文件命名规范与组织技巧核心知识点一、标准目录结构一个典型的前端项目目录结构如下my-website/ ├── index.html # 网站首页必须放在根目录 ├── about.html # 其他页面可直接放根目录 ├── contact.html │ ├── css/ # 样式文件 │ ├── main.css │ ├── reset.css │ └── components/ │ ├── header.css │ └── footer.css │ ├── js/ # JavaScript文件 │ ├── main.js │ └── utils.js │ ├── images/ # 图片资源 │ ├── logo.png │ ├── icons/ │ │ ├── email.svg │ │ └── phone.svg │ └── products/ │ ├── product-01.jpg │ └── product-02.jpg │ ├── assets/ # 其他静态资源 │ ├── fonts/ │ │ └── custom-font.woff2 │ └── documents/ │ └── manual.pdf │ └── pages/ # 如果页面较多可单独存放 ├── blog/ │ ├── index.html # /pages/blog/ 的首页 │ └── post-01.html └── products/ ├── index.html └── detail.html目录结构原则原则说明扁平优先不要嵌套太深3层以内最佳按类型分组css放一起、js放一起、图片放一起语义命名目录名用英文小写见名知意index.html每个目录放index.html作为默认页二、路径详解路径分为三种相对路径、绝对路径、根路径。1. 相对路径以当前文件所在位置为起点计算路径。最常用。目录结构 my-website/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── logo.png └── pages/ └── about.html!-- 在 index.html 中引用 logo.png --!-- 当前在根目录images 是同级子目录 --imgsrcimages/logo.pngaltLogo!-- 在 pages/about.html 中引用 logo.png --!-- 需要先返回上一级..再进入 images --imgsrc../images/logo.pngaltLogo!-- 在 index.html 中引用 css/style.css --linkrelstylesheethrefcss/style.css相对路径符号符号含义示例./当前目录可省略./images/logo.pngimages/logo.png../上一级目录../images/logo.png../../上两级目录../../images/logo.png2. 绝对路径以完整URL形式书写包含协议和域名。!-- ✅ 引用外部CDN资源 --scriptsrchttps://cdn.example.com/lib/jquery.min.js/script!-- ✅ 引用外部图片 --imgsrchttps://picsum.photos/300/200alt随机图片!-- ❌ 不要用于站内资源本地开发和部署域名可能不同 --imgsrchttps://localhost:8080/images/logo.pngaltLogo3. 根路径绝对根路径以/开头表示从网站根目录开始。!-- 无论当前在哪个目录都从根目录找 --linkrelstylesheethref/css/style.cssimgsrc/images/logo.pngaltLogoahref/pages/about.html关于我们/a路径类型优点缺点适用场景相对路径灵活、本地可运行、移植方便文件移动后需要修改站内资源引用绝对路径明确、不受文件位置影响依赖域名、本地测试困难外部资源、CDN根路径清晰、不受文件层级影响需要服务器环境中大型项目、多人协作三、路径使用实战假设项目结构如下website/ ├── index.html ├── css/ │ └── main.css ├── js/ │ └── app.js ├── images/ │ ├── banner.jpg │ └── icons/ │ └── arrow.svg └── pages/ ├── about/ │ └── index.html └── products/ └── index.html场景 1根目录页面引用资源!-- website/index.html --!DOCTYPEhtmlhtmllangzh-CNheadlinkrelstylesheethrefcss/main.css/headbodyimgsrcimages/banner.jpgaltBannerahrefpages/about/关于我们/ascriptsrcjs/app.js/script/body/html场景 2子目录页面引用上级资源!-- website/pages/about/index.html --!DOCTYPEhtmlhtmllangzh-CNhead!-- 从 pages/about/ 返回两级到根目录 --linkrelstylesheethref../../css/main.css/headbodyimgsrc../../images/banner.jpgaltBanner!-- 同级目录跳转 --ahref../products/产品页/a!-- 返回首页 --ahref../../首页/ascriptsrc../../js/app.js/script/body/html场景 3使用根路径推荐中大型项目!-- 无论在哪级目录写法都一样 --linkrelstylesheethref/css/main.cssimgsrc/images/banner.jpgaltBannerahref/pages/about/关于我们/aahref/首页/ascriptsrc/js/app.js/script注意根路径/需要服务器环境才能正常工作。直接双击打开HTML文件file://协议时根路径会指向磁盘根目录导致404。四、文件命名规范1. 命名规则规则正确错误小写字母about-us.htmlAboutUs.html用连字符分隔contact-form.htmlcontact_form.html不用空格my-photo.jpgmy photo.jpg不用中文product-list.html产品列表.html不用特殊字符report-v2.pdfreportv2#.pdf2. 常用文件命名模式✅ 推荐 index.html # 目录默认页 about.html # 关于页面 contact-form.html # 联系表单 product-detail.html # 产品详情 blog-post-01.html # 博客文章 style-main.css # 主样式表 script-utils.js # 工具函数 icon-email.svg # 邮箱图标 logo-white.png # 白色Logo ❌ 避免 新建文本文档.html # 中文无意义 1.html # 纯数字 a.html, b.html # 单字母 final-final-v2.html # 版本混乱五、特殊目录与文件1. favicon.ico浏览器标签页图标放在根目录!-- 标准写法 --linkrelicontypeimage/x-iconhref/favicon.ico!-- PNG格式推荐支持透明 --linkrelicontypeimage/pnghref/images/favicon.png2. robots.txt告诉搜索引擎哪些页面可以爬取User-agent: * Allow: / Disallow: /private/ Disallow: /admin/ Sitemap: https://example.com/sitemap.xml3. .htaccessApache服务器用于URL重写、自定义错误页等超出HTML范围了解即可。动手练习练习 1路径填空根据以下目录结构填写正确的路径project/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── cat.jpg └── blog/ ├── index.html └── 2024/ └── hello.html起点文件目标文件相对路径index.htmlcss/style.csscss/style.cssindex.htmlblog/index.html?blog/index.htmlimages/cat.jpg?blog/2024/hello.htmlcss/style.css?blog/2024/hello.htmlindex.html?参考答案起点文件目标文件相对路径index.htmlblog/index.htmlblog/或blog/index.htmlblog/index.htmlimages/cat.jpg../images/cat.jpgblog/2024/hello.htmlcss/style.css../../css/style.cssblog/2024/hello.htmlindex.html../../或../../index.html练习 2目录结构设计为一个摄影作品集网站设计目录结构要求包含首页、作品集页按风景/人像/街拍摄影分类、关于页、联系页图片按分类存放有独立的CSS和JS目录参考答案photography-portfolio/ ├── index.html ├── about.html ├── contact.html ├── portfolio/ │ ├── index.html # 作品集总览 │ ├── landscape/ │ │ ├── index.html │ │ └── detail.html │ ├── portrait/ │ │ ├── index.html │ │ └── detail.html │ └── street/ │ ├── index.html │ └── detail.html ├── css/ │ ├── main.css │ ├── gallery.css │ └── responsive.css ├── js/ │ ├── gallery.js │ └── lightbox.js └── images/ ├── logo.png ├── landscape/ │ ├── mountain-sunrise.jpg │ └── ocean-waves.jpg ├── portrait/ │ ├── studio-01.jpg │ └── outdoor-01.jpg └── street/ ├── city-night.jpg └── market-day.jpg练习 3修复路径错误以下代码中的路径有错误请修正!-- 文件位置project/pages/blog/post.html --!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefcss/style.css/headbodyimgsrcimages/photo.jpgalt照片ahrefindex.html返回首页/aahrefpages/about.html关于/a/body/html参考答案!-- 文件位置project/pages/blog/post.html --!DOCTYPEhtmlhtmllangzh-CNhead!-- 需要返回两级到根目录 --linkrelstylesheethref../../css/style.css/headbodyimgsrc../../images/photo.jpgalt照片!-- 返回根目录首页 --ahref../../返回首页/a!-- 关于页在 pages/about.html --ahref../about.html关于/a/body/html常见误区 ⚠️误区正确理解“文件放哪都行路径写对就行”合理的目录结构让项目更易维护“相对路径用../越多越灵活”深层嵌套应改用根路径/“中文文件名能正常显示就行”URL编码后丑且易出问题一律用英文“根路径/在本地也能用”根路径需要服务器环境本地双击打开会失效“目录层级越深越有条理”扁平化优先超过3层就要考虑简化“所有页面都叫index.html会混淆”放在不同目录下是唯一路径不会冲突速查卡片 路径写法对照表目录结构 root/ ├── index.html ├── css/ │ └── style.css ├── images/ │ └── pic.jpg └── pages/ └── about.html起点目标相对路径根路径index.htmlcss/style.csscss/style.css/css/style.csspages/about.htmlimages/pic.jpg../images/pic.jpg/images/pic.jpgindex.htmlpages/about.htmlpages/about.html/pages/about.html目录结构模板small-project/ # 小型项目1-5页 ├── index.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── app.js └── images/ └── ... large-project/ # 中大型项目 ├── index.html ├── css/ ├── js/ ├── images/ ├── pages/ # 页面子目录 │ ├── about/ │ └── products/ └── assets/ # 字体、文档等文件命名检查清单全部小写使用连字符-分隔单词不含空格和特殊字符不含中文有意义能描述内容扩展阅读MDN: 绝对路径与相对路径Google Web Fundamentals: 文件路径Apache 目录索引配置MDN: 服务端网站基础下一篇第24篇性能优化入门24-性能优化入门.md
