html中src/href区别

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

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 属性用于创建指向资源的链接，通常通过点击来访问。