SRC和HREF之间的区别

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的答案更合适.

是.src和href之间存在差异,它们不能互换使用.我们将src用于替换元素,而href则用于在引用文档和外部资源之间建立关系.

href(超文本引用)属性指定Web资源的位置,从而定义当前元素(在锚点的情况下a)或当前文档(在情况下link)与此属性定义的目标锚点或资源之间的链接或关系.当我们写:

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

浏览器了解此资源是样式表和 处理页面的解析不会暂停(渲染可能会暂停,因为浏览器需要样式规则来绘制和呈现页面).它与在标记内转储css文件的内容并不相似style.(因此建议使用link而不是@import将样式表附加到您的html文档.)

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

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

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

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

更新:请参阅@ John-Yin的答案,了解有关如何根据HTML 5规范实现它的更多信息.

Answer 2

在HTML 5出现之前,apnerve的答案是正确的,现在它有点复杂了.

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

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

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

有关详细信息,请参阅HTML 5推荐

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

Answer 3

我认为<src>为页面添加了一些资源,<href>仅用于提供资源的链接(不将资源本身添加到页面).

Answer 4

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

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

Answer 5

简单定义

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

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

Answer 6

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

礼貌