href和src

href和src介绍

href

1.用途: href 用于定义超文本引用，

• 最常见于 <a>标签中，用来指定链接的目标地址
• 还用于 <link> 标签中，以引入外部的CSS文件或者其他资源的链接，如favicon图标

2.行为: 浏览器会并行加载 href 指向的资源，并且不会阻塞页面的渲染。对于 <a> 标签，点击链接 时浏览器会导航到 href 指定的URL

<a href="https://blog.csdn.net">示例</a>
<link rel="stylesheet" href="layout.css"/>

src

1.用途: src 用于指定资源的来源，告诉浏览器从哪里加载资源。

• 它常用于 <img>、<script>、<iframe> 等标签中，加载图片、脚本、嵌入式框架等内容。

2.行为: 当浏览器遇到带有 src 属性的标签时，它会暂停页面渲染，加载资源，然后继续渲染页面。这意味着 src 加载的资源是页面渲染的一部分，会阻塞页面的渲染过程直到资源加载完成。

<img src="logo.jpg" alt="示例图片"/>
<script src="example.js"></script>

总结

• 加载时机与页面渲染: src 加载的资源是页面内容的一部分，因此会阻塞页面渲染直到资源加载完毕；而 href 引用的资源（特别是CSS和非当前页链接）不会阻塞页面渲染。
• 应用场景: href 用于创建链接和引入外部样式表等，src 用于嵌入图片、脚本等页面直接展示或执行的内容。
• 理解: src意味着“这是这个元素的内容源头”，而 href 表示“这是这个链接指向的地方”。