图片路径错误导致img标签不显示，因浏览器静默失败；相对路径以html文件所在目录为起点，根路径需加/但file://协议下会失效；alt属性必填且需语义化；width/height仅控制显示尺寸，不减少加载体积。
图片路径写错，<img alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" > 标签就完全不显示
浏览器遇到无效的 src 路径时，不会报错，只会静默失败——连“图片加载失败”的小图标都不一定出现。最常见的是相对路径没对准当前 HTML 文件的位置。
- 用相对路径时，
src的起点是「HTML 文件所在目录」，不是项目根目录，也不是 CSS/JS 文件所在目录 -
src="images/logo.png"表示同级目录下有个images文件夹；如果 HTML 在/pages/index.html，那实际找的是/pages/images/logo.png - 想从项目根目录开始写，必须加斜杠：
src="/images/logo.png"（注意开头的/） - 路径里别混用反斜杠
\，Windows 习惯要改掉，一律用正斜杠/
本地双击打开 HTML，file:// 协议下路径更敏感
直接双击 HTML 文件运行时，浏览器走的是 file:// 协议，此时带 / 的绝对路径（如 /images/logo.png）会去访问磁盘根目录，基本必挂。
- 开发阶段建议用本地服务器（比如
python3 -m http.server或 VS Code Live Server 插件），避免file://陷阱 - 真要双击测试，路径只能用纯相对路径：
src="logo.png"、src="assets/icon.svg"，不能以/开头 - 路径大小写在 macOS/Linux 上敏感，Windows 看似不敏感但部署到服务器后可能出问题，统一小写更稳妥
<img alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" > 的 alt 不是可选装饰，而是关键属性
没写 alt 不影响显示，但会让屏幕阅读器用户完全不知道这是什么图，搜索引擎也无法理解图片内容，而且某些网络环境或样式禁用图片时，alt 文本就是唯一可见信息。
-
alt值要简洁描述图像本质，不是“图片”“图标”这种废话，比如alt="微信支付二维码" - 纯装饰性图片（比如分割线、背景花边），应设为空字符串：
alt=""，而不是删掉alt属性 - 如果图片是链接的一部分，
alt应说明点击后行为，例如alt="返回首页"
图片太大拖慢页面，width/height 属性不能替代压缩
只写 width="200" 和 height="150" 只是缩放显示尺寸，浏览器仍要下载原始大图，内存和流量照吃不误。
立即学习“前端免费学习笔记（深入）”；
- 真正优化得靠「源文件压缩」：用工具（如 Squoosh、ImageOptim）把 PNG/JPG 文件体积压下来
-
width/height属性仍有价值——能防止布局偏移（CLS），建议保留并填真实像素值 - 响应式场景优先用
srcset+sizes，而不是只靠 CSS 缩放：<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 768w" sizes="(min-width: 768px) 768px, 100vw" alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" >
src 是从哪算起。 
