Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第60天 src、href、link的区别是什么？ #250

Open
haizhilin2013 opened this issue Jun 14, 2019 · 6 comments
Open

[html] 第60天 src、href、link的区别是什么？ #250

haizhilin2013 opened this issue Jun 14, 2019 · 6 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第60天 src、href、link的区别是什么？
@haizhilin2013 haizhilin2013 added the html html label Jun 14, 2019
@rocky-191
Copy link

使用的地方不同，src一般用于表示图片源，js源。 。href一般在标签中使用，表示跳转地址。link一般用于引入css。

@censek
Copy link

censek commented Nov 29, 2019

https://www.cnblogs.com/bbcfive/p/10065035.html

@haizhilin2013
Copy link
Collaborator Author

https://www.cnblogs.com/bbcfive/p/10065035.html

不建议直接放链接，建议用自己的话来总结出来

@kruzabc
Copy link

kruzabc commented Jan 6, 2020

根据MDN，在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
可以被当做可替换元素有：
video, img
特定情况下可以被当做可替换元素的有：
audio, canvas, input
很多替换元素有src属性, 属性值就是用于替换的资源的地址。

而href表示的是建立和资源的联系。
像link 和 a

可以用这样一句话来概括：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

@chenshijin1
Copy link

谈谈src和href的区别

src和href都是用于外部资源的引入， src一般引入js文件， 图片文件，href一般链接css资源文件，网页资源文件。这里给出几个使用得例子：

  • 引用js文件时：src="myscript.js"
  • 引用图片：src="mypic.jpg"
  • 引用css文件时：href="cssfile.css"
  • 网站链接：href="http://www.webpage.com"

它们之间的主要区别可以用这样一句话来概括：

src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

例如：

<a href="www.xxx.com">
	<img src="1.jpg">
</a>

a 标签里面的内容是一张图片，a标签加上href属性将图片链接到了www.xxx.com这个网站，但并未替换a标签里面的内容。

而img标签的src属性则是将这个标签完全替换成了src里面的资源。

href (Hypertext Reference) 超文本引用

href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系。例如当我们写：

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

浏览器知道这是个样式表文件，html页面的解析和渲染不会暂停，css文件的加载是同时进行的，用@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。所以我们建议使用link而不是@import。

src (Source)源

这个属性是将资源嵌入到当前文档中元素所在的位置。例如当我们写：

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

当浏览器解析到这句代码时，html页面的加载和解析都会暂停，直到浏览器加载、编译、执行完毕js文件。这就像是把js文件里的内容全部注入到这个script标签中，类似于img，img标签是一个空标签，它的内容就是由src这个属性定义，浏览器会暂停加载直到这个图片加载完成，iframe标签也有这样这样得特性。

这也是为什么要将js文件的加载放在body最后的原因（ 在<body>前面 ）。

参考：https://stackoverflow.com/questions/3395359/difference-between-src-and-href

@MrZ2019
Copy link

MrZ2019 commented Dec 25, 2020

使用的地方不同，src一般用于表示图片源，js源。 。href一般在标签中使用，表示跳转地址。link一般用于引入css。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@MrZ2019 @haizhilin2013 @rocky-191 @chenshijin1 @kruzabc @censek