href和src的区别

href和src都是用来引用外部资源的属性。例如:网址、图片、视频、css文件、js文件等。

href(Hypertext Reference)超文本引用,用来建立当前元素和文档之间的连接。常用有link、a标签等。当它引用资源时,浏览器会将其识别为CSS文档,并行下载资源并且不会停止对当前文档的处理。

src(Source)会将指向的资源下载并引用到当前的文档中,常用标签有script、img、ifram等。它会替换掉当前的元素。当浏览器解析src时,会暂停其他资源的下载和处理,直接将该资源下载、编译、执行完毕。

 href会建立一个关联指向资源,而src则是将资源嵌入当前文档中,如下面代码图。

 

### HTML 中 `href` `src` 属性的区别及用法 #### 定义与功能 `href` 是 HyperText REFerence(超文本引用)的缩写,主要用于指定链接的目标地址。它通常用于 `<a>` 标签 `<link>` 标签中,表示文档之间的关系[^1]。 `src` 则代表 Source(源),用来定义嵌入资源的位置,比如图片、脚本文件或 iframe 的内容。它是针对需要被浏览器解析并显示的内容而设计的[^2]。 #### 加载方式 当使用 `href` 时,所指向的资源通常是辅助性的或者导航性质的,因此其加载过程不会阻止页面其他部分的渲染。例如 CSS 文件通过 `<link>` 标签引入时采用的是非阻塞性加载机制[^4]。 相比之下,`src` 所指代的对象往往是页面结构的重要组成部分之一,像 JavaScript 脚本或图像这样的元素如果未能成功加载,则可能直接影响用户体验甚至整个网页的功能实现。这类资源默认情况下会按照顺序依次下载,并且可能会造成一定程度上的阻塞效应直到完成当前项之前无法继续处理后续操作[^3]。 #### 使用场景举例 以下是两个属性具体应用的一些例子: 对于创建超链接以及连接样式表来说: ```html <!-- 创建一个跳转到另一个页面的链接 --> <a href="https://example.com">访问 Example</a> <!-- 将外部 CSS 应用于当前 HTML 文档 --> <link rel="stylesheet" href="styles.css"> ``` 而对于插入多媒体文件则需要用到 src 属性: ```html <!-- 显示一张网络上的图片 --> <img src="image.jpg" alt="描述文字"> <!-- 嵌套一段来自远程服务器端执行后的代码片段 --> <iframe src="https://www.example.org"></iframe> ``` 综上所述,在实际编码过程中需根据需求合理选用合适的标记来达到预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值