src属性的作用_HTML src资源加载路径相对与绝对选择-html教程-PHP中文网

src属性用于加载并嵌入资源，非跳转用途；失败显示破图+alt文本，失败导致报错中断执行，失败仅空白不影响父页，/控件灰显需手动监听error事件。

src属性的作用_html src资源加载路径相对与绝对选择

src 属性不是用来“跳转”或“链接”的，而是让浏览器去加载并嵌入资源——它一解析就发起请求，失败会直接显示断链或空白，不给你补救机会。

src 加载失败时浏览器怎么表现

不同标签对 src 失败的容忍度差异很大：

<img>：显示破损图标 + alt 文本（如果写了）；DOM 中 img 元素仍存在，但 img.naturalWidth === 0
<script></script>：脚本报错（如 Failed to load resource: net::ERR_ABORTED），后续依赖该脚本的代码直接中断执行
<iframe></iframe>：显示空白区域，控制台可能报 Load denied by X-Frame-Options 或 404，但父页面不受影响
<audio>/<video></video></audio>：控件灰显、无法播放，error 事件可监听，但不会自动 fallback 到 source 备选（需手动写逻辑）

相对路径 vs 绝对路径：什么时候必须用 / 开头

相对路径容易被误读成“相对于当前 HTML 文件”，其实关键看是否以 / 开头：

src="js/main.js" → 相对于当前 HTML 所在目录（比如 /blog/post.html 就去请求 /blog/js/main.js）
src="/js/main.js" → 相对于域名根目录（无论 HTML 在哪，都请求 https://yoursite.com/js/main.js）
src="https://cdn.example.com/lib.js" → 绝对 URL，绕过同源策略限制，但受 CORS 和第三方服务稳定性制约

常见坑：<script src="js/app.js"></script> 在子目录页（如 /admin/users/edit.html）下会错误请求 /admin/users/js/app.js，而不是你预设的站点统一 JS 目录。加 / 前缀能规避这类路径漂移。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

动态设置 src 时要注意的生命周期问题

用 JavaScript 修改 img.src 或 script.src 不是“立刻生效”，得考虑加载时机：

修改 img.src 后，图像开始加载，但 DOM 不会等它完成才继续；想确认加载成功，得监听 load 事件，失败则监听 error
动态创建 <script></script> 并赋值 src，脚本是异步加载并执行的；若依赖其导出的函数，不能紧跟着调用，得等 script.onload 触发后再执行后续逻辑
iframe.src 赋值后，内容加载完成前，iframe.contentDocument 是 null 或抛错；必须等 iframe.onload 或用 iframe.addEventListener('load', ...)