搜索

首页 >web前端 >html教程 >HTML 导航标签

HTML 导航标签

WBOY
WBOY原创
2024-09-04 16:24:011088浏览

HTML有很多突出前端技术的功能，其中导航标签就是HTML5版本的功能之一。在以前的版本中，Html 有不同的功能，但在 Html 5 中，导航支持全局属性和事件属性。 html中的标签是文档中的一组导航链接；并非

语法：

每个 Html 标签都有单独的语法，如以下代码：导航标签的基本语法。我们使用了

HTML

<nav>
< a href="/"   />
-------------------
</nav>

CSS

nav{
--some codes—
}

导航标签在 HTML 中如何工作？

用户在点击网页上的选项卡或菜单后发送请求。它会移动到另一个页面，以便服务器的响应将结果网页显示给用户。就像在 HTML 中一样，它将借助一些 html 元素（例如

一个 HTML 页面文档可能包含多个基于网页菜单/选项卡的链接。在HTML中，导航一般包含两种类型，即水平导航和垂直导航。默认情况下，水平导航是根据用户需求加载的，它将转换为垂直或其他一些用户需求类型。

HTML 导航标签

上图是通过导航链接对用户屏幕的基本了解。用户通过浏览器点击首页链接的网页链接无非是Html标签，即）它将浏览特定的网页，它将是客户端页面或服务器端页面，具体取决于它将在用户浏览器屏幕中显示主页的项目。

HTML 导航标签示例

下面是 HTML 导航标签的示例：

示例#1

<html>
<body>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>

输出：

HTML 导航标签

示例#2

<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>

输出：

HTML 导航标签

示例 #3

<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">&times;</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>

输出：

HTML 导航标签

HTML 导航标签

与之前的示例相比，我们使用了一些动画进行导航来吸引用户。

不同类型的导航菜单

通常，我们在 HTML 标签中需要考虑几种不同类型的菜单和习惯用法，例如 和 （锚）元素，并且所有元素都应该关闭。大多数导航菜单都可以用列表创建；有时，会根据用户依赖关系使用接口限制。

基于列表的导航菜单如下：

  • 页内导航菜单
  • 站点导航菜单
  • 上下文上下文导航菜单
  • Stemmaps 导航菜单
  • 分页

1.页内导航菜单

指向网页上其他不同部分的单页链接的表格或内容。

示例

<nav>
<a href="/home/">Home</a> |
</nav>

2.站点导航菜单

这是网页中最有可能且最常见的菜单类型。它是站点或子集的自定义或用户定义菜单类型，显示从站点层次结构中进行选择的选项。

示例

<nav>
<ul>
<li><a href="/home/">Home</a> </li>
<li><a href="/about us/">About Us</a> </li>
<li><a href="/contact us/">Contact Us</a> </li>
</nav>

3.上下文导航菜单

它是一个构建文档内容的链接，它提供了一些与 html 文档当前页面相关的更多信息。此菜单的示例包括一些新闻文章、银行网站；我们在网页应用程序中看到的任何内容都包含一个导航面板，我们已将鼠标光标放置在选项卡或菜单中。它将显示类似菜单的工具提示内容。

4.站点地图导航菜单

这是一个看起来像弹出窗口的菜单，无论用户单击菜单或选项卡配置的页面，或者他们需要一些额外的插件来配置新窗口或页面，所有内容都将映射到同一站点。站点地图和站点搜索在 Html 中都有不同的功能集和提供内容。

5.分页

在分页中，有时我们会看到网页会配置后端，以便在用户单击菜单或选项卡后在前端屏幕中加载大量文件。使用此选项可以拆分为单独的页面。与导航相比，它是不同的，因为它通常链接到同一文档的后端，这会导致在同一网页上显示更多选项或更多信息。

结论

最后，我们有一个总结部分，通常每个版本的 html 都有一组不同的功能。

以上是HTML 导航标签的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 css html for using Interface finally Event map default this href display table
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Footer Tag in HTML下一篇：Html Nav Element

相关文章

查看更多