第五章：多媒体元素 - HTML学习指南

第五章：多媒体元素

HTML标签：

<img> - 图片
用于显示图片，必需的属性：src和alt
<video> - 视频
播放视频，支持多种格式
<audio> - 音频
播放音频文件

CSS属性：

object-fit
控制媒体内容如何适应容器

object-fit: cover;
border-radius
设置圆角效果

border-radius: 8px;
filter
添加视觉效果

filter: brightness(1.2);

综合示例：

HTML:

<div class="media-gallery">
    <img src="example.jpg" alt="示例图片">
    <video controls>
        <source src="video.mp4" type="video/mp4">
    </video>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
</div>

CSS:

.media-gallery {
    display: grid;
    gap: 20px;
    padding: 20px;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

video, audio {
    width: 100%;
    border-radius: 8px;
}

HTML编辑器

CSS编辑器

预览结果