导航元素
注意：
- 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:
Example #2
<!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:
Example #3
Tables of contents and menus are good examples of
<!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:
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
- The
- Some developers might use the
- Essentially, it is your own perception of how to use the
- The
以上是Html 导航元素的详细内容。更多信息请关注PHP中文网其他相关文章！
