HTML 媒体：图片与多媒体
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 HTML 媒体元素，包括图片、视频等多媒体内容的嵌入。
正确使用媒体元素对网页性能、可访问性和 SEO 都很重要。
你将学到：
- 使用
<img>嵌入图片 - 图片的
alt属性和可访问性 - 使用
<figure>和<figcaption> - 响应式图片的
srcset属性
Beginner⏱ 15-20 min
Learning Objectives
- 掌握 img 标签的必要属性
- 理解 alt 属性的重要性
- 学会使用 figure 语义化包装
- 了解响应式图片技术
Scenario
你正在为一个电商网站设计产品详情页。
需要展示：
- 产品主图（带说明文字）
- 产品图片画廊
- 确保图片有良好的可访问性
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5ImagesMediaResponsive