html图片、视频音频和超链接标签小结

Web应用课 html图片、视频音频和超链接标签小结

<img>图片标签

<img> 元素是HTML中的一个空元素，用于在网页中插入图像（Image）。

<img> 元素用于在网页中展示图像，它是一个自闭合标签，没有结束标签。通过指定图像的URL（src属性），可以将图像嵌入到HTML文档中。

示例：

<img src="path/to/image.jpg" alt="Description of the image">

在上述示例中，<img> 元素的 src 属性指定了图像文件的URL，alt 属性给出了图像的描述或替代文本。如果图像无法加载或者被屏幕阅读器读取时，替代文本将显示给用户。

注意，为了确保网页的可访问性，应该始终为 <img> 元素提供一个有意义的替代文本（通过 alt 属性），这样即使图像无法加载或者被某些用户无法看到，也能够传达图像的信息。

总结来说，<img> 元素用于在HTML文档中插入图像。它是一个自闭合标签，通过 src 属性指定图像的URL，通过 alt 属性提供图像的替代文本。

<img> 支持的格式：

出现图像加载错误问题

如果在加载或渲染图像时发生错误，且设置了至少一个 onerror 事件处理器来处理 error 事件，那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下，包括：

• src 属性的属性值为空（""）或者 null。
• src 属性的 URL 和用户正在浏览的页面的 URL 完全相同
• 图像出于某些原因损坏了，从而无法加载。
• 图像的元数据被破坏了，无法检索它的分辨率/宽高，而且在 <img> 元素的属性中没有指定宽度/高度。
• 用户代理尚未支持该图片所用的格式。

一些其他属性

除了 src 和 alt 属性，<img> 标签还支持其他一些属性，这些属性可以用于控制图像的显示和行为。以下是一些常用的 <img> 标签属性：

• width 和 height：用于指定图像的宽度和高度，以像素为单位。示例：

<img src="image.jpg" width="300" height="200" alt="Image">

• title：指定图像的标题，当用户将鼠标悬停在图像上时显示。示例：

<img src="image.jpg" alt="Image" title="This is an image">

• loading：指定图像的加载方式。可以设置为 "eager"（立即加载）、"lazy"（延迟加载）或 "auto"（由浏览器自动决定，默认值）。示例：

<img src="image.jpg" alt="Image" loading="lazy">

• decoding：指定图像的解码方式。可以设置为 "sync"（同步解码）或 "async"（异步解码，默认值）。示例：

<img src="image.jpg" alt="Image" decoding="async">

• sizes 和 srcset：用于响应式图像的显示。sizes 属性指定图像在不同视口尺寸下的显示尺寸，srcset 属性指定不同分辨率或大小的图像源。示例：

<img src="image.jpg" alt="Image" sizes="(max-width: 600px) 100vw, 50vw" srcset="image.jpg 800w, image-2x.jpg 1600w">

• usemap：定义一个图像映射（image map），用于将图像的某个区域映射到链接或其他操作。示例：

<img src="image.jpg" alt="Image" usemap="#map">

然后在文档中定义 <map> 元素来创建映射。

这些是 <img> 标签的一些常见属性，它们可以根据需要进行使用，以实现更精确的图像控制和交互。

<audio><video>视频音频标签

<audio>标签

<audio> 元素是 HTML 中用于嵌入音频内容的标签。它允许在网页中播放音频文件，提供了一种直接的方式来添加音频内容和控制音频播放。

以下是一个简单的 <audio> 元素的示例：

<audio src="audio.mp3" controls></audio>

在上述示例中，<audio> 元素通过 src 属性指定了音频文件的 URL，这里是 “audio.mp3”。controls 属性用于显示音频播放器的控制面板，允许用户控制音频的播放、暂停、音量等。

<audio> 元素还支持其他一些属性和标签，用于更精确地控制音频的播放和外观，例如：

• autoplay：指定音频在加载完成后自动开始播放。示例：<audio src="audio.mp3" autoplay></audio>

• loop：指定音频循环播放。示例：<audio src="audio.mp3" loop></audio>

• preload：指定音频在页面加载时是否预加载。可以设置为 "auto"（默认值，自动预加载）、"metadata"（仅预加载音频元数据）或 "none"（不预加载）。示例：<audio src="audio.mp3" preload="auto"></audio>

• controls：显示音频播放器的控制面板。示例：<audio src="audio.mp3" controls></audio>

• <source>：用于指定多个音频源，以支持不同的音频格式和浏览器兼容性。示例：

  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
  </audio>

在上述示例中，使用了两个 <source> 元素，分别指定了不同的音频源和 MIME 类型。如果浏览器支持其中一个格式，就会播放相应的音频文件。如果都不支持，将显示 “Your browser does not support the audio tag.”。

这些是 <audio> 元素的一些常用属性和相关标签，用于控制音频的播放和行为。通过使用这些属性和标签，你可以实现更多定制化的音频播放器和交互效果。

需要注意的是，为了确保可访问性，应该为 <audio> 元素提供一些替代内容，如在 <audio> 结束标签之间添加文本或链接，以便无法播放音频的用户能够理解音频内容并采取适当的操作。

<video>标签

<video> 元素是 HTML 中用于嵌入视频内容的标签。它允许在网页中播放视频文件，提供了一种直接的方式来添加视频内容和控制视频播放。

以下是一个简单的 <video> 元素的示例：

<video src="video.mp4" controls></video>

在上述示例中，<video> 元素通过 src 属性指定了视频文件的 URL，这里是 “video.mp4”。controls 属性用于显示视频播放器的控制面板，允许用户控制视频的播放、暂停、音量等。

<video> 元素还支持其他一些属性和标签，用于更精确地控制视频的播放和外观，例如：

• autoplay：指定视频在加载完成后自动开始播放。示例：<video src="video.mp4" autoplay></video>

• loop：指定视频循环播放。示例：<video src="video.mp4" loop></video>

• preload：指定视频在页面加载时是否预加载。可以设置为 "auto"（默认值，自动预加载）、"metadata"（仅预加载视频元数据）或 "none"（不预加载）。示例：<video src="video.mp4" preload="auto"></video>

• controls：显示视频播放器的控制面板。示例：<video src="video.mp4" controls></video>

• width 和 height：用于指定视频的宽度和高度，以像素为单位。示例：<video src="video.mp4" width="640" height="360"></video>

• <source>：用于指定多个视频源，以支持不同的视频格式和浏览器兼容性。示例：

  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>

在上述示例中，使用了两个 <source> 元素，分别指定了不同的视频源和 MIME 类型。如果浏览器支持其中一个格式，就会播放相应的视频文件。如果都不支持，将显示 “Your browser does not support the video tag.”。

这些是 <video> 元素的一些常用属性和相关标签，用于控制视频的播放和行为。通过使用这些属性和标签，你可以实现更多定制化的视频播放器和交互效果。

同样需要注意的是，为了确保可访问性，应该为 <video> 元素提供一些替代内容，如在 <video> 结束标签之间添加文本或链接，以便无法播放视频的用户能够理解视频内容并采取适当的操作。

<a>超链接标签

<a> 元素是HTML中的锚（Anchor）元素，用于创建超链接，将文本或图像链接到其他网页、文档、位置或资源。

<a> 元素通常用于创建可点击的链接，使用户能够通过单击链接跳转到目标资源或执行特定操作。它可以包含在文本中，也可以包含在其他元素（如图像）中。

以下是创建一个简单链接的 <a> 元素的示例：

<a href="https://www.example.com">Click here</a>

在上述示例中，<a> 元素通过 href 属性指定了链接的目标 URL，即要跳转到的网页或资源的地址。在这里，链接目标是 “https://www.example.com ↗”。链接文本 “Click here” 是用户可见的可点击部分。

<a> 元素还可以包含其他属性和内容，以增强链接的功能和外观，例如：

• target 属性：指定链接在何处打开。例如，target="_blank" 可以在新的浏览器标签或窗口中打开链接。
• title 属性：为链接提供一个鼠标悬停时显示的提示文本。
• 内容：<a> 元素可以包含文本、图像、其他HTML元素或组合，以形成复杂的链接结构。

示例：

<a href="https://www.example.com" target="_blank" title="Visit Example">Visit Example</a>

在上述示例中，链接会在新的浏览器标签或窗口中打开，并且当用户将鼠标悬停在链接上时，会显示 “Visit Example” 的提示文本。

总结来说，<a> 元素用于创建超链接，使用户能够通过单击链接跳转到其他网页、文档、位置或资源。它通过 href 属性指定链接目标的URL，并可以包含其他属性和内容以增强链接的功能和外观。

相关题解

1. web应用课 html基础标签和文本标签小结

2. Web应用课 表单、列表、表格、语义标签，特殊符号标签小结