面试题: src 和 href 有什么区别?

src 和 href 是两个在HTML中用于引入外部资源的属性，它们之间有以下区别：

1. src 属性：

• 用途： src 属性用于指定外部资源的地址，例如图片、脚本等。它主要用于嵌入其他资源，如图像、音频、视频、JavaScript 文件等。

• 特点： 当浏览器解析到带有 src 属性的标签时，它会立即加载并执行该资源。在加载 JavaScript 文件时，页面通常会等待 JavaScript 文件下载和执行完成，这可能导致页面加载阻塞。

• 常见用法：
  • <script src="script.js"></script>：引入外部 JavaScript 文件。
  • <img src="image.jpg" alt="Description">：引入图片。

2. href 属性：

• 用途： href 属性用于指定超链接的地址，通常用于引入样式表（CSS 文件）。它主要用于建立当前文档与被链接文档之间的关系。

• 特点： 当浏览器解析到带有 href 属性的标签时，它会加载该资源，但不会立即执行。它用于创建超链接，也用于引入外部样式表（CSS 文件）。

• 常见用法：
  • <link rel="stylesheet" href="styles.css">：引入外部 CSS 样式表。
  • <a href="https://example.com">Example Website</a>：创建超链接。

主要区别总结：

• 用途不同： src 用于嵌入其他资源，href 用于建立文档之间的关系或引入外部样式表。

• 加载时机不同： src 在加载时立即执行，href 在加载时不会立即执行，除非它用于引入样式表。

• 用于元素类型不同： src 主要用于 <script>, <img>, <audio>, <video> 等元素，href 主要用于 <link>, <a>, <area> 等元素。

了解 src 和 href 属性的区别是前端开发中的基本知识，对于面试来说，这个问题通常用来考察面试者对HTML标签的理解程度。 推荐你学习 HTML入门课程(含HTML5)学习更多HTML知识。