SRC和HREF之间的区别

Question

在SRC和HREF属性用于包括一些外部实体，如图像，CSS文件，HTML文件，其他任何网页或JavaScript文件。有没有明确区分SRC和HREF？在哪里或何时使用SRC或HREF？我认为它们不能互换使用。我在下面给出一些使用这些属性的示例：引用CSS文件：href="cssfile.css"在link标记内。引用JS文件：src="myscript.js"在script标签内。引用图像文件：src="mypic.jpg"在图像标签内。要引用另一个网页：href="http://www.webpage.com"在锚标记内。

Answer 1

考虑到规格的更改，@ John-Yin的答案更合适。

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

href（超文本引用）属性指定Web资源的位置，从而定义当前元素（如果为anchor a）或当前文档（如果为link）与该属性定义的目标锚点或资源之间的链接或关系。当我们写：

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

浏览器了解到该资源是样式表，并且 处理中页面的解析不会暂停（渲染可能会暂停，因为浏览器需要样式规则来绘制和渲染页面）。这是不是类似倾倒里面的CSS文件的内容style标签。（因此，建议使用link而不是@import将样式表附加到html文档。）

src（源）属性只是将资源嵌入到当前文档中元素定义的位置。例如。当浏览器找到

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

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

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

Answer 2

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

例如，script根据HTML 5规范，该元素具有两个全局属性，它们可更改src属性的功能：async和defer。这些更改了脚本（嵌入式或从外部文件导入）的执行方式。

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

当该async属性存在时，该脚本将在可用时立即异步执行。

当async属性不存在但defer属性存在时，则在页面完成解析后执行脚本。

如果这两个属性都不存在，则在用户代理继续解析页面之前，将立即获取并执行脚本。

有关详细信息，请参见HTML 5建议

对于那些偶尔访问此主题的人，我只想用新的答案进行更新。一些答案应该由stackoverflow和我们每个人进行检查和存档。

Answer 3

^ h REF：是一个REF erence到当前页面信息的页面样式或链接至其他页面即CSS信息。页面解析不会停止。

SRC：是重新SOURCE添加/加载到页面中的图像或JavaScript。页面解析可能会停止，具体取决于编码的属性。这就是为什么最好在结束body标记之前添加脚本，以免阻止页面渲染。