做导航栏为什么用ul>li,而不用dd dt dl?
Release: 2016-06-07 08:42:37
Original
2993 people have browsed it
回复内容:
@丁小倪 的说法有点偏激了。
元素是区块内容(sectioning content),也就是会最终影响文档大纲(outline)生成的元素。它仅仅反映其内容包含导航,但并没有表达其内容的形式。导航内容可以是一个链接的列表,也可以是一段自然文本中内嵌了导航链接。 按 W3C 对 元素的描述(http:// dev.w3.org/html5/spec/t he-nav-element.html#the-nav-element )中给出的适用场景例子,我简化一下,用法可以是:
<code class="language-html"><span class="nt"><nav></nav></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"/home"</span><span class="nt">></span>Home<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"/about"</span><span class="nt">></span>About<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"/links"</span><span class="nt">></span>Links<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</code> Copy after login
其实导航用ul>li本身就是个错误,根本不是列表项目,就是个链接而已。国内已经用泛滥了,好多新人也被误导,不要想那么复杂。
html5的
才是导航标签语义化上真正的实现,nav>a足矣。
比较赞同 @顾轶灵的说法。dl dt dd 是名值对,适用场景如:课程表、日程表等有值的列表。而导航本身就是一个包含多个链接的无序列表,是符合ul>li语义的。html5中标签对于导航列表的语义化更准确,详见 @一丝html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写?
从语义化的角度考虑,dl(Definition Lists) 标签中的 dt 和 dd 是要成对出现的。Dt 是 Definition Term 即定义,dd 是 Definition Description 即解释,所以语义上并不符合「导航」。另外从页面结构考虑,成对出现的形式显然也不符合导航的常见形式。
先发个link 语义化你的HTML标签和属性http:// bbs.blueidea.com/thread -2658231-1-1.html dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。 所以不适合做列表。另外用dl dt dd的话结构怎么办。 把dl当dd一样用?如果无需考虑代码的可维护性我觉得简单的导航就用p>a就合适了. 如果用html5简单的就直接nav>a了
导航栏里面的element都是无序的list item时应该用ul>li, 如果需要解释可以用dl>dt>dd(谁的导航栏又需要有解释呢?又不是生词表)。 同意大家说的直接nav>a。
ul li 就是无序列表,导航本身是可以用无序列表来表现的。dl dt dd,这种定义列表的方式,用在这里对于语义化标签不是很恰当。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
2024-10-22 09:46:29
2024-10-13 13:53:41
2024-10-12 12:15:51
2024-10-11 22:47:31
2024-10-11 19:36:51
2024-10-11 15:50:41
2024-10-11 15:07:41
2024-10-11 14:21:21
2024-10-11 12:59:11
2024-10-11 12:17:31