img标签是html5中void元素，不可写闭合标签或嵌套内容，正确写法为；src和alt为必需属性，width/height仅接受数字或百分比值。
img 标签没有闭合标签，也不允许嵌套内容
HTML 中的 <img> 是一个自闭合（void）元素，语法上不能写成 <img>，也不能在它内部放文字、其他标签或子节点。浏览器遇到 <img> 会自动忽略闭合标签，只按 <img> 解析——但这种写法本身是无效 HTML，在 HTML5 中属于 parse error，可能触发 quirks mode 或影响验证工具报错。
常见错误现象：
- 编辑器里写成
<img src="a.jpg">图片说明，结果“图片说明”直接显示在图片下方，且无任何语义关联 - 用 React 或 Vue 模板时误写为
<img src="%7Burl%7D">{{alt}}，导致编译失败或渲染异常
正确写法只有两种形式：
-
<img src="a.jpg" alt="描述">（HTML5 推荐，不加斜杠） -
<img src="a.jpg" alt="描述">（XHTML 风格，斜杠可选，但现代 HTML5 不强制要求）
src 和 alt 是必需属性，缺一不可
src 和 alt 在 HTML5 规范中被明确定义为 <img> 的**必需属性**。省略 src 会导致图片不加载；省略 alt 虽然页面能渲染，但会：① 通不过 WCAG 可访问性检查；② 屏幕阅读器无法播报；③ 搜索引擎降低图片相关性评分；④ 浏览器在图片加载失败时显示空白占位框（部分浏览器显示“×”图标，但无文字提示）。
容易踩的坑：
- 写成
<img src="logo.png">，以为alt可选——实际是不符合标准的 - 用空字符串
alt=""时没想清楚语义：这表示“该图纯装饰，无信息量”，适用于背景图替代、分隔线等场景；若图片含关键信息（如图表、按钮图标），必须写有意义的文本 - 把文件名当 alt，比如
alt="chart-2024-q1.png"——对用户毫无帮助
width/height 属性值只能是数字或百分比，不能带单位
width 和 height 是 HTML 属性，不是 CSS。它们的值写成 width="300" 表示 300 像素；width="50%" 表示父容器宽度的 50%。但注意：不能写成 width="300px" 或 height="auto" —— 这些会被浏览器忽略或解析为 0。
为什么这样设计？
- 早期 HTML 属性只接受原始数值或百分比，不支持 CSS 单位体系
-
auto不是合法值，HTML 属性中不存在“自动”概念；要实现等比缩放，只设width或height即可，浏览器自动维持宽高比 - 如果需要更灵活控制（如响应式、max-width、object-fit），必须用 CSS，而非 HTML 属性
典型误用：
-
<img src="a.jpg" style="max-width:90%" height="200px">→ 实际渲染为 0×0 占位框 -
<img src="b.jpg" style="max-width:90%" height="auto">→height失效，图片可能被拉伸或裁剪
img 必须是块级或行内上下文中的合法子元素
<img> 是行内级（inline-level）元素，但它可以出现在大多数块级容器中（如 <p></p>、<div>、<code><section></section>），唯独不能直接放在某些严格语义容器里——比如 、<title></title>、<style></style>、<script></script> 内部，也不能作为 <ul></ul> 或 <ol></ol> 的直接子元素（除非包在 <li> 里）。
另一个隐性约束：不能放在 <pre class="brush:php;toolbar:false;"></pre> 内部作为纯文本流的一部分——虽然语法上不报错，但换行和空格处理会混乱，且破坏 <pre class="brush:php;toolbar:false;"></pre> 的预格式化语义。
真实场景中容易忽略的点：
- 在 Markdown 渲染后生成的 HTML 中，意外把
<img>插入到<table> 的 <code><thead> 或 <code><tbody> 外层，导致表格结构断裂 <li>用 CMS 或低代码平台拖拽组件时，把图片模块丢进仅接受文本的字段（如 meta description 区域），结果 <code><img>被剥离或转义 - 在 SVG 内嵌 HTML 场景（如
<foreignobject></foreignobject>）中，未包裹就直接写<img>，导致解析失败
实际项目里最常被绕开、但又真正卡住上线的问题，往往不是“怎么让图显示出来”，而是“为什么校验工具报错”“为什么无障碍测试不通过”“为什么 SSR 渲染后图片尺寸错乱”——这些都根植于
<img> 的结构约束，而不是样式或路径问题。
