Nav标签_html/css_WEB-ITnose
nav
nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进
元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用 元素是最恰当的，而不需要 元素。一直以来，我们都习惯用如下这种方式来定义导航条：
<nav><ul><li><a href="index.html">Home</a></li><li><a href="/about/">About</a></li><li><a href="/blog/">Blog</a></li></ul></nav>
下面是W3C给出的一个代码示例：
<body><h1 id="The-Wiki-Center-Of-Exampland">The Wiki Center Of Exampland</h1><nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul></nav><article> <header> <h1 id="Demos-in-Exampland"> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1 id="Public-demonstrations">Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1 id="Demolitions">Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav
nav并不是为了表示所谓导航栏，而是表示"导航性质的内容"。语义上，导航是跟内容无关的，比如到首页的链接，到下一篇文章的链接，到其它栏目的链接等等，但是如果是内容本身所引述的的其它文章的链接，那么就不宜放在导航里面。
HTML5 里 section article 什么区别？header footer nav 该怎么理解？
HTML5 很多新的元素容易产生误解，其中有一部分原因是因为有些元素本身有歧义，所表达的语义在规范中也是在不断修正的。
并不是指视觉上的导航栏，而是表示带有导航性质的内容，准确的说： 元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分。需要注意以下几点：
并不是所有的链接都要放到 nav 元素里面，该元素内应包含用于构成主要导航区块的部分。举个反例，通常页脚有链接列表链接到网站的其他页面，比如：服务、首页、版权页。这种情况下，仅仅用 footer 元素就够了，没必要使用 nav 元素。
如果nav 元素里面的内容描述的是一个项目列表，那就应该用列表标记（ol,ul等）帮助理解（增强语义）和导航。
用户代理（如屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。
所以通常一个页面导航可以这样写：
<nav><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></nav>
或者：
<div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></div>
nav 元素还可以用在以下场景：
html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？
@丁小倪 的说法有点偏激了。nav元素是区块内容（sectioning content），也就是会最终影响文档大纲（outline）生成的元素。它仅仅反映其内容包含导航，但并没有表达其内容的形式。导航内容可以是一个链接的列表，也可以是一段自然文本中内嵌了导航链接。
按 W3C 对 nav元素的描述（
the nav element
）中给出的适用场景例子，我简化一下，用法可以是：
<nav><ul><li><a href="/home">Home</li><li><a href="/about">About</a></li><li><a href="/links">Links</a></li></ul></nav>
也可以是：
<nav><h1 id="Navigation">Navigation</h1><p>Welcome to my website. To see latest blog posts, please go to <a href="/blog">my blog</a>. You can find my books and papers in the <a href="/publications">publication</a> section. If you are interested in my work, please contact me by fill in the contact form <a href="/contact">here</a>.</p></nav>
如果内容是列表，那用ul>li的方式也是很合适的，并不能说滥用。一个列表并不会因为它被放在 nav 中就不是列表了，这是内容本质的问题。nav相比 ul从语义上来说，抽象层次更高，因为它甚至已经与内容的组织形式解耦了。
而对于 dd、dl、dt，你可以把它看成一个名值对的列表，常与 dfn元素一起使用，比较合适的场景是元数据的表达、词典的词条等等。@赵望野 的说法也有点问题，dt与 dd并不需要成对出现，它们是多对多的映射（
dl element
）。可以看下 HTML5 Doctor 上的这篇文章：
The dl element
要想对 HTML 元素有更深入的理解，我个人比较推荐结合 HTML5 Doctor 上的文章和 HTML5 规范来阅读。
做导航栏为什么用ul>li，而不用dd dt dl?
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
