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"。

Answer 1

注意： @ John-Yin的answer更适合考虑规格的变化。

是。 src 和 href 之间存在差异，并且它们不能互换使用。我们对 replaced 元素使用 src ，而 href 用于在引用文档和外部资源之间建立关系。

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

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

浏览器了解此资源是样式表，并且页面的处理解析不暂停（由于浏览器需要样式规则来绘制，因此可能会暂停渲染并呈现页面）。不类似于在style标记内转储css文件的内容。（因此建议使用link而不是@import将样式表附加到您的html文档。）

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

时

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

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

的情况也是如此

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

的原因

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

Answer 2

在HTML 5发布之前，apnerve的回答是正确的，现在它有点复杂了。

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

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

当async属性存在时，脚本将一旦可用就异步执行。
如果async属性不存在但存在defer属性，则在页面完成解析后执行脚本。
当两个属性都不存在时，在用户代理继续解析页面之前，将立即获取并执行脚本。

有关详细信息，请参阅HTML 5 recommendation

我只想更新一个偶然访问此主题的新答案。应该通过stackoverflow和我们每个人检查和归档一些答案。

Answer 3

我认为<src>为页面添加了一些资源，而<href>只是为了提供资源链接（不将资源本身添加到页面中）。

Answer 4

简单定义

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

Answer 5

你应该记得何时使用每个人，那就是它 href 与链接

一起使用

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

src 与脚本和图片

一起使用

<img src="the_image_link" />
<script type="text/javascript" src="" />

网址在CSS中通常用于包含某些内容，例如添加背景图片

selector { background-image: url('the_image_link'); }

Answer 6

SRC （ S ou rc e） - 我想为自己加载此资源。

例如：

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF （ H ypertext REF erence） - 我想将此资源引用给其他人。

例如：

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

Courtesy

Answer 7

如果你正在谈论HTML4，它的list of attributes可能会帮助你解决这些微妙之处。它们不可互换。

Answer 8

从W3开始：

当A元素的href属性为 set，元素定义一个源锚定可能的链接由用户激活以检索网络资源。源锚是 A实例的位置和目标锚是Web 资源。

来源：http://www.w3.org/TR/html401/struct/links.html

此属性指定位置图像资源。示例广泛认可的图像格式包括GIF，JPEG和PNG。

来源：http://www.w3.org/TR/REC-html40/struct/objects.html

Answer 9

H REF ：对于当前页面的信息是 REF ，即页面样式的css信息或指向其他页面的链接。页面解析没有停止。

SRC ：是否需要将 SOURCE 添加/加载到页面中，如图片或javascript中所示。根据编码属性，页面分析可能会停止。这就是为什么最好在结束体标记之前添加脚本，以便不会阻止页面呈现。

Answer 10

完成HTML 5.1 ducumentation（2016年11月1日）之后：

第4部分（HTML的元素）

第2章（文件元数据）


第4节（链接元素）声明：


链接的目标由href属性提供，该属性必须存在且必须包含可能由空格包围的有效非空URL。如果缺少href属性，则元素不会定义链接。

不包含src属性...

巫婆是合乎逻辑的，因为它是一个链接。

第12章（脚本）


第1节（脚本元素）声明：


经典脚本可以嵌入内嵌，也可以使用src属性从外部文件导入，如果指定，则提供要使用的外部脚本资源的URL。如果指定了src，则它必须是可能被空格包围的有效非空URL。内联脚本元素或外部脚本资源的内容必须符合JavaScript规范的经典脚本脚本生成的要求。

它甚至没有提到href属性......

这表明使用脚本标签时始终使用src属性!!!

第7章（嵌入式内容）


第5节（img元素）


src和srcset属性提供的图像，以及父级是srcset元素的任何先前兄弟源元素的picture属性，是嵌入式内容。

也没有提及href属性......

这表明在使用img代码时，应使用src属性以及......

Reference link to the W3C Recommendation

Answer 11

它们不可互换 - 每个元素都定义在不同的元素上，如here所示。

他们确实有类似的含义，所以这是不一致的。我认为主要是由于不同供应商开始实施不同的标签，然后将其纳入规范，以避免破坏向后兼容性。

Answer 12

它们没有相似的含义。 'src'表示浏览器应该获取的资源作为当前页面的一部分。 HREF表示用户请求时要提取的资源。

Answer 13

一个简单的定义

SRC：如果资源可以放在body标签内（图片，脚本，iframe，框架）
HREF：如果资源不能放在body标签内，只能链接（对于html，css）

Answer 14

我同意这种区别的含义。但在css的情况下它看起来很奇怪。因为css也会被浏览器下载到客户端。它不像锚标记指向任何特定资源。所以使用href对我来说似乎很奇怪。即使它没有加载页面仍然没有那个页面看起来不完整，所以它不仅仅是关系，而是资源，而这又反过来引用了许多其他资源，如图像。

Answer 15

src用于将该资源添加到页面，而href用于链接到该页面中的特定资源。

当您在网页中使用时，浏览器会看到它是一个样式表，因此随着样式表在parellel中下载而继续进行页面呈现。

当您在网页中使用时，它会告诉浏览器在该位置插入资源。所以现在浏览器必须获取js文件然后加载它。在浏览器完成加载过程之前，页面呈现过程将停止。这就是YUI建议在网页最底部加载JS文件的原因。

SRC和HREF之间的区别

15 个答案:

一个简单的定义