上一篇
下一篇
符合标准的导航的三种html结构
日期:2009-10-08作者:woniu
蓝色论坛上看到的一个帖子，是关于怎样写符合标准的导航的。觉得很有意思。又让自己长了见识。贴出来大家一起学习。
第一种法案：
Example Source Code
<ul class="nav">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
优点：相对有语义，多一个控制节点，可以灵活控制，实现二级菜单。
缺点：用户体验相对差些，UL的执行效率显然逊色于A标签。
第二种方案:
Example Source Code
<div class="nav">
<a></a>
<a></a>
<a></a>
优点：代码简洁，能实现一般类型的导航，页面执行效率要不UL迅猛。
缺点：语义相对差些，若需实现较复杂的导航需要嵌套额外的标签。
那是不是有更标准的更符合语义的做法呢？有人说可以用HTML5里新增加的<nav></nav>.
但就目前来看,等待HTML5的发布还为时尚早，再加上不同浏览器的支持程度，更是不敢恭维。
有没有更加合理的解决方案能够填补这个空白？ 有的！
第三种方案:
Example Source Code
<map>
<div>
<a></a><a></a><a></a>
</div>
</map>
map !W3C官网的写法！
W3C的说明是The MAP element may be used without an associated image for general navigation mechanisms.MAP元素可用于无关联的图像一般导航机制。
map具有地图、导航的特性，结合上面提到的第二个方案，这就是最佳解决方案。当然用map嵌套UL也是可以的，不过显然现在UL的语意就不是那么重要了。提醒大家的是map里面必须嵌套一层块级元素，因为map本身不具有此属性。
[原帖地址]
个人一直坚持的原则是：如果是一级导航的话用a。多级导航自然用ul了。
第一种法案：
Example Source Code <ul class="nav">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
优点：相对有语义，多一个控制节点，可以灵活控制，实现二级菜单。
缺点：用户体验相对差些，UL的执行效率显然逊色于A标签。
第二种方案:
Example Source Code <div class="nav">
<a></a>
<a></a>
<a></a>
优点：代码简洁，能实现一般类型的导航，页面执行效率要不UL迅猛。
缺点：语义相对差些，若需实现较复杂的导航需要嵌套额外的标签。
那是不是有更标准的更符合语义的做法呢？有人说可以用HTML5里新增加的<nav></nav>.
但就目前来看,等待HTML5的发布还为时尚早，再加上不同浏览器的支持程度，更是不敢恭维。
有没有更加合理的解决方案能够填补这个空白？ 有的！
第三种方案:
Example Source Code <map>
<div>
<a></a><a></a><a></a>
</div>
</map>
map !W3C官网的写法！
W3C的说明是The MAP element may be used without an associated image for general navigation mechanisms.MAP元素可用于无关联的图像一般导航机制。
map具有地图、导航的特性，结合上面提到的第二个方案，这就是最佳解决方案。当然用map嵌套UL也是可以的，不过显然现在UL的语意就不是那么重要了。提醒大家的是map里面必须嵌套一层块级元素，因为map本身不具有此属性。
[原帖地址]
个人一直坚持的原则是：如果是一级导航的话用a。多级导航自然用ul了。
[本日志由 woniu 于 2009-10-08 03:30 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 导航html结构导航写法符合标准w3c标准
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: 导航html结构导航写法符合标准w3c标准相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论