本文主要包含导航菜单,分割线等相关知识,佚名 希望在学习及工作中可以帮助到您
写这篇啰嗦的文章,缘由来自于Jorux Notebook的《什么是Semantics?》文章。
实际上,从《网站重构》一书开始在国内流行之后,Zeldman提出的语义化标记就已经在一定程度上流传开来。在抛弃table布局页面之后大家突然发现,原来这还不够,随意地使用<p>或者<div>来进行布局实际上和table布局一样的糟糕。
Jorux的例子(如下):
我是老大 | 我是不好意思说 | 老三 | 老四在这里 | 老幺
Jorux指出,在这种极为普遍的导航样式中(通常是用于网站底部的信息导航,100个网站里有90个采用这样的模式),我们应该使用无序列表,而不是下面这种:
1: <p>
2: <a href=”home.html”>首页</a> |
3: <a href=”about.html”>关于</a> |
4: <a href=”blog.html”>博客</a> |
5: <a href=”message.html”>留言</a> |
6: <a href=”album.html”>相册</a>
7: </p>
甚至是使用了<ul>,但是依然将修饰线条作为内容元素的写法也是五十步笑百步:
1: <ul>
2: <li><a href=”home.html”>首页</a></li>
3: <li>|</li>
4: <li><a href=”about.html”>关于</a></li>
5: <li>|</li>
6: <li><a href=”blog.html”>博客</a></li>
7: <li>|</li>
8: <li><a href=”message.html”>留言</a></li>
9: <li>|</li>
10: <li><a href=”album.html”>相册</a></li>
11: </ul>