Heim > Artikel > Web-Frontend > HTML-Navigationselement
HTML-Navigationselement
- WBOYOriginal
- 2024-09-04 16:24:13751Durchsuche
The navigation element
Note:
- All the links mentioned in the HTML document are not placed inside the
- The
- Both Start and End tag are required for Nav tag in HTML5 i.e.
Syntax:
HTML/XHTML
<body> <nav> ... </nav> <body>
CSS
nav{
--your css code—
}
Use of
The
Tag-Specific Attributes
There is no specific attribute present to be used with the
Global Attributes
Like all other HTML tags present, the
The following are the global attributes:
- Onabort
- on autocomplete,
- onautocompleteerror,
- onblur,
- oncancel,
- oncanplay,
- oncanplaythrough,
- onchange,
- onclick,
- onclose,
- oncontextmenu,
- oncuechange,
- ondblclick,
- ondrag,
- ondragend,
- ondragenter,
- ondragexit,
- ondragleave,
- ondragover,
- ondragstart,
- ondrop,
- ondurationchange,
- onemptied,
- onended,
- onerror,
- onfocus,
- oninput,
- oninvalid,
- onkeydown,
- onkeypress,
- onkeyup,
- onload,
- onloadeddata,
- onloadedmetadata,
- onloadstart,
- onmousedown,
- onmouseenter,
- onmouseleave,
- onmousemove,
- onmouseout,
- onmouseover,
- onmouseup,
- onmousewheel,
- onpause,
- onplay,
- onplaying,
- onprogress,
- onratechange,
- onreset,
- onresize,
- onscroll,
- onseeked,
- onseeking,
- onselect,
- onshow,
- onsort,
- onstalled,
- onsubmit,
- onsuspend,
- ontimeupdate,
- ontoggle,
- onvolumechange,
- Onwaiting
Event Attributes
There is no event attribute present to be used with the
CSS text formatting properties in
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Line-height
- Text-direction
- Text-shadow
- Word-spacing
CSS Font properties in
- font-style – normal|italic|oblique|initial|inherit
- font-variant – normal|small-caps|initial|inherit
- font-weight – normal|bold|bolder|lighter|number|initial|inherit
- font-size – medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family – family-name|generic-family|initial|inherit
CSS Test Shadow property for
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>
Examples
Here are the following examples mention below
Example #1
With the help of the
<!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
Das obige ist der detaillierte Inhalt vonHTML-Navigationselement. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
html5 firefox css chrome safari html xhtml for Length Attribute Property Event Generic number this ul word
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML-Navigations-TagNächster Artikel：HTML-Navigations-Tag