HTML <nav> 标签

实例

 <nav>
 ? <a href="/html/">HTML</a> |
 ? <a href="/css/">CSS</a> |
 ? <a href="/js/">JavaScript</a> |
 ? <a href="/jquery/">jQuery</a>
 </nav>

浏览器支持

目前大多数浏览器支持 <nav> 标签。

标签定义及使用说明

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

HTML 4.01 与 HTML5中的差异

<nav> 是 HTML5 的新标签。

全局属性

<nav> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<nav> 标签支持所有 HTML事件属性。

上一章:HTML 标签</a> <a href="/tags/tag-meter.html" class="btn btn-primary">下一章:HTML <meter> 标签</a> </div> </div> </div> </div> </div>  <button class="sidebar-toggle" id="sidebarToggle"> <i class="fas fa-bars"></i> </button>  <div class="overlay" id="overlay"></div> <div class="back-to-top" id="backToTop"> <i class="fas fa-arrow-up"></i> </div> <footer class="text-center"> <div class="container"> <p>Copyright © 2025 ab教程网 abdict.com | 备案号：<a class="footer-link" target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">豫ICP备17018595号-8</a> | <a class="footer-link" target="_blank" href="/disclaimer">免责声明</a> </p> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?9d2dea183de9322b22fb2acbec495955"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/libs/highlight/highlight.min.js"></script> <script> hljs.highlightAll(); // 搜索功能 const searchInput = document.querySelector('.search-box input'); searchInput.addEventListener('input', function() { const searchText = this.value.toLowerCase(); document.querySelectorAll('.sidebar-list li').forEach(item => { const text = item.textContent.toLowerCase(); if (text.includes(searchText)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); }); function runCode(btn) { const codeContainer = btn.previousElementSibling; const resultContainer = btn.parentElement.nextElementSibling; const code = codeContainer.textContent; // 创建临时div来解析HTML const tempDiv = document.createElement('div'); tempDiv.innerHTML = code; // 显示结果 resultContainer.innerHTML = tempDiv.innerHTML; resultContainer.style.display = 'block'; } // 移动端侧边栏功能 document.addEventListener('DOMContentLoaded', function() { const sidebar = document.getElementById('sidebar'); const sidebarToggle = document.getElementById('sidebarToggle'); const overlay = document.getElementById('overlay'); // 切换侧边栏显示 function toggleSidebar() { sidebar.classList.toggle('show'); overlay.classList.toggle('show'); } // 点击按钮切换侧边栏 sidebarToggle.addEventListener('click', function(e) { e.stopPropagation(); toggleSidebar(); }); // 点击遮罩层关闭侧边栏 overlay.addEventListener('click', function() { toggleSidebar(); }); // 点击侧边栏内部不会关闭 sidebar.addEventListener('click', function(e) { e.stopPropagation(); }); // 调整窗口大小时重置侧边栏状态 window.addEventListener('resize', function() { if (window.innerWidth >= 992) { sidebar.classList.remove('show'); overlay.classList.remove('show'); } }); }); </script> </body> </html>