img标签必须置于<body>内合法位置才能渲染，错误嵌套（如放<head>中）或缺失src、alt等必要属性会导致图像不显示、可访问性失效或布局错乱；src路径错误、大小写敏感及协议缺失是“图片不显示”的主因；alt为强制语义字段，缺失将致屏幕阅读器跳过、SEO丢失图意、加载失败留白；width/height属性影响布局稳定性，未设置会引发CLS偏移。
img 标签本身不依赖特定文档结构，只要出现在 <body> 内合法位置就能渲染，但错误嵌套或缺失必要属性会导致图像不显示、可访问性失效或布局错乱。
必须放在 <body> 里，不能直接塞进 <head>
浏览器只在渲染 <body> 时解析 img 标签。如果误写成：
<head> <img src="logo.png" alt="Logo"> </head>
图像完全不会出现，控制台也无报错——它被忽略，不是错误，只是无效位置。
-
<img>只能作为<body>的子元素或其合法后代（如<div>、<section>、<p>内） - 可以放在
<figure>里配合<figcaption>，这是语义化推荐做法 - 不能包裹文字内容（它是自闭合标签），写成
<img>xxx</img>会触发 HTML 解析错误，后续内容可能错位
src 路径写错，图像就“消失”得毫无提示
90% 的“图片不显示”问题出在 src 值无效。它不是占位符，而是实际 HTTP 请求地址。
- 相对路径以当前 HTML 文件为基准：若 HTML 在
/pages/about.html，图在/assets/icon.svg，就得写src="../assets/icon.svg" - 根相对路径（
src="/assets/icon.svg"）从域名根开始找，本地双击打开 HTML 时会失败（file:// 协议下 / 指向磁盘根目录） - 网络图片必须带协议或协议相对 URL：
src="https://cdn.example.com/pic.jpg"或src="//cdn.example.com/pic.jpg"；漏掉https://就变成相对路径，大概率 404 - 大小写敏感：Linux 服务器上
photo.JPG≠photo.jpg，开发时用 macOS/Windows 测试容易漏掉这点
alt 不是“可选装饰”，而是强制语义字段
不写 alt 不报错，但会让屏幕阅读器跳过该图像、SEO 丢失图意理解、图片加载失败时页面留白——这三者都算线上事故。
立即学习“前端免费学习笔记（深入）”；
- 描述性内容：
alt="穿蓝衬衫的工程师正在调试服务器机柜"，不是 "image123" 或空字符串 - 纯装饰图才用
alt=""（注意是空字符串，不是省略） - 如果图像含关键信息（如验证码、图表数据），
alt必须传达等效含义，不能只写“图表” - 搜索引擎把
alt当正文索引，和标题、段落文本同等权重
width/height 不只是样式，还影响布局稳定性
没设宽高时，浏览器不知道图像尺寸，先占位 0×0，等图片加载完再重排布局——导致文字“跳动”，尤其在移动端明显。
- 写死像素值：
width="300" height="200"最简单，但响应式场景下需配合 CSS 覆盖 - 现代做法是用 CSS 控制尺寸，但依然建议保留
width和height属性（哪怕只是占位）：它们提供长宽比，让浏览器提前预留空间 - 如果图像原始尺寸是 600×400，却只写
width="300"，浏览器无法推断高度，仍会重排
src 路径解析逻辑和 alt 的语义责任——它们不报错，却在用户看不见的地方持续制造体验裂痕。 
