src和href有什么区别_HTML资源引入底层逻辑-html教程-PHP中文网

src用于嵌入资源（如script、img），浏览器强制同步加载并执行；href用于建立关联（如link、a），浏览器异步处理或按需触发，二者语义与解析机制根本不同，不可互换。

src和href有什么区别_html资源引入底层逻辑

src 和 href 不是“能不能换着用”的问题，而是浏览器根本不会按你期望的方式处理——写错属性，资源就加载失败或被忽略。

为什么 `script` 只能用 `src`，不能用 `href`

因为 <script></script> 标签的规范只定义了 src 属性；href 对它完全无效。浏览器解析时会直接跳过 href，既不报错也不加载脚本。

<script src="app.js"></script>：浏览器立即发起请求，下载、解析、执行 JS，期间阻塞 HTML 解析（除非加 defer 或 async）
<script href="app.js"></script>：等价于空标签，JS 文件根本不会被请求，控制台也看不到任何错误提示
想动态加载脚本？得用 document.createElement('script') + .src = '...'，不是改属性名

为什么 `link` 只能用 `href`，没有 `src`

<link> 的语义是“建立文档与外部资源的关系”，不是“嵌入内容”。它没有 src 属性，写了也会被浏览器无视。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<link href="style.css" rel="stylesheet">：浏览器识别 rel="stylesheet" 后，会优先并行下载 CSS，并阻塞渲染（但不阻塞 HTML 解析）
<link src="style.css" rel="stylesheet">：CSS 不会加载，页面无样式，且没有任何警告
注意：<link rel="preload"> 也必须用 href，哪怕预加载的是 JS 或图片

`img` 加载失败时显示破图，而 `a` 的 `href` 失效却没提示

这是由两者对资源的依赖程度决定的：一个是内容必需项，一个是用户主动触发项。

<img src="missing.png">：资源缺失 → 渲染层 fallback 显示 alt 文本或缺省图标，DOM 中该元素仍存在
@#@#@#@#@#@#@#@#@#@0：链接目标不存在，点击后跳转失败（通常显示 404），但链接本身完全可点击、可聚焦、无障碍可用
关键差异：src 资源在 HTML 解析阶段就被强制拉取；href 资源只在用户交互或浏览器预加载策略触发时才可能拉取

性能影响：阻塞 vs 并行，本质是浏览器渲染流水线分工

src 类标签（script、img、iframe）触发的是“内容嵌入流程”，href 类标签（link、a、area）触发的是“关系声明流程”——这决定了它们在关键渲染路径（CRP）中的位置。

含 src 的同步脚本：会中断 HTML 解析器，直到 JS 执行完；这就是为什么内联脚本放 head 里会让白屏时间变长
含 href 的样式表：<link rel="stylesheet"> 虽不阻塞 HTML 解析，但会阻塞首次渲染（FOUC 风险），因为浏览器必须知道样式才能安全绘制
误用 @import 在 CSS 里引入另一个 CSS？它等效于在 CSS 内部又写了一个 href 请求，但它是串行的、无法被预加载器发现，比 <link> 慢得多

真正容易被忽略的，是浏览器预解析器（preloader）对 href 和 src 的识别时机不同：它能在主 HTML 解析器到达前就扫描出 <link href> 并提前发请求，但对 <script src></script> 的识别则受限于解析顺序和脚本执行阻塞——这个底层调度逻辑，才是影响首屏速度的关键变量。