alt属性是影响可访问性、seo和用户体验的关键字段，须据图片作用精准设置：装饰性图片用alt=""，功能性图片说明操作（如“搜索”），信息性图片简洁概括内容，复杂图片辅以figcaption补充。
图片的 alt 属性不是可有可无的装饰，而是影响可访问性、SEO 和用户体验的关键字段。写得好，屏幕阅读器能准确传达信息；写得模糊或空着，会直接损害内容传达效果。核心原则是：用简洁自然的语言，描述图片“在当前上下文中真正起什么作用”。
纯装饰性图片（不传递信息）
比如分隔线、背景花纹、仅用于排版的留白图。这类图片对理解内容毫无帮助，应设为 alt=""（空字符串），而非 alt="装饰" 或 alt="图片"——后者反而会让屏幕阅读器读出无意义的词。
- ✅ 正确：
<img src="divider.png" alt=""> - ❌ 错误：
<img src="divider.png" alt="装饰线条">（多余干扰）
功能性图片（带操作意图）
如按钮图标、链接缩略图、提交按钮上的放大镜。alt 应说明“点击后做什么”，而不是描述图形本身。
- ✅ 搜索按钮：
<img src="search-icon.svg" alt="搜索"> - ✅ 返回首页链接：
<img src="logo.png" alt="返回首页"> - ✅ 商品图链接：
<a href="/product/123"><img src="shoes.jpg" alt="查看男士运动鞋详情"></a>
信息性图片（传递具体内容）
图表、照片、截图、信息图等。alt 要概括核心信息，避免冗长，不写“图中显示…”这类套话，也不堆砌所有细节。
立即学习“前端免费学习笔记（深入）”；
- ✅ 产品主图：
<img src="iphone15-black.jpg" alt="iPhone 15 黑色款正面特写，带灵动岛和直角边框"> - ✅ 数据图表：
<img src="q2-sales.png" alt="2024年第二季度销售额同比增长18%，主要来自华东和华南地区"> - ✅ 教程截图：
<img src="vscode-settings.png" alt="VS Code 设置界面，已勾选 'Auto Save' 和 'Format on Save' 选项">
复杂图片（需额外说明时）
信息密度高（如流程图、组织架构图、详细信息图），单靠 alt 难以说清，就用 alt 给简明摘要，再配合 figure + figcaption 或邻近文字补充。
- ✅ 流程图：
<img src="signup-flow.svg" alt="用户注册流程：输入邮箱→验证→设置密码→完成"><figcaption>完整流程含 4 个步骤，支持邮箱或手机号注册</figcaption> - ✅ 带文字的宣传图：alt 描述画面主体 + 关键文案，例如
alt="蓝色背景海报，中央大字'限时免息'，下方小字'至8月31日，最高12期'"
不复杂但容易忽略：alt 是内容的一部分，不是技术附注。每次插入图片，花三秒想清楚——它在这里，到底是用来干什么的？
