html中src/href区别

在HTML中,srchref 是两个常见的属性,它们用于指定资源的位置,但用途和上下文有所不同。以下是它们的主要区别:

src 属性

了解这些区别可以帮助你更准确地使用HTML元素,从而创建更加有效和丰富的网页内容。

  1. 用途src 属性主要用于指定嵌入到文档中的资源的路径。这些资源通常是直接嵌入到页面中,并作为页面的一部分展示或运行。

  2. 常见元素

    • <img>:用于嵌入图像。
    • <script>:用于嵌入JavaScript代码。
    • <iframe>:用于嵌入另一个HTML页面。
    • <video><audio>:用于嵌入视频和音频文件。
    • <source>:用于指定多个媒体资源,供 <video><audio> 元素选择。
  3. 示例

    复制代码
    <img src="image.jpg" alt="Example Image">  
    <script src="script.js"></script>  
    <iframe src="another-page.html"></iframe>  
    <video controls>  
        <source src="movie.mp4" type="video/mp4">  
        Your browser does not support the video tag.  
    </video>

    href 属性

  4. 用途href 属性主要用于指定链接资源的路径。这些资源通常是通过点击或导航动作访问的,而不是直接嵌入到页面中。

  5. 常见元素

    • <a>:用于创建超链接,指向其他网页或资源。
    • <link>:用于链接外部资源,如CSS样式表。
    • <base>:用于指定文档中所有相对URL的基本URL。
  6. 示例

    复制代码
    <a href="https://www.example.com">Visit Example</a>  
    <link rel="stylesheet" href="styles.css">  
    <base href="https://www.example.com/">
  7. src 属性用于直接嵌入资源,使其成为页面的一部分。

  8. href 属性用于创建指向资源的链接,通常通过点击来访问。

相关推荐
Asort2 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney20 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥22 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare23 分钟前
选择文件夹路径
前端
艾小码24 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月25 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁28 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅28 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸30 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端