HTML代码编写的常用5个原则及原因

楼主^#

更多发布于：2012-01-31 23:19

[] 1

每一个编程人员在编写代码方面都因个人喜好而拥有自己的编写风格。我们没有必要都用相同的方式制作文档页面。有时决定用一个标签元素，而其他的编程人员可能选择其他的解决方案。在这篇文章里我列举了5个我最常用的编写偏好并说明我的理由。

一、导航：无序列表对其它标签元素

图片：58_3710_fa273a722206706.jpg

用最常用的“无序列表“来写导航的理由是显而易见的，它代表一列链接，这本身就有足够的理由应选择列表标签。但需要移除list列表的默认样式，以使其更有意义。
另一个好处可能超出你的想象：你建立一个list列表，同时里面添加a链接，用css可以控制定义list列表里面一串元素。

＜ul＞＜li＞＜a href="#"＞收集分享＜/a＞＜/li＞＜/ul＞

二、路径(面包屑)：p段落标签对 list列表标签

图片：58_3710_24a48d14be60491.jpg

我们可以一起探讨这个问题，如果你有其它更好的方式请告诉我们。就我个人而言，我更喜欢用如下的代码写路径（面包屑）。（然而我不经常使用＞＞符号）。

＜p id="breadcrumbs"＞＜a href="#"＞首页＜/a＞ raquo; ＜a href="#"＞关于我们＜/a＞＜/p＞网站路径（面包屑）在某一页面里面是有层级关系的，按道理说应该嵌套list列表来显示层级关系，但是如果你的list的列表里面只有一项的话你是怎么看待这种情况的？我个人感觉应该将网页路径(面包屑)显示在一行里面。

三、Button 对 Input
我已经记不清最后一次使用input type=”submit”是什么时候了，但我很久以前就不这么使用了，原因有两个：为什么button元素非要输入type=”submit”，botton就是它本身的元素，在代码里面botton很容易识别，并且用css很容易定义（不是所有的老版本的浏览器支持这个元素标签属性）。并且它也允许我们在它里面写入其他标签元素，这样扩展了我们对它可塑性的可能性。

＜button type="submit"＞Submit Form＜/button＞

四、留言：有序列表（ol）对无序列表（ul）

图片：58_3710_0006887dc7c43fd.jpg

list列表真的很棒！有3种不同类型（有序、无序和定义列表），它们各有各的用途。可能你对何时使用有序列表（ol），何时使用无序列表（ul）有所疑惑，因为它们什么时候使用都是讲得通的。留言有点像是教科书里面按时间的先后顺序排列整齐的例子，向上自然排序。每一个评论留言都对应着一个固定的时间，所以留言评论结构应该用有序列表（ol）。

＜ol＞
＜li＞
＜ul＞
＜li＞＜img src="path-to-gravatar.gif" alt="Author's name" /＞＜/li＞
＜li＞＜a href="url-to-authors-homepage.html"＞Author's name＜/a＞＜/li＞

＜li＞posted on date-goes-here＜/li＞
＜/ul＞
＜div＞Comment text goes here...＜/div＞
＜/li＞
＜/ol＞

五、label/input：div 对其他标签元素

图片：58_3710_ccc257f86e2fc07.jpg

给label/input外镶嵌父结构，什么标签元素才是最好的选择那？

＜label for="contactName"＞Your Name＜/label＞
＜input type="text" name="contactName" id="contactName" /＞使用恰当的标签代码在以前是可以探讨的，但现在我还是选择了用div来镶嵌label/input，label和与之相关联的被看做一个整体。div元素拥有很广的语义特性，同时它可以适应任何形势。

＜div＞
＜label for="contactName"＞Your Name＜/label＞
＜input type="text" name="contactName" id="contactName" /＞
＜/div＞