src和href的区别

在HTML中，src（source的简写）和href（Hypertext
Reference的简写）都是属性，但它们用于不同的目的和元素，并且有不同的行为。

src属性

src属性用于指定要嵌入到当前文档中的外部资源的位置。当浏览器遇到src属性时，它会立即下载该资源，并将其包含在文档中。这通常用在希望将资源内容直接嵌入到页面中的情况，例如：

• <img src="path/to/image.jpg">：img元素使用src属性来指向图片的位置，以便将图片显示在页面上。
• <script src="path/to/script.js"></script>：script元素使用src属性来引入JavaScript文件。
• <iframe src="https://www.example.com"></iframe>：iframe元素使用src属性来指定内嵌网页的位置。
• <video src="path/to/video.mp4"></video>：video元素使用src属性来指向视频文件的位置。

使用src属性时，浏览器会将其视为页面内容的一部分，并且资源的加载会影响到页面的加载时间。

href属性

href属性用于指定一个超链接的目标URL，它在a元素（锚元素）中最为常见，用于创建指向其他页面或页面内部某部分、文件、电子邮件地址等的链接。当用户点击这样的链接时，浏览器会导航到href属性指定的位置，例如：

• <a href="https://www.example.com">Visit Example.com</a>：a元素使用href属性来创建指向另一个页面的链接。
• <link href="path/to/style.css" rel="stylesheet">：link元素使用href属性来关联样式表文件。

使用href属性时，资源并不会立即下载或显示在当前页面中；相反，它提供了一个引用，用户可以选择是否跟随（例如，通过点击链接）。

主要区别

• 加载行为：src属性用于嵌入资源，导致浏览器直接下载并处理该资源。href属性用于指定网络资源的位置，通常是在用户进行某些操作（如点击链接）后才会使用。
• 用途：src用于img、script、iframe和video等标签，以便直接将内容嵌入页面中。href用于a和link等标签，用于创建到其他资源的引用并在必要时访问它们。
• 影响：src属性的资源是页面内容的一部分，对页面加载时间有直接影响。href属性通常用于创建指向其他资源的链接，它们不会直接影响到当前页面的加载。

总结起来，src用于嵌入内容，而href用于在资源之间建立关系和引用。