2.1 錨點連結
在 HTML 頁面內導航幫助使用者快速跳到文件的不同部分。這在擁有大量內容的長頁面中特別有用。HTML 中有幾種實現這種導航的方式，包括使用錨點連結、id屬性以及以 JavaScript 進行導航。
錨點連結 是頁面內導航最常見的方式。它們允許使用者透過錨點標籤跳轉到文件的特定部分。
使用示例：
使用 id 屬性創建錨點:
<h2 id="section1">Section 1</h2>
<p>Section 1 的內容...</p>
<h2 id="section2">Section 2</h2>
<p>Section 2 的內容...</p>
<h2 id="section3">Section 3</h2>
<p>Section 3 的內容...</p>
創建到錨點的連結:
<nav>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
</ul>
</nav>
當用戶點擊連結時，瀏覽器會自動將頁面滾動到指定id的元素。頁面不會重新載入。
使用 name 屬性進行導航
name屬性也可以用來創建錨點，雖然它的使用比較少見，且被認為是過時的。
示例
<a name="top"></a>
<p>頁面頂部...</p>
<a name="bottom"></a>
<p>頁面底部...</p>
<nav>
<ul>
<li><a href="#top">Go to Top</a></li>
<li><a href="#bottom">Go to Bottom</a></li>
</ul>
</nav>
2.2 使用 JavaScript 滾動
JavaScript 提供了更靈活的頁面內導航功能。透過 scrollIntoView、scrollTo 等方法，可以實現頁面的平滑滾動。
使用示例:
這段代碼在按下按鈕時，會平滑地滾動至指定的元素。
<button onclick="scrollToSection('section1')">Go to Section 1</button>
<button onclick="scrollToSection('section2')">Go to Section 2</button>
<button onclick="scrollToSection('section3')">Go to Section 3</button>
<h2 id="section1">Section 1</h2>
<p>Section 1 的內容...</p>
<h2 id="section2">Section 2</h2>
<p>Section 2 的內容...</p>
<h2 id="section3">Section 3</h2>
<p>Section 3 的內容...</p>
// 函數：平滑滾動至頁面的特定部分
function scrollToSection(sectionId) {
// 根據 ID 找到元素
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
2.3 <nav> 標籤
<nav>標籤 在 HTML5 中 用於定義包含導航連結的頁面部分。此標籤有助於語義上標識導航區塊，改善網頁結構，使其對用戶和搜索引擎更具可訪問性。
<nav>標籤用於分組站點或當前文件內的導航連結。這可以是主菜單、副菜單、麵包屑導航、頁面列表和其他導航元素。
語法
<nav>
<!-- 導航元素 -->
</nav>
使用示例
<header>
<h1>我的網站</h1>
<nav>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#contact">聯繫方式</a></li>
</ul>
</nav>
</header>
解釋
<header>標籤：用於創建頁面頭部，包含導航菜單<nav>標籤：包含指向頁面不同部分的連結列表<ul>和<li>標籤：用於創建導航連結列表<a>標籤：定義使用者可用於導航到頁面或站點其他部分的連結
2.4 <nav> 標籤的應用
<nav> 標籤用於分組導航連結，例如：
- 網站主菜單
- 副菜單
- 麵包屑導航（breadcrumbs）
- 分頁連結
- 其他導航連結
網站主菜單
<nav>
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#contact">聯繫方式</a></li>
</ul>
</nav>
副菜單
<nav>
<ul>
<li><a href="#faq">常見問題</a></li>
<li><a href="#support">支持</a></li>
<li><a href="#privacy">隱私政策</a></li>
</ul>
</nav>
麵包屑導航（breadcrumbs）
<nav aria-label="breadcrumb">
<ol>
<li><a href="/home">主頁</a></li>
<li><a href="/category">分類</a></li>
<li>當前頁面</li>
</ol>
</nav>
<nav> 標籤的好處
語義化標記
使用 <nav> 標籤有助於搜尋引擎及無障礙技術更好地理解頁面結構。這不僅提升了網站的可訪問性，也改善了 SEO。
增強頁面結構
<nav> 標籤清楚地將導航元素與主要內容分開，使頁面標記更加合邏輯且結構化。
便於樣式化
將導航元素置於 <nav> 標籤中，便於使用 CSS 進行樣式化，提升外觀及可用性。
GO TO FULL VERSION