用HTML代码制作简易的个人相册展示页-html教程-PHP中文网

用纯html可搭建无需js、框架的相册页：以包裹与实现语义化布局，必含alt属性，配合css flex实现自动换行与响应式尺寸，图片路径用相对路径，点击通过跳转原图确保可访问性与兼容性。

用html代码制作简易的个人相册展示页

怎么用纯 HTML 搭出能看图的相册页

不需要框架、不依赖 JS，用原生 <img> 和语义化标签就能做出可访问、可缩放、结构清晰的相册页。关键不是“炫效果”，而是让每张图有描述、有顺序、能被屏幕阅读器识别，且在手机上不横向滚动。

用 <figure></figure> 包裹每张图 + <figcaption></figcaption>，比单纯 <div><img></div> 更利于 SEO 和无障碍访问
所有 <img> 必须带 alt 属性，哪怕只是空字符串 alt=""（表示装饰图），否则会触发 WCAG 警告
图片路径建议用相对路径，比如 photos/vacation-01.jpg，避免硬编码绝对 URL，方便本地预览和迁移
别写死宽高，用 CSS 控制尺寸；<img style="max-width:90%" style="max-width:90%"> 会导致移动端拉伸变形

怎么让多张图自动换行又不挤成一团

纯 HTML 不处理布局，必须靠 CSS。最简方案是用 display: flex + flex-wrap: wrap，比浮动或 inline-block 更可控。

<style>
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 图片间距，比 margin 更干净 */
  padding: 1rem;
}
.gallery figure {
  flex: 1 1 calc(33.333% - 1rem); /* 一行最多3张，留出 gap 空间 */
  max-width: 300px; /* 防止超大图撑破容器 */
  margin: 0;
}
.gallery img {
  width: 100%;
  height: auto; /* 保持原始宽高比 */
  display: block;
}
</style>

flex: 1 1 calc(33.333% - 1rem) 是核心：允许收缩、允许放大、基础宽度≈1/3屏宽减去间隙
max-width: 300px 比设死 width: 33% 更安全——小屏下图片不会过小，大屏下也不会无限拉宽
去掉 <figure></figure> 默认的上下边距（margin: 0），否则 gap 会叠加出意外空白

点击图片放大？不用 JS 怎么办

纯 HTML 做不了模态框，但可以用 <a></a> 标签跳转到大图页面，这是最轻量、最可靠的做法。别强行用 target="_blank"，优先考虑用户返回体验。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

把 <img> 套进 <a href="photos/vacation-01-large.jpg"></a>，链接地址指向高清原图
加 rel="noopener"（即使同域也建议加上），避免安全风险
如果想让用户知道这是“可查看大图”，在 <figcaption></figcaption> 末尾加个小标注，比如 <figcaption>京都清水寺 <small>(点击查看原图)</small></figcaption>
不要用 onclick="window.open(...)" —— 无 JS 时失效，且破坏右键保存、中键新标签等原生行为