2.1 锚链接
HTML页面内的导航帮助用户快速跳转到文档的不同部分。对于有大量内容的长页面，这特别有用。在HTML中，有几种实现此类导航的方法，包括使用锚链接、id属性以及使用JavaScript进行导航。
锚链接是页面内导航的最常见方式。它们允许用户通过锚标签跳到文档的特定部分。
使用示例：
使用id属性创建锚点：
HTML
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
创建锚点链接：
HTML
<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属性也可以用来创建锚点，虽然使用较少且被认为过时。
示例：
HTML
<a name="top"></a>
<p>Top of the page...</p>
<a name="bottom"></a>
<p>Bottom of the page...</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等方法，可以实现页面元素的平滑滚动。
使用示例：
此代码在按下按钮时，页面会平滑滚动到指定的元素。
HTML
<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>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
JavaScript
// 页面内平滑滚动到指定部分的函数
function scrollToSection(sectionId) {
// 根据ID找到元素
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
2.3 <nav> 标签
<nav> 在HTML5中用于定义包含导航链接的页面部分。这个标签有助于语义化标记导航块，从而提升网页的结构，使其对用户和搜索引擎更友好。
<nav> 标签用于分组那些旨在用于网站内或当前文档内导航的链接。这可以是主菜单、次级菜单、面包屑导航、页面列表等导航元素。
语法
HTML
<nav>
<!-- 导航元素 -->
</nav>
使用示例
HTML
<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> 标签用于分组导航链接，例如：
- 网站主菜单
- 次级菜单
- 面包屑导航
- 分页链接
- 其他导航链接
网站主菜单
HTML
<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>
次级菜单
HTML
<nav>
<ul>
<li><a href="#faq">常见问题解答</a></li>
<li><a href="#support">支持</a></li>
<li><a href="#privacy">隐私政策</a></li>
</ul>
</nav>
面包屑导航
HTML
<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