src和href的区别

来源:http://blog.youkuaiyun.com/dyllove98/article/details/8971939

src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

 

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。


### HTML 中 `src` `href` 的区别及用法场景 #### 1. 定义与作用 - **`src` 属性**:用于指定外部资源的路径,其内容会被嵌入到当前文档中。它主要用于加载图片、脚本、框架等资源[^2]。 - **`href` 属性**:用于指定超链接的目标地址或引入外部样式表。它通常用于创建页面间的导航或引入样式文件[^4]。 #### 2. 使用场景 - **`src` 的使用场景**: - 加载图片:`<img src="image.jpg" alt="Description">` - 引入脚本:`<script src="script.js"></script>`[^2] - 嵌入框架:`<iframe src="page.html"></iframe>` - **`href` 的使用场景**: - 创建超链接:`<a href="https://example.com">Visit Example</a>` - 引入样式表:`<link rel="stylesheet" href="styles.css">` #### 3. 行为差异 - **`src` 的行为**:当浏览器解析到带有 `src` 属性的标签时,会立即加载该资源并将其嵌入到文档中。例如,`<img>` 标签会显示指定的图片,而 `<script>` 标签会执行指定的脚本文件[^2]。 - **`href` 的行为**:`href` 属性定义了点击链接后跳转的目标地址,或者用于引入外部资源(如 CSS 文件)。它不会自动加载资源,而是等待用户交互或特定条件触发[^4]。 #### 4. 兼容性与限制 - **`src` 的限制**:`src` 属性只能用于某些特定的 HTML 标签,如 `<img>`、`<audio>`、`<video>` 等[^1]。 - **`href` 的灵活性**:`href` 属性可以用于任何具有可点击性的元素,例如 `<a>` 标签或 `<link>` 标签[^1]。 #### 5. 示例代码 以下是一些常见的 `src` `href` 使用示例: ```html <!-- 使用 src 属性 --> <img src="logo.png" alt="Logo"> <script src="app.js"></script> <iframe src="content.html"></iframe> <!-- 使用 href 属性 --> <a href="https://example.com">Visit Example</a> <link rel="stylesheet" href="styles.css"> ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值