可行但需注意三点：图片路径必须相对一致且用正斜杠，语义化用<figure><figcaption>并填实alt，放大用原生<dialog>配合object-fit和WebP压缩。
直接用纯 HTML 搭摄影相册页，不依赖框架、不搞复杂构建，是可行的，但容易卡在图片加载慢、响应式错乱、点击放大失效这几个点上。关键不是“能不能写”，而是“怎么写才不至于上线后被自己气哭”。
图片路径和 <img> 的 src 必须相对一致
新手最常犯的错误：把图片放在 photos/ 文件夹，但 HTML 里写 src="IMG_1234.jpg"（缺目录），或者反过来——路径对了却漏了文件扩展名。浏览器报 404 不会明说“图没找到”，只显示空白或小图标。
- 统一用相对路径，比如相册页（
index.html）和图片都在同一级目录，就写src="photos/2023-sunset.jpg" - Windows 下复制的路径可能带反斜杠
\，HTML 只认正斜杠/，必须手动替换 - 文件名含中文或空格？立刻重命名为英文+短横线，如
mountain-sunrise.jpg，否则某些服务器或本地双击打开时会 404
<figure> + <figcaption> 是语义化展示的基础
别再只用 <div><img></div> 套图了。<figure> 明确告诉浏览器“这是独立内容单元”，对 SEO 和屏幕阅读器友好，且天然支持居中、间距控制。
示例：
立即学习“前端免费学习笔记（深入）”；
<figure> <img src="photos/portrait-01.jpg" alt="肖像特写，浅景深，自然光"> <figcaption>杭州·西溪湿地｜2024.03</figcaption> </figure>
-
alt属性不是可选项，是必填项；写具体场景，别写“图片1” -
<figcaption>文字建议控制在 20 字内，过长在手机上会折行难读 - 如果想让所有图片等宽高比排列，别用
width/height硬设，改用 CSS 的object-fit: cover配合容器尺寸
移动端点开大图，用原生 <dialog> 就够用
不用引入 lightbox 库也能实现点击放大——现代浏览器已支持 <dialog> 元素，轻量、无依赖、可键盘关闭（Esc）。
- 每个
<img>外包一层<button type="button">，绑定onclick="showModal('photos/full-01.jpg')" - 对应
<dialog id="photo-modal"><img src=""></dialog>，JS 只需两行：document.getElementById('photo-modal').showModal()和赋值src - 注意：Safari 对
<dialog>的backdrop支持较晚（iOS 16.4+），旧版需加简单遮罩层 fallback - 放大图务必设置
max-width: 90vw; max-height: 90vh;，否则大图撑爆视口
真正麻烦的从来不是写几行 HTML，而是图片本身——尺寸没压缩、格式没选对、EXIF 信息没清理，会导致页面加载慢三秒以上。上传前用 sips（macOS）或 sharp（Node）批量转 WebP + 80% 质量，比堆 CSS 技巧管用十倍。
