睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

符合标准的导航的三种html结构

作者:睿美印象网站建设工作室  发布日期:2012-10-04
    蓝色论坛上看到的一个帖子,是关于怎样写符合标准的导航的。觉得很有意思。又让自己长了见识。贴出来大家一起学习。
   第一种法案:
  
 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了。
     

转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美