Html 导航元素-html教程-PHP中文网

示例

示例#1

Example #3

Conclusion- Html Nav Element

首页

web前端

html教程

Html 导航元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:24 PM

html html5 HTML Tutorial HTML Properties HTML tags

导航元素

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

注意：

HTML 文档中提到的所有链接均未放置在
内。元素;它只包括主要的导航块。它也可用于定义网站页脚中的链接，但
标签通常在这种情况下使用。
HTML 元素不允许嵌套在
中元素。
HTML5 中的导航标签需要开始和结束标签，即
……..

语法：

HTML/XHTML

<body>
<nav> ... </nav>
<body>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">nav{
--your css code—
}

登录后复制

使用
标签

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

标签特定属性

没有与

全局属性

与所有其他 HTML 标签一样，

以下是全局属性：

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

事件属性

不存在可与

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

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

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

登录后复制

示例

以下是下面提到的示例

示例#1

在

<!DOCTYPE html>
<html>
<head>
<title>HTML Nav tag</title>
</head>
<body>
<header>
<h1>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>
</body>
</html>

登录后复制

Output:

Html 导航元素

Example #2

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

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>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>
</body>
</html>

登录后复制

Output:

Html 导航元素

Example #3

Tables of contents and menus are good examples of

HTML element.

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>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=#">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=#">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

登录后复制

Output:

Html 导航元素

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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn