Rumah > Artikel > hujung hadapan web > Elemen Nav Html
Elemen Nav Html
- WBOYasal
- 2024-09-04 16:24:13751semak imbas
Elemen navigasi
Nota:
- Semua pautan yang disebut dalam dokumen HTML tidak diletakkan di dalam
- Elemen
- Kedua-dua teg Mula dan Tamat diperlukan untuk teg Nav dalam HTML5 iaitu
Sintaks:
HTML/XHTML
<body> <nav> ... </nav> <body>
CSS
nav{
--your css code—
}
Penggunaan
Atribut Khusus Teg
Tiada atribut khusus hadir untuk digunakan dengan
Atribut Global
Seperti semua teg HTML lain yang ada,
Berikut ialah atribut global:
- Onabort
- pada autolengkap,
- onautocompleteerror,
- pada kabur,
- batalkan,
- oncanplay,
- oncanplaythrough,
- berubah,
- onklik,
- dekat,
- pada menu konteks,
- oncuechange,
- ondblclick,
- ondrag,
- ondragend,
- ondragenter,
- keluar keluar,
- ondragleave,
- ondragover,
- ondragstart,
- ondrop,
- perubahan ketahanan,
- kosongkan sekali,
- selepas berakhir,
- kesilapan,
- onfokus,
- onput,
- tidak sah,
- onkeydown,
- tekan kekunci,
- onkeyup,
- memuat,
- data dimuatkan,
- metadata dimuatkan,
- mulakan muat,
- onmousedown,
- masuk tetikus,
- onmouseleave,
- onmousemove,
- onmouseout,
- atas tetikus,
- onmouseup,
- onmousewheel,
- jeda,
- permainan,
- bermain,
- sedang berjalan,
- onratechange,
- dimulakan semula,
- mengubah saiz,
- onscroll,
- dicari,
- sedang mencari,
- semula pilih,
- pameran,
- seterusnya,
- dipasang,
- serah diserahkan,
- digantung,
- kemas kini pada masa,
- ontogol,
- pada perubahan volum,
- Menunggu
Atribut Acara
Tiada atribut acara hadir untuk digunakan dengan
Sifat pemformatan teks CSS dalam
- Warna teks
- Penjajaran teks
- Teks-hiasan
- Teks-transformasi
- Ketinggian garis
- Arahan teks
- Bayang teks
- Jarak perkataan
Sifat fon CSS dalam
- gaya fon – biasa|italik|serong|awal|warisan
- varian fon – biasa|huruf besar kecil|awal|warisi
- berat fon – biasa|tebal|lebih terang|lebih ringan|nombor|awal|warisi
- saiz fon – sederhana|xx-kecil|x-kecil|kecil|besar|x-besar|xx-besar|lebih kecil|lebih besar|panjang|awal|warisan
- font-keluarga – nama-keluarga|generik-keluarga|awal|warisi
sifat CSS Test Shadow untuk
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>
Contoh
Berikut ialah contoh berikut yang disebut di bawah
Contoh #1
Dengan bantuan
<!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
Atas ialah kandungan terperinci Elemen Nav Html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
html5 firefox css chrome safari html xhtml for Length Attribute Property Event Generic number this ul word
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tag navigasi HTMLArtikel seterusnya：Tag navigasi HTML