6. 錨點與超連結 (Anchors and Hyperlinks)

<a href="courses.html">查看我們的課程</a>

<p>
  報名前，請閱讀我們的<a href="course-guide.html">課程指南</a>。
</p>

<a>課程指南</a>

<a href="https://www.gov.hk/">瀏覽香港政府一站通</a>

<a href="courses.html">課程</a>
<a href="guides/html.html">HTML 指南</a>
<a href="../index.html">上一層資料夾的首頁</a>

<a href="guides/html.html">HTML 指南</a>

<a href="../courses.html">課程</a>

<a href="/courses.html">課程</a>

<a href="#entry-requirements">跳至入讀要求</a>

<h2 id="entry-requirements">入讀要求</h2>
<p>不需要具備程式編寫經驗。</p>

<a href="courses.html#entry-requirements">
  查看課程入讀要求
</a>

<p>查看時間表，請<a href="timetable.html">按此</a>。</p>

<p><a href="timetable.html">查看課程時間表</a>。</p>

<a href="documents/course-guide.pdf">
  下載課程指南（PDF）
</a>

<a
  href="https://www.gov.hk/"
  target="_blank"
  rel="noopener"
>
  瀏覽香港政府一站通（在新分頁或視窗開啟）
</a>

<a href="mailto:enquiries@example.com">
  傳送電郵至查詢團隊
</a>

<a href="mailto:enquiries@example.com?subject=Course%20enquiry">
  以電郵查詢課程
</a>

<a href="tel:+85212345678">致電 +852 1234 5678</a>

<a href="documents/checklist.pdf">開啟 HTML 檢查清單（PDF）</a>

<a href="documents/checklist.pdf" download>
  下載 HTML 檢查清單（PDF）
</a>

<a
  href="documents/checklist.pdf"
  download="html-checklist.pdf"
>
  下載 HTML 檢查清單（PDF）
</a>

<a href="index.html">
  <img src="images/logo.png" alt="海港學習中心首頁">
</a>

<a href="index.html">
  <img src="images/logo.png" alt="">
  海港學習中心首頁
</a>

<!-- 一般操作應避免這些寫法。 -->
<a href="#" onclick="showDetails()">顯示詳情</a>
<a href="javascript:showDetails()">顯示詳情</a>

<html lang="en-HK">

<a href="zh/course-guide.html" lang="zh-Hant-HK">
  繁體中文課程指南
</a>

<a
  href="zh/course-guide.html"
  lang="zh-Hant-HK"
  hreflang="zh-Hant-HK"
>
  繁體中文課程指南
</a>

a {
  color: #005ea8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

a:focus-visible {
  outline: 3px solid #005ea8;
  outline-offset: 4px;
}

id: hong-kong-html-anchors-hyperlinks
name: 錨點與超連結 — 課程指南
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>課程指南 | 錨點與超連結</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      h1 {
        margin-block: 0 1rem;
      }

      h2 {
        margin-block: 0 1rem;
      }

      p {
        margin-block: 0 1rem;
      }

      nav,
      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      section > :last-child {
        margin-block-end: 0;
      }

      a {
        color: #005ea8;
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      a:hover {
        text-decoration-thickness: 0.15em;
      }

      a:focus-visible {
        outline: 3px solid #005ea8;
        outline-offset: 4px;
      }

      [id] {
        scroll-margin-block-start: 1rem;
      }

      .welcome {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1 id="top">HTML 課程指南</h1>
      <p>使用以下連結，探索本頁內容。</p>

      <p class="welcome">
        你可以使用以下連結，跳到本頁的不同部分。
      </p>

      <nav aria-label="本頁目錄">
        <ul>
          <li><a href="#overview">課程概覽</a></li>
          <li><a href="#requirements">入讀要求</a></li>
          <li>
            <a href="#english-summary" lang="en-HK">
              English summary
            </a>
          </li>
        </ul>
      </nav>

      <section>
        <h2 id="overview">課程概覽</h2>
        <p>
          學習使用標題、段落、清單及超連結，
          建立網頁結構。
        </p>
        <p>
          繼續查看<a href="#requirements">入讀要求</a>。
        </p>
      </section>

      <section>
        <h2 id="requirements">入讀要求</h2>
        <p>不需要具備網頁開發經驗。</p>
        <ul>
          <li>純文字或程式碼編輯器</li>
          <li>現代網頁瀏覽器</li>
          <li>基本檔案及資料夾管理能力</li>
        </ul>
        <p><a href="#top">返回網頁主標題</a></p>
      </section>

      <section lang="en-HK">
        <h2 id="english-summary">English Summary</h2>
        <p>
          This course introduces basic HTML structure,
          including headings, paragraphs, lists, and hyperlinks.
        </p>
        <p>
          Hyperlinks lead to other pages, documents,
          or specific locations within the same page.
        </p>
        <p><a href="#top">Return to the page heading</a></p>
      </section>
    </main>
  </body>
  </html>