html src属性详解

乔二参

已于 2024-06-06 12:11:04 修改

阅读量1.2k

点赞数 4

分类专栏： HTML 文章标签： html 前端

于 2024-06-06 12:10:51 首次发布

本文链接：https://blog.csdn.net/2302_79483741/article/details/139496740

版权

HTML 专栏收录该内容

34 篇文章

订阅专栏

在HTML中，src 属性通常用于指定外部资源的URL，这些资源可以是图像、视频、音频、脚本等。以下是几个常见的使用 src 属性的元素及其用途的详细解释：

<img> 元素：
<img> 元素用于在HTML文档中嵌入图像。src 属性指定图像的URL。
```
<img src="image.jpg" alt="An image description">
```
如果图像无法加载（例如，文件不存在或URL无效），则会显示 alt 属性中提供的替代文本。
<script> 元素：
<script> 元素用于嵌入或引用JavaScript代码。当 src 属性被使用时，它指向一个包含JavaScript代码的外部文件。
```
<script src="script.js"></script>
```
在这种情况下，<script> 和 </script> 标签之间的任何内容都会被忽略，因为JavaScript代码是从外部文件中加载的。
<link> 元素：
<link> 元素通常用于链接到外部资源，如CSS样式表。在 <head> 部分中，它使用 rel（关系）和 href（超文本引用）属性来指定关系类型和外部文件的URL。但是，需要注意的是 <link> 元素并没有直接使用 src 属性，而是使用 href 属性。
```
<link rel="stylesheet" href="styles.css">
```
然而，在SVG中，<link> 元素可能使用 xlink:href 或 href 属性来指定链接的目标。
<audio> 和 <video> 元素：
<audio> 和 <video> 元素分别用于嵌入音频和视频内容。src 属性指定音频或视频文件的URL。
```
<audio src="audiofile.mp3" controls></audio>
<video src="movie.mp4" controls></video>
```
controls 属性为音频和视频播放器添加了播放、暂停和音量控制。
<source> 元素：
<source> 元素经常与 <audio> 和 <video> 元素一起使用，以指定多个媒体资源，以便浏览器可以选择最兼容的一个。在这种情况下，<source> 元素使用 src 属性来指定媒体文件的URL，并使用 type 属性来指定媒体文件的MIME类型。
```
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
```
如果浏览器不支持第一个 <source> 元素中指定的媒体格式，它会尝试加载下一个 <source> 元素中指定的媒体文件。
<embed> 元素：
<embed> 元素是HTML的过时元素，但它仍在某些上下文中使用，特别是在嵌入外部应用程序或交互式内容（如Flash）时。src 属性指定要嵌入的内容的URL。然而，现代开发实践倾向于避免使用 <embed>，而是使用更具体和更现代的元素和API。