引用URL的标签属性href与src的区别是什么？

---

前言

前端开发面试HTML篇——引用URL的标签属性href与src的区别是什么？

---

一、href、src是什么？

1、href

href属性

href指的是超文本引用，它的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。

而a标签中的href属性是用于指定超链接目标的URL，如果一个a标签里的href没有被指定链接，那么a标签就不是一个链接了。
语法：

<a href="URL">

其中URL表示超链接的URL，它有以下三种值：

• 绝对URL：指链接地址指向另一个站点，例：href=“http://www.php.cn/”
• 相对URL：指向站点内某个文件，例：href=“/course/list/1.html”
• 锚URL：指向页面中的锚，例：href=“#top”

href的常见用法

• href="#“的使用
  　　a标签中href=”#"表示回到最顶部，如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部

<span style="font-size:14px;"><a href="#">回到最顶端</a></span>

• href="javascript:void(0);"用法
  　这是网站最常用的方法，完整代码如下所示。其中onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined表示地址不发生跳转

<a href="javascript:void(0);"onclick="js_method()">

• ahref="javascript:;"用法
  该方法与上述方法类似，姿势此方法中执行了一条空的js代码

<a href="javascript:;"onclick="js_method()">

2、src

src是source的缩写，资源的意思，在html中src表示资源地址，是js文件和图片文件的引入方式

• img
  可能的值：

  • 绝对URL-指向其他站点（比如src=“https://www.php.cn”）

  • 相对URL-指向站点内的文件（比如src=“/i/image.gif”）
    img标签介绍：

  img 元素向网页中嵌入一幅图像。

  请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。

  标签有两个必需的属性：src 属性 和 alt 属性。

  必需的属性

  alt：text，规定图像的替代文本。

  src：URL，规定显示图像的 URL。

• script
  js文件引入代码

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

二、区别

• href
  表示超文本引用，指向网络资源的所在位置，用来建立当前文档和引用资源的联系
  浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理，这也是在文档中不使用@import的原因

  <link href="./style.css" rel="stylesheet" />
  
  <a href="https://xdclass.net" />
  

• src
  引用资源（js脚本、图片），将目标资源下载应用到当前文档

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

  当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕，这也是js脚本放到底部的原因

---

总结

src用于引入文件，href用于在当前文档和引用资源之间建立联系。