logo

HTML 链接：导航与锚点

✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset

About This Exercise

在这个实验中，你将学习 HTML 链接，这是网页导航的核心。

超链接让网页相互连接，形成了万维网的基础结构。

你将学到：

  • 使用 <a> 创建超链接
  • 内部链接和外部链接的区别
  • 使用 id 和 # 创建锚点
  • 链接的 target 和安全属性
Beginner⏱ 15-20 min

Learning Objectives

  • 掌握 a 标签的基本属性
  • 理解内部链接和外部链接
  • 学会创建页面内锚点导航
  • 了解链接安全性最佳实践

Scenario

你正在为一个技术文档网站创建帮助页面。 需要实现： - 页面顶部的目录导航（锚点链接） - 文档内容区（带 ID 的章节） - 外部资源链接

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

HTML5LinksNavigationAnchor