SRC和HREF之间的区别

在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"在锚标记内。

注意：考虑到规格的更改，@ 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文件的原因

更新：有关根据HTML 5规范如何实现的更多信息，请参见@ John-Yin的答案。

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

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

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

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

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

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

我认为<src>在页面上添加了一些资源，<href>仅用于提供到资源的链接（无需在页面上添加资源本身）。

简单定义

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

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

SRC（小号 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">

礼貌

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

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

如果您使用的是HTML4，则其属性列表可能会帮助您改善细节。它们不可互换。

从W3：

设置A元素的href属性后，该元素将为链接定义源锚，该链接可由用户激活以检索Web资源。源锚是A实例的位置，目标锚是Web资源。

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

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

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

一个简单的定义

• SRC：如果可以将资源放置在body标签内（用于图像，脚本，iframe，框架）
• HREF：如果无法将资源放置在body标签内，而只能进行链接（对于html，css）

你应该记住，当使用每一个人，这是它
的HREF使用的链接

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

该SRC使用具有脚本和图像

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

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

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

在完成HTML 5.1文档编制（2016年11月1日）之后：

第4部分（HTML的元素）

第2章（文档元数据）

第4节（链接元素）指出：

链接的目的地由href属性指定，该属性必须存在并且必须包含有效的非空URL，该URL可能用空格包围。如果该href属性不存在，则该元素未定义链接。

不包含src属性...

女巫是逻辑的，因为它是一个联系。

第十二章（脚本）

第1节（脚本元素）指出：

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

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

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

第7章（嵌入式内容）

第5节（img元素）

由src和srcset属性给出的图像以及任何先前的同级源元素的srcset属性（如果父picture元素是元素）则是嵌入内容。

也没有提到href属性...

这表明在使用img标签时src也应使用该属性...

W3C建议书的参考链接

它们是不可互换-每次在不同的元素来定义，可以看出这里。

它们确实具有相似的含义，因此这是不一致的。我想主要是由于不同供应商开始实施的标签不同，然后将其包含在规范中，以避免破坏向后兼容性。

它们没有相似的含义。“ src”表示浏览器应在当前页面中获取的资源。如果用户请求，则HREF指示要获取的资源。

我同意apnerve关于区别的说法。但是在css的情况下，它看起来很奇怪。由于CSS也可以通过浏览器下载到客户端。它不像指向任何特定资源的锚标记。所以使用href对我来说似乎很奇怪。即使没有加载该页面，即使没有该页面也无法看起来完整，因此它不仅是关系，而且是资源，而资源又引用了许多其他资源，例如图像。

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

当您在网页中使用时，浏览器会看到它是一个样式表，因此当样式表以并行方式下载时，浏览器会继续进行页面渲染。

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