图片画廊应使用语义化结构，配合css grid实现响应式布局，优先用max-width: 100%和loading="lazy"优化性能，并用原生实现点击放大功能。
图片画廊用 <figure></figure> 和 <figcaption></figcaption> 搭配最稳妥
纯靠 <img> 堆砌容易错位、响应式失效，也难统一控制间距和对齐。现代做法是把每张图包进 <figure></figure>，标题用 <figcaption></figcaption>，语义清晰，CSS 也好写。浏览器默认样式对 <figure></figure> 有合理 margin，比手写 <div> 更省事。
<p>常见错误：把所有 <code><img> 直接塞进一个 <div>，结果在小屏上图片挤成一列还溢出容器；或者用 <code><table> 实现网格——既过时又难适配。
<ul>
<li>每张图独立包裹：<code><figure><img src="a.jpg"><figcaption>描述</figcaption></figure>
<img> 设固定宽高，优先用 CSS 控制尺寸（如 max-width: 100%）<figcaption></figcaption> 不是必须的，但加上能提升可访问性，屏幕阅读器会读出来用 CSS Grid 实现响应式图片网格，不依赖 JS
不用轮播库、不用 jQuery，纯 HTML + CSS 就能实现等宽/等高自适应画廊。关键在 display: grid 和 grid-template-columns 的组合。
典型场景：想在桌面端显示 4 列，平板 2 列，手机 1 列——直接用 minmax() + auto-fit，比媒体查询更简洁。
- 核心规则：
gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))); gap: 1rem; } - 别忘了加
img { width: 100%; height: auto; }，否则图片可能拉伸变形 - 如果图尺寸差异大，加
figure { overflow: hidden; }防止长图撑破格子
点击放大图片？用原生 <dialog></dialog> 而不是自己写弹窗
很多教程教用 JS 绑定 click、动态创建 div、遮罩层……其实 Chrome 97+、Firefox 99+ 已支持原生 <dialog></dialog>，语义正确、键盘可访问、自带 backdrop。
容易踩的坑：忘记加 showModal() 方法，或没设 dialog[open] 属性导致无法显示；还有人把整个 <dialog></dialog> 写在 <figure></figure> 里，结果重复渲染。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 结构示例：
<button onclick="document.getElementById('modal').showModal()">查看大图</button><dialog id="modal"><img src="large.jpg"></dialog> - 必须用 JS 触发
showModal()，不能只靠 HTML 属性 - 关闭按钮要手动加：
<form method="dialog"><button>×</button></form>，否则用户按 Esc 或点 backdrop 关不掉
加载性能和 SEO 注意这三点
画廊图片多，不优化会拖慢首屏、被搜索引擎降权。重点不在“怎么放图”，而在“怎么让图不拖后腿”。
真实问题：本地测试很快，上线后用户反馈“点开页面卡顿几秒”，往往就是图片没懒加载或没压缩。
- 强制加
loading="lazy"到每个<img>，尤其画廊里非首屏的图 - 用
srcset提供多尺寸：<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w"> - 文件名别用
IMG_2345.jpg，改用描述性名字如mountain-sunset-gallery.jpg，利于 SEO
复杂点在于，srcset 和 sizes 要配合媒体查询算实际显示宽度，不是随便填几个分辨率就行；loading="lazy" 在 Safari 旧版本不支持，需要 fallback 方案——但至少先写上，现代浏览器都认。
