HTML元素属性href和src的区别

 1.英文原意

href的英文原意是:Hypertext Reference

Hypertext:超文本      Reference:引用或参照

scr的英文原意是:Source

Source:资源

2.常见使用元素

        使用href属性常见的元素有:link 和 a

        使用src属性的常见元素有:img、style、script、input、iframe等

3.a和img元素的使用

       从效果上来看,img中src引用的图片会直接显示在页面上,而a标签中引用的图片只要点击一下a标签才会跳转到该图片。这就说明了:

        href是超链接,它会建立一个通道,这个通道联系着其他资源,需要使用这个资源的时候就会通过这个通道进行引用了。

        src引用的图片直接成为了当前文档的一部分。实际上,在浏览器解析过程中遇到了src引用的资源之后,会暂停解析并等待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、付费专栏及课程。

余额充值