Rumah >hujung hadapan web >html tutorial >Tag navigasi HTML
Tag navigasi HTML
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
- 2024-09-04 16:24:011149semak imbas
HTML mempunyai banyak ciri untuk menyerlahkan teknologi bahagian hadapan kerana teg Navigasi ialah salah satu ciri untuk Versi HTML5. Dalam versi sebelumnya, Html mempunyai ciri yang berbeza, tetapi dalam Html 5, Navigasi menyokong Atribut Global dan Atribut Acara.
Sintaks:
Setiap dan Setiap teg Html mempunyai sintaks yang berasingan seperti kod berikut: sintaks asas untuk Teg Navigasi. Kami telah menggunakan
HTML
<nav> < a href="/" /> ------------------- </nav>
CSS
nav{
--some codes—
}
Bagaimana Teg Navigasi Berfungsi dalam HTML?
Pengguna menghantar permintaan iaitu selepas mengklik tab atau menu pada halaman web. Ia akan berpindah ke halaman lain supaya respons pelayan akan memaparkan halaman web hasil kepada pengguna. Seperti dalam HTML, ia akan memisahkan menu atau tab dalam GUI yang merupakan sudut pandangan pengguna dengan bantuan beberapa elemen html seperti
Satu dokumen halaman HTML mungkin mengandungi beberapa nombor pautan berdasarkan menu/tab halaman web. Dalam HTML, Navigasi secara amnya mengandungi dua jenis, iaitu Navigasi Mendatar dan Navigasi Menegak. Secara lalai, Navigasi Mendatar dimuatkan berdasarkan keperluan pengguna yang akan ditukar kepada Menegak atau beberapa jenis keperluan pengguna lain.
Rajah di atas ialah pemahaman asas skrin pengguna melalui pautan navigasi. Pengguna mengklik pautan utama melalui pautan halaman web penyemak imbas hanyalah teg Html, iaitu) ia akan melalui halaman web tertentu ia akan menjadi sama ada halaman sisi klien atau bahagian pelayan bergantung pada projek yang akan menunjukkan halaman Utama dalam skrin penyemak imbas pengguna.
Contoh Teg navigasi HTML
Diberikan di bawah adalah contoh Teg nav HTML:
Contoh #1
<html> <body> <nav> <a href="/home/">Home</a> | <a href="/contactus/">Contact Us</a> | <a href="/about us/">About US</a> </nav> </body> </html>
Output:
Contoh #2
<html>
<head>
<style>
nav {
border:2px;
background-color:#090;
color:green;
padding:5px;
}
n {
color:white;
font-size:10px;
}
.n1{
font-size:20px;
color:#090;
font-weight:bold;
text-align:center;
}
.n2 {
text-align:center;
color:#090;
margin:20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="n1">First</div>
<div class="n2">Second</div>
<nav>
<a href="/home/">Home</a> |
<a href="/contactus/">Contact Us</a> |
<a href="/about us/">About US</a>
</nav>
</body>
</html>
Output:
Contoh #3
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 50%;
width: 3;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.6s;
}
.sidenav n {
padding: 5px 8px 7px 22px;
font-size: 23px;
color: #818181;
transition: 0.6s;
}
.sidenav n:hover {
color: #f1f1f1;
}
.sidenav .close{
position: absolute;
top: 0;
right: 20px;
font-size: 18px;
margin-left: 40px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav n {font-size: 18px;}
}
</style>
</head>
<body>
<div id="first" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="cN()">×</a>
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">About US</a>
</div>
<h2>Sample</h2>
<span style="font-size:20px;cursor:pointer" onclick="oN()">☰ click</span>
<script>
function oN() {
document.getElementById("first").style.width = "300px";
}
function cN() {
document.getElementById("first").style.width = "1";
}
</script>
</body>
</html>
Output:
Jika dibandingkan dengan contoh sebelumnya, kami telah menggunakan beberapa animasi untuk navigasi untuk menarik pengguna.
Berbeza Jenis Menu Navigasi
Secara amnya, kami mempunyai beberapa jenis menu dan simpulan bahasa yang berbeza untuk dipertimbangkan dalam teg HTML seperti dan elemen (anchor), dan semuanya harus ditutup. Kebanyakan menu Navigasi boleh dibuat dengan senarai; kadangkala, sekatan antara muka akan digunakan berdasarkan kebergantungan pengguna.
Menu navigasi berasaskan senarai adalah seperti berikut:
- Menu Navigasi Dalam Halaman
- Menu Navigasi Tapak
- Menu Navigasi Konteks-Kontekstual
- Menu Navigasi Peta
- Penomboran
1. Menu Navigasi Dalam Halaman
Jadual atau kandungan untuk pautan satu halaman yang menunjuk ke bahagian lain yang berbeza pada halaman Web.
Contoh
<nav> <a href="/home/">Home</a> | </nav>
2. Menu Navigasi Tapak
Ia kemungkinan besar dan jenis menu biasa dalam halaman web. Ia ialah jenis menu tersuai atau ditentukan pengguna bagi tapak atau subset yang menunjukkan pilihan untuk dipilih daripada hierarki tapak.
Contoh
<nav> <ul> <li><a href="/home/">Home</a> </li> <li><a href="/about us/">About Us</a> </li> <li><a href="/contact us/">Contact Us</a> </li> </nav>
3. Menu Navigasi Kontekstual
Ia adalah pautan yang membina kandungan dokumen, dan ia menawarkan beberapa maklumat lanjut yang berkaitan dengan halaman semasa dokumen html. Contoh menu ini ialah Beberapa Artikel Berita, Laman web Perbankan; apa sahaja yang kita lihat dalam aplikasi halaman web mengandungi panel navigasi kita telah meletakkan kursor tetikus dalam tab atau menu. Ia akan dipaparkan seperti kandungan petua alat menu.
4. Menu Navigasi Peta Laman
Ia ialah menu yang kelihatan seperti menyekat pop timbul apa sahaja pengguna mengklik halaman yang dikonfigurasikan menu atau tab, atau mereka memerlukan beberapa pemalam tambahan untuk mengkonfigurasi tetingkap atau halaman baharu semua kandungan akan dipetakan dengan tapak yang sama. Kedua-dua Peta Laman dan carian tapak mempunyai set ciri dan tawaran yang berbeza dalam Html.
5. Penomboran
Dalam Penomboran, kadangkala kita telah melihat bahawa halaman web akan mengkonfigurasi dengan hujung belakang untuk set fail yang besar untuk dimuatkan di skrin hujung hadapan selepas pengguna mengklik pada menu atau tab. Menggunakan pilihan ini untuk berpecah kepada halaman yang berasingan. Jika dibandingkan dengan Navigasi, ia berbeza kerana ia biasanya memaut dengan hujung belakang dokumen yang sama, yang menyebabkan lebih banyak pilihan atau maklumat lanjut dipaparkan pada halaman web yang sama.
Kesimpulan
Akhir sekali, kami mempunyai bahagian kesimpulan di mana biasanya setiap versi html mempunyai set ciri yang berbeza. HTML 4 tidak disokong untuk
Atas ialah kandungan terperinci Tag navigasi HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!