Html 导航元素

导航元素

HTML 文档中的标签用于指定包含在同一文档或任何其他文档中的导航链接块。展示导航块的示例是索引、目录、菜单等。HTML 文档可以包含所需数量的

块。

标签，例如站点导航、页内导航等。标签还用于声明 HTML 文档中的导航部分。大多数网站通常更喜欢有专门用于导航链接的部分，允许用户在网站上导航。这些链接可以放置在导航标签内。在本主题中，我们将学习 Html Nav Element。

注意：

• HTML 文档中提到的所有链接均未放置在
  内。元素;它只包括主要的导航块。它也可用于定义网站页脚中的链接，但

  标签通常在这种情况下使用。
• HTML 元素不允许嵌套在

  中元素。
• HTML5 中的导航标签需要开始和结束标签，即
  ……..

语法：

HTML/XHTML

<nav> ... </nav>

CSS

nav{
--your css code—
}

使用

标签

;标签专为主要导航区域而设计，例如页面或部分顶部的主菜单。一个文档可以有多个

元素。

元素，即一个用于站点导航，一个用于页面内导航等。标签可以是 ul 列表中的代码，也可以简单地编码为不带 ul 元素的单独链接。此标签有助于更轻松地创建导航菜单、文本链接的整洁水平菜单或帮助屏幕阅读软件以正确识别文档中的主要导航区域等内容。

标签特定属性

没有与

一起使用的特定属性标签。

全局属性

与所有其他 HTML 标签一样，

标签还支持HTML5中的全局属性。

以下是全局属性：

• 中止
• 自动完成，
• 自动完成错误，
• 模糊，
• 取消，
• 可以玩，
• 可以通关，
• 改变，
• 点击，
• 关闭，
• 在上下文菜单上，
• 一旦改变，
• 单击，
• ondrag，
• 关于德拉吉德，
• ondragenter，
• ondrageexit，
• 拖走，
• ondragoover，
• ondragstart，
• ondrop，
• 持续时间变化，
• 空了，
• 结束了，
• 错误，
• 焦点，
• 输入时，
• 无效，
• 按下按键，
• 按键，
• onkeyup，
• 加载，
• 已加载数据，
• 已加载元数据，
• onloadstart，
• 鼠标按下时，
• 鼠标输入，
• 鼠标离开，
• 鼠标移动，
• 鼠标移出时，
• 鼠标悬停时，
• 鼠标松开，
• 鼠标滚轮，
• 暂停，
• 比赛中，
• 正在播放，
• 进行中，
• 利率变化，
• 重置时，
• 调整大小，
• 滚动，
• 寻求，
• 寻求，
• 选择时，
• 现场表演，
• 安排序，
• 已安装，
• 提交后，
• 暂停，
• 准时更新，
• 打开，
• 音量变化，
• 等待中

事件属性

不存在可与

一起使用的事件属性。标签。

中的 CSS 文本格式属性标签：

• 文字颜色
• 文本对齐
• 文字装饰
• 文本转换
• 行高
• 文本方向
• 文字阴影
• 字间距

中的 CSS 字体属性标签

• 字体样式 – 正常|斜体|倾斜|首字母|继承
• 字体变体 – 普通|小型大写字母|首字母|继承
• 字体粗细 – 正常|粗体|粗体|更亮|数字|首字母|继承
• 字体大小 – 中|xx-小|x-小|小|大|x-大|xx-大|小|大|长度|初始|继承
• 字体系列 – 家族名称|通用家族|首字母|继承

的 CSS 测试阴影属性标签

<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>

示例

以下是下面提到的示例

示例#1

在

的帮助下HTML 元素，我们可以在单个语义元素中使用一组链接，这有助于制作有组织的网站。

<title>HTML Nav tag</title>


<header>
<h1 id="About-Us">About Us</h1>
</header>
<nav>
<a href="https://www.educba.com/about-us/">Who is EDUCBA?</a> |
<a href="https://www.educba.com/careers/">Careers</a> |
<a href="https://www.educba.com/instructors/">Become an instructor</a> |
<a href="https://www.educba.com/how-it-works/">How does it work?</a> |
</nav>

Output:

Example #2

HTML Tag helps the users navigate to the main sections of the website.

<style>
nav{
display:flex;
flex-wrap:wrap;
}
nav a {
text-decoration: none;
display:block;
padding: 15px 25px;
text-align: center;
background-color: rgb(213, 216, 220);
color:#566573;
font-family:sans-serif;
}
nav a:hover {
background-color: #566573;
color:#ffffff;
}
</style>


<h1 id="Example-of-the-HTML-nav-tag">Example of the HTML nav tag:</h1>
<nav>
<a href="https://www.educba.com/about-us/">About</a>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<a href="https://www.educba.com/courses/">Certification Courses</a>
</nav>

Output:

Example #3

Tables of contents and menus are good examples of

HTML element.

<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
clear: both;
display: block;
}
nav ul li {
float: left;
position:relative;
list-style-type:none;
}
nav ul li:hover {
background: rgb(52, 73, 94);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color:rgb(40, 55, 71 );
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgb(27, 38, 49);
}
</style>


<h1 id="Dropdown-menu-with-the-HTML-nav-tag">Dropdown menu with the HTML nav tag:</h1>
<nav>
<ul>
<li>
<a href="https://www.educba.com/about-us/">About</a>
<ul>
<li>
<a href="#">Reviews</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About Us</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/tutorials/">Tutorials</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href="#%22">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
<li>
<a href="https://www.educba.com/courses/">Certification Courses</a>
<ul>
<li>
<a href="#">Finance</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sofware Development</a>
</li>
<li>
<a href="#%22">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>

Output:

Browser Support: The section tag is being new in HTML5, and it is being supported in the browser, which is listed below:

• Google Chrome 6.0
• Internet Explorer 9.0
• Firefox 4.0
• Opera 11.1
• Safari 5.0

Conclusion- Html Nav Element

Below are mentioned some of the main key points which you should remember from this topic:

• The
  element in HTML5 represents a section of the page whose entire purpose is to provide navigational links, either in the same document or any other document. The links in the

  element can point to other webpages or to different sections of the same webpage. Common examples of the nav elements are tables, menus, indexes, and contents.
• The
  HTML element can use for the primary navigation of the structure.
• Some developers might use the
  HTML element for breadcrumbs and paginations.
• Essentially, it is your own perception of how to use the
  element within your HTML document.
• The
  HTML element is a block-level element.

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