HTML 列表：结构化内容
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 HTML 列表，这是组织内容的基础结构。
列表不仅用于展示项目，还能提升页面的语义化和可访问性。
你将学到：
- 使用
<ul>创建无序列表 - 使用
<ol>创建有序列表 - 使用
<dl>创建描述列表 - 嵌套列表的创建方法
Beginner⏱ 15-20 min
Learning Objectives
- 掌握三种列表类型的使用场景
- 学会创建嵌套列表
- 理解描述列表的语义化用途
- 了解列表在导航中的应用
Scenario
你正在为一个 SaaS 产品设计特性介绍页面。
需要展示：
- 产品功能列表（无序）
- 使用步骤（有序）
- 术语解释（描述列表）
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
HTML5ListsStructureSemantics