Elemen navigasi tag di dalam dokumen HTML digunakan untuk menentukan blok pautan navigasi yang disertakan, sama ada dalam dokumen yang sama atau mana-mana dokumen lain. Contoh yang mempamerkan blok navigasi ialah indeks, jadual kandungan, menu, dsb. Dokumen HTML boleh mengandungi seberapa banyak yang diperlukan teg, seperti navigasi tapak, navigasi dalam halaman, dsb. tag juga digunakan untuk mengisytiharkan bahagian navigasi dalam dokumen HTML. Kebanyakan tapak web biasanya lebih suka mempunyai bahagian khusus untuk pautan navigasi, yang membolehkan pengguna menavigasi di tapak. Pautan ini boleh diletakkan dalam teg navigasi. Dalam topik ini, kita akan belajar tentang Elemen Nav Html.
Nota:
Semua pautan yang disebut dalam dokumen HTML tidak diletakkan di dalam unsur; ia hanya termasuk blok navigasi utama. Ia juga boleh digunakan untuk menentukan pautan dalam pengaki tapak web, tetapi tag biasanya digunakan dalam kes sedemikian.
Elemen HTML tidak dibenarkan bersarang dalam elemen.
Kedua-dua teg Mula dan Tamat diperlukan untuk teg Nav dalam HTML5 iaitu ……..
Sintaks:
HTML/XHTML
<body>
<nav> ... </nav>
<body> Salin selepas log masuk
CSS
nav{
--your css code—
} Salin selepas log masuk
Penggunaan tag
tag disewa untuk kawasan navigasi utama, seperti menu utama merentas bahagian atas halaman atau bahagian. Dokumen boleh mempunyai banyak elemen, iaitu satu untuk navigasi tapak, satu untuk navigasi dalam halaman, dsb. Pautan di dalam tag boleh menjadi kod dalam senarai ul atau boleh dikodkan sebagai pautan berasingan tanpa elemen ul. Teg ini membantu menjadikannya lebih mudah untuk membuat perkara seperti menu navigasi, menu pautan teks mendatar yang kemas atau perisian bacaan skrin bantuan untuk mengenal pasti kawasan navigasi utama dalam dokumen dengan betul.
Atribut Khusus Teg
Tiada atribut khusus hadir untuk digunakan dengan tag.
Atribut Global
Seperti semua teg HTML lain yang ada, teg juga menyokong atribut global dalam HTML5.
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 tag.
Sifat pemformatan teks CSS dalam tag:
Warna teks
Penjajaran teks
Teks-hiasan
Teks-transformasi
Ketinggian garis
Arahan teks
Bayang teks
Jarak perkataan
Sifat fon CSS dalam tag
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 tag
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style> Salin selepas log masuk
Contoh Berikut ialah contoh berikut yang disebut di bawah
Contoh #1
Dengan bantuan Elemen HTML, kita boleh menggunakan kumpulan pautan dalam satu elemen semantik yang membantu dalam membuat tapak web yang teratur.
<!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> Salin selepas log masuk
Output:
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> Salin selepas log masuk
Output:
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> Salin selepas log masuk
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.
Atas ialah kandungan terperinci Elemen Nav Html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
