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 表示“这是这个链接指向的地方”。