纯HTML+CSS旅行相册：用语义化<figure>+<figcaption>组织照片、地点、日期，配合srcset/sizes响应式图片、grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))自适应布局及打印优化，确保信息完整、多端清晰、无需JS。
用纯 HTML + CSS 实现旅行相册，不需要框架也能好看
直接上手就能跑，不用构建工具、不依赖 JavaScript，靠语义化 <figure> 和 <figcaption> 就能组织照片+地点+日期，再加点 CSS Grid 和响应式图片，手机和桌面都能看清楚。
关键不是“多炫”，而是“信息不丢”：每张图得有明确的拍摄地、时间、简短备注，否则半年后连自己都认不出那是京都还是清迈。
照片路径和 srcset 必须写对，否则在高 DPI 屏上模糊
旅行照片分辨率高，但直接放原图会拖慢加载；不处理又会在 iPhone 或 MacBook 上显示发虚。必须用 <img> 的 srcset 配合 sizes 做响应式适配。
-
src放默认尺寸（比如photo-800w.jpg），作为降级兜底 -
srcset列出多个宽度版本：photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w -
sizes告诉浏览器怎么选，例如(max-width: 768px) 100vw, 50vw表示小屏占满，大屏只占半宽 - 所有照片统一存进
/assets/trip/目录，避免相对路径错乱（../img/多一层就 404）
用 <figure> + <figcaption> 而不是 <div> 套文字
搜索引擎和读屏软件靠语义标签理解内容。用 <div class="caption">，机器不知道这是某张图的说明；而 <figure> 是标准语义容器，天然绑定图文关系。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
<figure>
<img src="kyoto-800w.jpg"
srcset="kyoto-400w.jpg 400w, kyoto-800w.jpg 800w, kyoto-1200w.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="伏见稻荷大社千本鸟居，晴天，2023年10月15日">
<figcaption>京都 · 伏见稻荷大社｜2023.10.15｜红墙与光影</figcaption>
</figure>
-
alt文本必须含地点+时间+天气/状态，不能只写“鸟居” -
<figcaption>里用中文顿号分隔，不用斜杠或逗号，更易读 - 不要把日期写成
2023/10/15，斜杠在部分屏幕阅读器里会被误读为“除以”
Grid 布局按“列数”而非“像素”切，不然 iPad 横屏就崩
用 grid-template-columns: repeat(3, 1fr) 看似简单，但在 iPad 横屏下三列太挤，文字重叠；全用 minmax(300px, 1fr) 又导致小屏只出一列，留白太多。
- 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) - 加上
gap: 1.2rem控制间距，别用margin，容易塌陷 - 给
<figure>设width: 100%，防止图片撑破格子 - 测试时真机横竖屏切换，别只信 Chrome DevTools 的模拟
最常被忽略的是打印样式——很多人想导出 PDF 留念，但默认 CSS 不适配打印。加一句 @media print { figure { break-inside: avoid } }，能避免照片和说明被截断到两页。
