图片与多媒体 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 3 关

进度 0%

第 3 关：图片与多媒体

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 3 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

图片与多媒体
学习在网页中嵌入多媒体内容

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# 图片与多媒体
# 学习在网页中嵌入多媒体内容

def create_media_gallery(images):
    html = '<div class="gallery">\n'
    for img in images:
        html += f'''  <figure>
    <img src="{img['src']}" alt="{img['alt']}" width="{img.get('width', 300)}">
    <figcaption>{img['caption']}</figcaption>
  </figure>
'''
    html += '</div>'
    return html

gallery = create_media_gallery([
    {"src": "photo1.jpg", "alt": "风景照", "caption": "美丽的日落", "width": 400},
    {"src": "photo2.jpg", "alt": "城市夜景", "caption": "繁华的都市"},
    {"src": "photo3.jpg", "alt": "山水", "caption": "宁静的湖泊"},
])
print(gallery)

# 视频和音频标签
print("\n--- 多媒体标签 ---")
media_tags = """

<img src="photo.jpg" alt="描述" width="300">

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

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

<iframe src="https://example.com" width="800" height="600"></iframe>
"""
print(media_tags)

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 3 关：图片与多媒体

HTML/CSS · 入门 · 《HTML & CSS 基础》

图片与多媒体
学习在网页中嵌入多媒体内容

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。