HTML图像与多媒体

HTML图像基础

<img>标签用于在网页中嵌入图像。它是一个空元素，不需要结束标签。

重要： 始终为图像提供alt属性，这对可访问性和SEO都很重要。

基本图像语法

                        基本图像
                    
                        <img src="image.jpg" alt="图片描述">

图像格式选择

根据图像类型和用途选择合适的格式：

JPEG - 适合照片和复杂图像，支持压缩
PNG - 适合需要透明背景的图像
GIF - 适合简单动画和低颜色图像
WebP - 现代格式，提供更好的压缩
SVG - 矢量图形，适合图标和简单图形

图像属性

属性	描述	示例
`src`	图像源文件路径（必需）	`src="photo.jpg"`
`alt`	替代文本（必需）	`alt="风景照片"`
`width`	图像宽度（像素）	`width="300"`
`height`	图像高度（像素）	`height="200"`
`title`	图像标题（工具提示）	`title="美丽的风景"`
`loading`	加载行为	`loading="lazy"`
`srcset`	响应式图像源集	`srcset="img-320w.jpg 320w"`
`sizes`	响应式图像尺寸	`sizes="(max-width: 600px) 100vw"`

alt属性的重要性

alt属性在以下情况下非常重要：

图像无法加载时显示替代文本
屏幕阅读器为视障用户读取图像描述
搜索引擎理解图像内容
网络连接慢时提供内容预览

                        alt属性示例
                    
                        <!-- 好的alt文本 -->
<img src="cat.jpg" alt="一只橘色猫咪在沙发上睡觉">

<!-- 装饰性图像的alt文本 -->
<img src="divider.png" alt="">

<!-- 信息图表的alt文本 -->
<img src="chart.png" alt="2026年销售额季度增长图表，Q1: 20%, Q2: 35%, Q3: 50%, Q4: 65%">

width和height属性

指定图像的宽度和高度可以帮助浏览器预留空间，防止布局偏移：

                        尺寸属性示例
                    
                        <img src="photo.jpg" alt="示例照片" width="800" height="600">

提示： 在现代Web开发中，通常使用CSS控制图像尺寸，但HTML属性仍然有助于防止累积布局偏移(CLS)。

响应式图像

响应式图像能够根据设备特性和屏幕尺寸提供最合适的图像版本。

srcset属性

                        srcset示例
                    

                        <img 
    src="image-800.jpg" 
    alt="响应式图像示例"
    srcset="image-320.jpg 320w,
            image-480.jpg 480w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           (max-width: 800px) 760px,
           1200px">
                    

picture元素

<picture>元素提供更灵活的图像源选择：

                        picture元素
                    

                        <picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <source media="(min-width: 320px)" srcset="small.jpg">
    <img src="fallback.jpg" alt="响应式图像">
</picture>
                    

现代图像格式

                        WebP和AVIF格式
                    

                        <picture>
    <source type="image/avif" srcset="image.avif">
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="现代图像格式示例">
</picture>
                    

艺术指导

使用<picture>元素进行艺术指导，为不同屏幕尺寸提供裁剪不同的图像：

                        艺术指导示例
                    

                        <picture>
    <source media="(min-width: 768px)" srcset="landscape.jpg">
    <source media="(max-width: 767px)" srcset="portrait.jpg">
    <img src="landscape.jpg" alt="美丽的风景">
</picture>
                    

图像映射

图像映射允许在单个图像上创建多个可点击区域：

                        图像映射示例
                    

                        <img src="planets.jpg" alt="太阳系行星" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,100,100" 
          href="sun.html" alt="太阳">
    <area shape="circle" coords="150,150,50" 
          href="earth.html" alt="地球">
    <area shape="poly" coords="200,200,250,250,300,200" 
          href="mars.html" alt="火星">
</map>
                    

注意： 图像映射在现代Web开发中使用较少，通常被CSS或JavaScript解决方案替代。

HTML5音频

<audio>元素用于在网页中嵌入音频内容：

                        音频元素
                    

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

音频示例：

音频属性

属性	描述
`controls`	显示播放控件
`autoplay`	自动播放（谨慎使用）
`loop`	循环播放
`muted`	静音
`preload`	预加载行为

音频格式兼容性

为确保跨浏览器兼容性，提供多种音频格式：

MP3 - 广泛支持，适合音乐
OGG - 开源格式，适合音效
WAV - 无损格式，文件较大
AAC - 苹果设备首选

HTML5视频

<video>元素用于在网页中嵌入视频内容：

                        视频元素
                    

                        <video controls width="640" height="360" poster="preview.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频元素。
</video>
                    

视频示例：

视频属性

属性	描述
`controls`	显示播放控件
`autoplay`	自动播放
`loop`	循环播放
`muted`	静音
`poster`	视频封面图像
`preload`	预加载行为
`width`/`height`	视频尺寸

视频格式兼容性

为确保跨浏览器兼容性，提供多种视频格式：

MP4 - 广泛支持，H.264编码
WebM - 开源格式，VP8/VP9编码
OGG - 开源格式，Theora编码

视频轨道

使用<track>元素为视频添加字幕或描述：

                        视频轨道示例
                    

                        <video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
</video>
                    

SVG图像

SVG（可缩放矢量图形）使用XML描述二维图形：

                        SVG示例
                    
                        <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG优势

无限缩放而不失真
文件体积小
可通过CSS和JavaScript控制
支持动画和交互

Canvas元素

<canvas>元素用于通过JavaScript动态绘制图形：

                        Canvas示例
                    

                        <canvas id="myCanvas" width="200" height="100">
    您的浏览器不支持Canvas元素。
</canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 150, 80);
</script>
                    

多媒体最佳实践

性能优化

使用适当的图像格式和压缩
实现响应式图像
使用loading="lazy"延迟加载非关键图像
优化视频文件大小和格式
考虑使用CDN加速媒体文件加载

可访问性考虑

为所有图像提供有意义的alt文本
为音频内容提供文字转录
为视频内容提供字幕和描述
确保媒体控件可以通过键盘操作
避免自动播放媒体，或提供明确的关闭选项

用户体验

使用poster属性为视频提供有吸引力的封面
提供多种媒体格式以确保兼容性
考虑移动设备的网络条件和屏幕尺寸
为大型媒体文件提供加载指示器

注意： 自动播放音频和视频可能会对用户体验产生负面影响，特别是在移动设备上。谨慎使用autoplay属性。

动手练习

创建一个包含多种媒体元素的HTML页面：

                        综合练习
                    

                        <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多媒体展示 - 练习</title>
</head>
<body>
    <header>
        <h1>多媒体内容展示</h1>
    </header>
    
    <main>
        <section>
            <h2>响应式图像</h2>
            <img 
                src="landscape-800.jpg" 
                alt="美丽的山水风景"
                srcset="landscape-320.jpg 320w,
                        landscape-480.jpg 480w,
                        landscape-800.jpg 800w"
                sizes="(max-width: 480px) 100vw, 800px"
                loading="lazy">
        </section>
        
        <section>
            <h2>音频播放</h2>
            <audio controls>
                <source src="nature-sounds.mp3" type="audio/mpeg">
                <source src="nature-sounds.ogg" type="audio/ogg">
                您的浏览器不支持音频元素。
            </audio>
            <p><small>自然声音 - 鸟鸣和流水声</small></p>
        </section>
        
        <section>
            <h2>视频展示</h2>
            <video controls width="100%" poster="video-preview.jpg">
                <source src="demo-video.mp4" type="video/mp4">
                <source src="demo-video.webm" type="video/webm">
                您的浏览器不支持视频元素。
            </video>
        </section>
        
        <section>
            <h2>现代图像格式</h2>
            <picture>
                <source type="image/avif" srcset="modern.avif">
                <source type="image/webp" srcset="modern.webp">
                <img src="modern.jpg" alt="现代建筑" loading="lazy">
            </picture>
        </section>
        
        <section>
            <h2>SVG图形</h2>
            <svg width="100" height="100">
                <rect x="10" y="10" width="80" height="80" fill="blue" />
            </svg>
        </section>
    </main>
    
    <footer>
        <p><small>多媒体内容示例 © 2026</small></p>
    </footer>
</body>
</html>
                    

下一步学习

掌握图像与多媒体后，继续学习：

1

表格

学习创建和组织数据表格

继续学习

2

列表

学习创建有序和无序列表

继续学习