SRC 和 HREF 之间的区别

Question

SRC 和 HREF 属性用于包含一些外部实体，如图像、CSS 文件、HTML 文件、任何其他网页或 JavaScript 文件。

SRC 和 HREF 之间有明显区别吗？何时何地使用 SRC 或 HREF ？我认为它们不能互换使用。

我在下面给出了几个使用这些属性的例子：

• 要引用 CSS 文件： href="cssfile.css" 在链接标签内。
• 引用 JS 文件： src="myscript.js" 在脚本标签内。
• 要引用图像文件： src="mypic.jpg" 在图像标签内。
• 要引用另一个网页： href="http://www.webpage.com" 在锚标记内。

原文由 Vijey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 考虑到规格的变化，@John-Yin 的 回答 更合适。

---

是的。 src 和 href 之间是有区别的，它们不能互换使用。我们使用 src 来 替换 元素，而 href 来建立引用文档和外部资源之间的关系。

href （超文本引用）属性指定 Web 资源的位置，从而定义当前元素（在锚点 a 的情况下）或当前文档（在 link 的情况下）之间的链接或关系) 和此属性定义的目标锚点或资源。当我们写：

 <link href="style.css" rel="stylesheet" />

浏览器知道这个资源是一个样式表，并且加工页面的解析 不会 暂停（渲染可能会暂停，因为浏览器需要样式规则来绘制和渲染页面）。它 不同于 将 css 文件的内容转储到 style 标签内。 （因此建议使用 link 而不是 @import 将样式表附加到您的 html 文档。）

src (Source) 属性只是将资源嵌入当前文档中元素定义的位置。例如。当浏览器发现

<script src="script.js"></script>

页面的加载和处理暂停，直到浏览器获取、编译和执行文件。它类似于将 js 文件的内容转储到 script 标记内。 img 标签的情况类似。它是一个空标签，应该包含在其中的内容由 src 属性定义。浏览器暂停加载，直到它获取并加载图像。 [情况也是如此 iframe ]

这就是为什么建议在底部加载所有 JavaScript 文件的原因（在 </body> 标记之前）

---

更新：请参阅@John-Yin 的 回答，了解有关如何根据 HTML 5 规范实施的更多信息。

原文由 apnerve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

apnerve 的答案在 HTML 5 出来之前是正确的，现在有点复杂了。

For example, the script element, according to the HTML 5 specification, has two global attributes which change how the src attribute functions: async and defer 。这些改变了脚本（嵌入内联或从外部文件导入）的执行方式。

这意味着可以使用这些属性选择三种可能的模式：

1. 当 async 属性存在时，脚本将在可用时异步执行。
2. 当 async 属性不存在但 defer 属性存在时，当页面完成解析时执行脚本。
3. 当这两个属性都不存在时，在用户代理继续解析页面之前，将立即获取并执行脚本。

详情请看 HTML 5推荐

我只是想为偶尔访问该主题的人更新一个新答案。有些答案应该由 stackoverflow 和我们每个人检查和存档。

原文由 John Yin 发布，翻译遵循 CC BY-SA 3.0 许可协议