将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
零基础可用html+极简css实现简约相册封面，需用语义结构、三行css（width/height/object-fit）撑满视口并居中，配合viewport meta确保移动端响应式。
零基础也能做，但别指望用纯 HTML 实现“自动缩略图+点击放大+响应式布局”这种功能——HTML 本身只负责结构，不处理样式和交互。真正能快速落地的简约相册封面，得靠 HTML 搭配极简 CSS，外加一点现代浏览器默认行为。
为什么不能只写
HTML 是骨架，没皮肤、没动作。比如你放一张图：<img src="cover.jpg">，它会原尺寸显示，可能溢出屏幕，也可能小得看不见。所谓“简约”，其实是靠 CSS 控制留白、居中、裁剪和基础过渡，不是 HTML 自带的。
<figure></figure> + <figcaption></figcaption> 是最稳妥的封面结构
不用 div 堆砌，语义清晰，兼容性好，搜索引擎也认。适合单张主图 + 一行标题的相册封面场景。
- 把主图包在
<figure></figure>里，标题用<figcaption></figcaption>（不是<p></p>或<h1></h1>） -
<figure></figure>默认有上下 margin，删掉或重置更可控：figure { margin: 0; } - 标题文字建议用
<span></span>包一层再设font-size，避免 h 标签带来意外缩放
<figure> @@##@@ <figcaption><span>Spring Album</span></figcaption></figure>
三行 CSS 就让图片撑满视口且居中
不用框架、不引入外部库，靠现代 CSS 的 object-fit 和 vh 单位就能搞定。注意：IE 不支持 object-fit，但如果你只是自己看或发给朋友，基本没问题。
-
img { width: 100vw; height: 100vh; object-fit: cover; }—— 强制铺满全屏，等比裁剪 - 加
display: block防止图片下方多出空白（inline 元素的基线间隙） -
figcaption用position: absolute叠在图上时，记得给figure加position: relative
移动端缩放失效？加这行 <meta> 头部声明
很多新手做好页面用手机打开发现无法缩放、文字糊成一片，八成漏了这个：
<meta name="viewport" content="width=device-width, initial-scale=1">
把它放在 最前面。没有它，iOS Safari 会按 980px 宽度渲染，再缩放适配，导致字体和图片比例错乱。安卓 Chrome 同样依赖它激活响应式行为。
真要动效或翻页，就得加 JavaScript；但作为封面，静态 + 语义化 + 视口控制，已经够用了。别被“相册”二字带偏去折腾轮播——先让一张图体面地站住，才是第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
