SRC和href的区别

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

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

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

  • 引用CSS文件：在链接标签内href="cssfile.css"。
  • 引用JS文件：在script标签中src="myscript.js"。
  • 引用图像文件：在图像标记内src="mypic.jpg"。
  • 引用另一个网页：在锚标记内href="http://www.webpage.com"。
149481 次浏览
小开

如果你说的是HTML4，它的属性列表可能会对你的微妙之处有所帮助。它们不能互换。

小开

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

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

小开

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

小开

它们没有相似的意思。“ SRC ”表示浏览器应作为当前页面的一部分获取的资源。HREF表示用户请求时要获取的资源。

小开

从W3开始：

当a元素的href属性为 设置，元素定义了一个源。 用于链接的锚，该链接可以 由用户激活以检索 网络资源。源定位点是 实例的位置和 目标锚点是Web 资源.

来源：_农行_0

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

来源：_农行_0

小开
最佳答案

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

是的。船级社和Href之间存在差异，它们不能互换使用。我们将船级社用于已替换元素，而将Href用于建立引用文档和外部资源之间的关系。

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

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

浏览器知道该资源是一个样式表，并且加工页面解析不暂停（呈现可能会暂停，因为浏览器需要样式规则来绘制和呈现页面）。它是不，类似于将CSS文件的内容转储到style标记中。（因此，建议使用link而不是@import将样式表附加到HTML文档。）

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

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

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

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

更新：请参阅@John-Yin的回答，了解有关如何按照HTML5规范实现它的更多信息。

小开

我同意Apnerve所说的区别。但在CSS的情况下，它看起来很奇怪。因为CSS也可以通过浏览器下载到客户端。它不像锚点标签那样指向任何特定的资源。所以在那里使用href对我来说似乎很奇怪。即使它没有加载页面，没有该页面也不能看起来完整，所以它不仅仅是关系，而是像资源一样，反过来又指许多其他资源，如图像。

小开

简单定义

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


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

你应该记住什么时候使用每个人，就是这样。
Href与线路一起使用 

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

船级社用于脚本和图像

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

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

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

在HTML5出现之前，Apnerve的答案是正确的，现在它变得有点复杂了。

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

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

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

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

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

小开

简单的定义

  • SRC：如果资源可以放置在body标签内（对于image，script，iframe，frame）
  • Href：如果资源不能放在body标签内，只能链接（对于HTML，CSS）
小开

H参见：是参见与当前页的信息相关IE页面样式的CSS信息或到另一个页面的链接。页分析未停止。

船级社：是要添加/加载到图像或JavaScript页面中的RE来源。根据编码属性，页面解析可能会停止。这就是为什么最好在结束主体标记之前添加脚本，这样页面呈现就不会受到阻碍。

小开

船级社（SOURCE）--我想为自己加载此资源。

例如：

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


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

Href（Hypertext参见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">

礼貌

小开

SRC用于将该资源添加到页面，而href用于从该页面链接到特定资源。

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

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

小开

浏览HTML 5.1文档后（2016年11月1日）：

第4部分（HTML的元素）

第2章（文档元数据）

第4节（链接元素）规定：

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

不包含src属性.。

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

第12章（脚本）

第1节（脚本元素）规定：

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

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

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

第7章（嵌入内容）

第5节（IMG元素）

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

也没有提到href属性..

这表明，当使用img标记时，还应使用src属性。

W3C推荐标准的参考链接


提交答案