class、id、data-*、hidden、title、lang、dir、tabindex在<img>上真正起作用；accesskey和draggable易引发异常行为；contenteditable与spellcheck完全无效；alt是必需局部属性，非全局属性。
HTML 全局属性能用在 <img> 上，但不是所有都合理或有效——有些会静默失效，有些会干扰可访问性或加载行为，有些则必须配合特定场景才安全。
哪些全局属性在 <img> 中真正起作用
绝大多数全局属性语法上允许写在 <img> 标签里，但浏览器是否响应、是否影响渲染/语义/可访问性，得看具体属性：
-
class和id：完全可用，用于样式控制或 JS 选取，无副作用 -
data-*：推荐使用，比如data-srcset存延迟加载配置，dataset可读取 -
hidden：直接隐藏图片（等价于display: none），不触发加载（注意：如果图片已开始加载，可能仍会完成） -
title：鼠标悬停显示提示，但对屏幕阅读器支持弱，不应替代alt -
lang：极少用在<img>上，因为图片内容本身无语言；若alt值含多语言文本，可设在父容器上更合理 -
dir：对纯图片无意义；若alt或title含 RTL 文本，可设，但优先考虑 CSS 的direction -
tabindex：设为0可让图片获得键盘焦点，但除非是可交互图片（如带点击行为的图标），否则破坏默认可访问流
accesskey 和 draggable 在图片上的实际表现
这两个属性虽然合法，但容易引发意料外行为：
-
accesskey设在<img>上，焦点不会自动移到图片，也不会触发任何操作；用户按快捷键后，浏览器通常只尝试聚焦该元素，而<img>默认不可聚焦（无tabindex），结果就是“没反应” -
draggable默认值是auto，对图片来说意味着：鼠标拖拽图片会触发浏览器默认行为——弹出“另存为”对话框或生成一个拖拽预览图；设为false才能禁用，但需配合ondragstart阻止事件，否则部分浏览器仍可能响应 - 如果图片是 UI 图标且需拖放功能（如画布组件），应包裹在
<div draggable="true">中，而不是直接设在<img>
contenteditable 和 spellcheck 对图片完全无效
这两个属性对 <img> 是“语法合法但语义无意义”：
立即学习“前端免费学习笔记（深入）”；
-
contenteditable：图片是替换元素（replaced element），没有可编辑的文本内容，设为true不会启用编辑，也不改变 DOM 行为；某些旧版浏览器甚至会忽略该属性 -
spellcheck：仅对可输入/可编辑文本内容生效，<img>没有内联文本，该属性被完全忽略 - 误加这类属性不仅没用，还可能误导后续维护者以为图片具备某种交互能力
最容易被忽略的兼容性与语义陷阱
全局属性在 <img> 上的“可用”，不等于“推荐”或“安全”：
-
autofocus对<img>无效——它只对表单控件和contenteditable元素有意义，写上去会被忽略 -
style虽然能用，但内联样式耦合度高；更推荐用class+ CSS，尤其当多个图片需统一处理宽高、圆角、阴影时 -
alt不是全局属性，而是<img>的**必需局部属性**；用title替代alt是常见错误，会导致无障碍失败（WCAG 1.1.1） - 自定义
data-属性名必须全小写+连字符，比如data-image-id合法，data-imageId在 HTML 中解析为dataset.imageid（烤串转驼峰规则）
