HTML 多媒体

图片

基本图片标签

html

<img src="image.jpg" alt="图片描述" width="300" height="200">

图片属性

html

<!-- 基本属性 -->
<img src="image.jpg" alt="图片描述" width="300" height="200" 
     title="鼠标悬停提示" loading="lazy" decoding="async">

<!-- 错误处理 -->
<img src="image.jpg" alt="图片描述" onerror="this.src='fallback.jpg'">

<!-- 图片链接 -->
<a href="large.jpg">
  <img src="thumbnail.jpg" alt="缩略图">
</a>

响应式图片

html

<!-- 使用 srcset -->
<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
     sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"
     alt="响应式图片">

<!-- 使用 picture 元素 -->
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="响应式图片">
</picture>

<!-- 不同格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="图片描述">
</picture>

图片优化

html

<!-- 懒加载 -->
<img src="image.jpg" alt="图片描述" loading="lazy">

<!-- 提前加载重要图片 -->
<img src="hero.jpg" alt="首屏图片" loading="eager" fetchpriority="high">

<!-- 解码方式 -->
<img src="image.jpg" alt="图片描述" decoding="async">

<!-- 宽高比 -->
<img src="image.jpg" alt="图片描述" width="800" height="600" 
     style="aspect-ratio: 4/3;">

视频

基本视频标签

html

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放
</video>

视频属性

html

<!-- 基本属性 -->
<video src="video.mp4" 
       controls 
       autoplay 
       muted 
       loop 
       preload="auto"
       poster="poster.jpg"
       width="640" 
       height="360">
</video>

<!-- 多源支持 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <p>您的浏览器不支持视频播放</p>
</video>

<!-- 响应式视频 -->
<video controls style="width: 100%; height: auto;">
  <source src="video.mp4" type="video/mp4">
</video>

视频预加载

html

<!-- 预加载策略 -->
<video preload="auto">    <!-- 预加载整个视频 -->
<video preload="metadata"> <!-- 只预加载元数据 -->
<video preload="none">     <!-- 不预加载 -->

视频轨道

html

<video controls>
  <source src="video.mp4" type="video/mp4">
  
  <!-- 字幕 -->
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文字幕">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="英文字幕">
  
  <!-- 章节标记 -->
  <track src="chapters.vtt" kind="chapters" srclang="zh" label="章节">
  
  <!-- 描述 -->
  <track src="descriptions.vtt" kind="descriptions" srclang="zh" label="描述">
</video>

音频

基本音频标签

html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放
</audio>

音频属性

html

<!-- 基本属性 -->
<audio src="audio.mp3" 
       controls 
       autoplay 
       loop 
       preload="auto"
       muted>
</audio>

<!-- 多源支持 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  <p>您的浏览器不支持音频播放</p>
</audio>

<!-- 背景音乐 -->
<audio src="bgm.mp3" autoplay loop muted></audio>

嵌入内容

iframe

html

<!-- 基本用法 -->
<iframe src="https://example.com" 
        width="800" 
        height="600" 
        frameborder="0"
        allowfullscreen>
</iframe>

<!-- 嵌入视频 -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
</iframe>

<!-- 安全属性 -->
<iframe src="https://example.com"
        sandbox="allow-same-origin allow-scripts allow-forms"
        referrerpolicy="no-referrer">
</iframe>

embed

html

<embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="300">
<embed src="video.mp4" type="video/mp4" width="640" height="360">

object

html

<object data="flash.swf" type="application/x-shockwave-flash" width="400" height="300">
  <param name="movie" value="flash.swf">
  <param name="quality" value="high">
  <p>您的浏览器不支持Flash</p>
</object>

SVG 图形

内联 SVG

html

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
  <rect x="10" y="10" width="80" height="80" fill="blue" />
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>

外部 SVG

html

<img src="image.svg" alt="SVG图片" width="100" height="100">

SVG 动画

html

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="r" from="20" to="40" dur="2s" repeatCount="indefinite" />
    <animate attributeName="fill" values="red;blue;red" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

Canvas

基本 Canvas

html

<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.strokeRect(120, 10, 100, 100);
</script>

响应式 Canvas

html

<canvas id="myCanvas"></canvas>

<script>
const canvas = document.getElementById('myCanvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();
</script>

多媒体最佳实践

1. 图片优化

html

<!-- 使用合适的格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="图片描述" loading="lazy">
</picture>

<!-- 提供alt文本 -->
<img src="image.jpg" alt="详细描述图片内容">

<!-- 使用占位图 -->
<img src="image.jpg" alt="图片" style="background-color: #f0f0f0;">

2. 视频优化

html

<!-- 提供多种格式 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<!-- 使用海报图 -->
<video controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- 响应式视频 -->
<div style="position: relative; padding-bottom: 56.25%;">
  <video controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

3. 音频优化

html

<!-- 提供多种格式 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

<!-- 预加载策略 -->
<audio controls preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

面试常见问题

1. img 标签的 alt 属性有什么作用？

alt属性为图片提供替代文本，当图片无法加载时显示文本，对SEO和无障碍访问很重要。

html

<img src="image.jpg" alt="详细描述图片内容">

2. loading="lazy" 的作用是什么？

loading="lazy"实现图片懒加载，只有当图片进入视口时才加载，提高页面性能。

html

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

3. srcset 和 sizes 的作用？

srcset提供不同分辨率的图片，sizes定义图片在不同视口宽度下的显示尺寸，实现响应式图片。

html

<img src="small.jpg" 
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
     sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1024px"
     alt="响应式图片">

4. video 标签的 preload 属性有哪些值？

auto: 预加载整个视频
metadata: 只预加载元数据
none: 不预加载

html

<video preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

5. 如何实现视频的自适应？

使用CSS设置视频宽度为100%，高度自动，或者使用padding-bottom技巧保持宽高比。

html

<video controls style="width: 100%; height: auto;">
  <source src="video.mp4" type="video/mp4">
</video>

<div style="position: relative; padding-bottom: 56.25%;">
  <video controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

通过理解HTML多媒体的各种标签和属性，可以构建丰富、高性能的多媒体网页内容。

HTML 多媒体 ​

图片 ​

基本图片标签 ​

图片属性 ​

响应式图片 ​

图片优化 ​

视频 ​

基本视频标签 ​

视频属性 ​

视频预加载 ​

视频轨道 ​

音频 ​

基本音频标签 ​

音频属性 ​

嵌入内容 ​

iframe ​

embed ​

object ​

SVG 图形 ​

内联 SVG ​

外部 SVG ​

SVG 动画 ​

Canvas ​

基本 Canvas ​

响应式 Canvas ​

多媒体最佳实践 ​

1. 图片优化 ​

2. 视频优化 ​

3. 音频优化 ​

面试常见问题 ​

1. img 标签的 alt 属性有什么作用？ ​

2. loading="lazy" 的作用是什么？ ​

3. srcset 和 sizes 的作用？ ​

4. video 标签的 preload 属性有哪些值？ ​

5. 如何实现视频的自适应？ ​

HTML 多媒体

图片

基本图片标签

图片属性

响应式图片

图片优化

视频

基本视频标签

视频属性

视频预加载

视频轨道

音频

基本音频标签

音频属性

嵌入内容

iframe

embed

object

SVG 图形

内联 SVG

外部 SVG

SVG 动画

Canvas

基本 Canvas

响应式 Canvas

多媒体最佳实践

1. 图片优化

2. 视频优化

3. 音频优化

面试常见问题

1. img 标签的 alt 属性有什么作用？

2. loading="lazy" 的作用是什么？

3. srcset 和 sizes 的作用？

4. video 标签的 preload 属性有哪些值？

5. 如何实现视频的自适应？