Elemen Nav Html

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

<nav> ... </nav>

CSS

nav{
--your css code—
}

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>

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.

<title>HTML Nav tag</title>


<header>
<h1 id="About-Us">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>

Output:

Example #2

HTML Tag helps the users navigate to the main sections of the website.

<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>


<h1 id="Example-of-the-HTML-nav-tag">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>

Output:

Example #3

Tables of contents and menus are good examples of

HTML element.

<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>


<h1 id="Dropdown-menu-with-the-HTML-nav-tag">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="#%22">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="#%22">Design</a>
</li>
<li>
<a href="#">Excel</a>
</li>
<li>
<a href="#">Others</a>
</li>
</ul>
</li>
</ul>
</nav>

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!