Html SRC和HREF的区别

Difference between SRC and HREF

提问by Vijey

The SRCand HREFattributes are used to include some external entities like an image, a CSS file, a HTML file, any other web page or a JavaScript file.

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

Is there a clear differentiation between SRCand HREF? Where or when to use SRCor HREF? I think they can't be used interchangeably.

有没有明确区分SRC和HREF？在哪里或何时使用SRC或HREF？我认为它们不能互换使用。

I'm giving below few examples where these attributes are used:

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

• To refer a CSS file: href="cssfile.css"inside the link tag.
• To refer a JS file: src="myscript.js"inside the script tag.
• To refer an image file: src="mypic.jpg"inside an image tag.
• To refer another webpage: href="http://www.webpage.com"inside an anchor tag.

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

回答by apnerve

NOTE:@John-Yin's answeris more appropriate considering the changes in the specs.

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

---

---

Yes. There is a differentiation between srcand hrefand they can't be used interchangeably. We use srcfor replacedelements while hreffor establishing a relationship between the referencing document and an external resource.

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

href(Hypertext Reference) attribute specifies the location of a Web resource thus defining a link or relationship between the current element (in case of anchor a) or current document (in case of link) and the destination anchor or resource defined by this attribute. When we write:

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

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

The browser understands that this resource is a stylesheet and the processingparsing of the page is notpaused (rendering might be paused since the browser needs the style rules to paint and render the page). It is notsimilar to dumping the contents of the css file inside the styletag. (Hence it is advisable to use linkrather than @importfor attaching stylesheets to your html document.)

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

src(Source) attribute just embeds the resource in the current document at the location of the element's definition. For eg. When the browser finds

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

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

The loading and processing of the page is paused until this the browser fetches, compiles and executes the file. It is similar to dumping the contents of the js file inside the scripttag. Similar is the case with imgtag. It is an empty tag and the content, that should come inside it, is defined by the srcattribute. The browser pauses the loading until it fetches and loads the image. [so is the case with iframe]

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

This is the reason why it is advisable to load all JavaScript files at the bottom (before the </body>tag)

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

---

---

update: Refer @John-Yin's answerfor more info on how it is implemented as per HTML 5 specs.

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

回答by John Yin

apnerve's answer was correct before HTML 5 came out, now it's a little more complicated.

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

For example, the scriptelement, according to the HTML 5specification, has two global attributes which change how the srcattribute functions: asyncand defer. These change how the script (embedded inline or imported from external file) should be executed.

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

This means there are three possible modes that can be selected using these attributes:

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

1. When the asyncattribute is present, then the script will be executed asynchronously, as soon as it is available.
2. When the asyncattribute is not present but the deferattribute is present, then the script is executed when the page has finished parsing.
3. When neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

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

For details please see HTML 5 recommendation

详情请看HTML 5 推荐

I just wanted to update with a new answer for whoever occasionally visits this topic. Some of the answers should be checked and archived by stackoverflow and every one of us.

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

回答by Zaki

I think <src>adds some resources to the page and <href>is just for providing a link to a resource(without adding the resource itself to the page).

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

回答by Joberror

Simple Definition

简单定义

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

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

回答by Premraj

SRC(Source) -- I want to load up this resource for myself.

SRC（小号OU RCE） -我想加载此资源为我自己。

For example:

例如：

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 REFerence) -- I want to refer to this resource for someone else.

HREF( Hypertext REFerence ) -- 我想为其他人参考这个资源。

For example:

例如：

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

礼貌

回答by user3338350

HREF: Is a REFerence to information for the current page ie css info for the page style or link to another page.Page Parsing is not stopped.

H REF：是对当前页面信息的REFerence，即页面样式的 css 信息或到另一个页面的链接。页面解析不会停止。

SRC: Is a reSOURCEto be added/loaded to the page as in images or javascript. Page Parsing may stop depending on the coded attribute. That is why it's better to add script just before the ending body tag so that page rendering is not held up.

SRC：是重新SOURCE添加/加载到页面中的图像或JavaScript。根据 coded 属性，页面解析可能会停止。这就是为什么最好在结束 body 标记之前添加脚本，这样页面渲染就不会被阻止。

回答by Sarfraz

From W3:

从 W3：

When the A element's href attribute is set, the element defines a source anchor for a link that may be activated by the user to retrieve a Web resource. The source anchor is the location of the A instance and the destination anchor is the Web resource.

当 A 元素的 href 属性被设置时，该元素定义一个链接的源锚点，用户可以激活该链接来检索 Web 资源。源锚是 A 实例的位置，目的锚是 Web 资源。

Source: http://www.w3.org/TR/html401/struct/links.html

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

This attribute specifies the location of the image resource. Examples of widely recognized image formats include GIF, JPEG, and PNG.

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

Source: http://www.w3.org/TR/REC-html40/struct/objects.html

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

回答by kums

A simple definition

一个简单的定义

• SRC: If a resource can be placed inside the body tag (for image, script, iframe, frame)
• HREF: If a resource cannot be placed inside the body tag and can only be linked (for html, css)

• SRC：如果一个资源可以放在body标签里面（对于图片、脚本、iframe、frame）
• HREF：如果一个资源不能放在body标签里面，只能链接（对于html，css）

回答by Gal Ratzkin

after going through the HTML 5.1 ducumentation (1 November 2016):

通过 HTML 5.1 文件（2016 年 11 月 1 日）后：

---

---

part 4 (The elements of HTML)

第 4 部分（HTML 的元素）

chapter 2 (Document metadata)

section 4 (The link element) states that:

The destination of the link(s) is given by the hrefattribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If the hrefattribute is absent, then the element does not define a link.

第 2 章（文档元数据）

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

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

does not contain the srcattribute ...

不包含src属性...

witch is logical because it is a link .

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

---

---

chapter 12 (Scripting)

section 1 (The script element) states that:

Classic scripts may either be embedded inline or may be imported from an external file using the srcattribute, which if specified gives the URL of the external script resource to use. If srcis specified, it must be a valid non-empty URL potentially surrounded by spaces. The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification's Script production for classic scripts.

第 12 章（脚本编写）

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

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

it doesn't even mention the hrefattribute ...

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

this indicates that while using script tags always use the srcattribute !!!

这表明在使用脚本标签时总是使用该src属性！！！

---

---

chapter 7 (Embedded content)

section 5 (The img element)

The image given by the srcand srcsetattributes, and any previous sibling source element's srcsetattributes if the parent is a pictureelement, is the embedded content.

第 7 章（嵌入内容）

第 5 节（img 元素）

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

also doesn't mention the hrefattribute ...

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

this indicates that when using imgtags the srcattribute should be used aswell ...

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

---

---

Reference link to the W3C Recommendation

W3C 建议的参考链接

回答by webNeat

You should remember when to use everyone and that is it
the hrefis used with links

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

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

the srcis used with scripts and images

该SRC使用具有脚本和图像

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

the urlis used generally in CSS to include something, for exemple to add a background image

该URL通常用于在CSS中包含的东西，对于为例添加背景图片

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