相册分类页面应使用语义化HTML搭建：用<main>包裹整体，每个分类用<section id="xxx">配合<h2>标题，图片用<figure><figcaption>；路径需以HTML文件为基准写相对路径，响应式用srcset/sizes；筛选可用:target伪类实现锚点显示，部署时注意大小写和斜杠统一。
相册分类页面的核心结构怎么搭
不用框架也能做清晰分类，关键是用语义化 HTML 把“分类”和“图片”两层关系理清楚。分类不是靠 CSS 排版堆出来的，得靠 <section> 或 <article> 包裹每组内容，再用 <h2> 标出分类名——搜索引擎和屏幕阅读器都靠这个识别层级。
常见错误是直接用 <div class="category"> 套一堆 <img>，结果分类名没语义、没跳转锚点、打印时丢失标题。正确做法是：
-
<main>包整个相册区域，避免用<body>直接塞内容 - 每个分类用
<section>，加id（比如id="travel"），方便 URL 锚点跳转（#travel） - 分类标题必须是
<h2>，不能降级成<p>或<span> - 每张图用
<figure>+<figcaption>，哪怕暂时没文字说明也留着标签占位
图片路径和响应式加载怎么写才不崩
本地预览时路径错一半是因为没理解相对路径起点：浏览器以 HTML 文件所在目录为根，不是以代码编辑器打开的文件夹为根。比如 index.html 和 photos/travel/01.jpg 同在项目根目录下，那 <img src="photos/travel/01.jpg"> 才对，而不是 ./photos/... 或 /photos/...。
响应式不是只靠 width: 100%，得配合 HTML 层面的 srcset 和 sizes：
立即学习“前端免费学习笔记（深入）”；
- 别只写
<img src="small.jpg">，至少补上srcset：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> -
sizes值必须匹配实际 CSS 布局宽度，否则浏览器选错图源 - 本地测试时，Chrome 的 “Network → Disable cache” 要打开，不然改了
srcset看不出效果 - 如果图多，
<picture>比srcset更可控，但先确保img的基础路径跑通再升级
纯 HTML 实现分类筛选要绕开哪些坑
没有 JS 就没法动态筛选？其实可以用原生 <details> + <summary> 折叠分类，或者用 URL 片段（#wedding）配合 :target CSS 实现点击展开——但后者有个硬伤：:target 只能作用于当前匹配的元素，无法“高亮当前分类”或“收起其他分类”。
更务实的做法是放弃“单页无刷新切换”，直接用锚点导航 + CSS 控制显隐：
- 给每个
<section id="xxx">加默认display: none - 用
:target触发显示：section:target { display: block; } - 首页链接写成
<a href="#nature">自然</a>，用户点完自动滚动并显示对应区块 - 注意：多个
:target不会同时生效，所以不需要额外 JS 清除状态 - 如果想默认显示第一个分类，给第一个
<section>加style="display: block"，别依赖:target
部署到 GitHub Pages 时图片 404 怎么快速定位
本地能打开，GitHub Pages 报 404 Not Found，90% 是大小写或扩展名不一致导致的。Git 默认不区分大小写，但 GitHub 文件系统区分——IMG_1234.JPG 和 IMG_1234.jpg 在 macOS 上看着一样，上传后就是两个不同文件。
排查顺序很明确：
- 打开浏览器开发者工具，看 Network 标签下具体哪个
src返回了 404，复制完整路径 - 去 GitHub 仓库里逐级点开对应文件夹，确认文件名（包括 .jpg/.jpeg/.png 大小写）完全一致
- 检查
index.html中的src是否用了反斜杠\（Windows 路径习惯），必须全换为正斜杠/ - 如果用了子目录（比如
gh-pages分支），确认base href没写死成/，否则所有相对路径会从域名根开始找
最省事的办法：所有图片文件名全用小写字母 + 连字符，HTML 里也严格对应，避开大小写陷阱。
