当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 熟手的html编写风格与原因分析

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 熟手的html编写风格与原因分析


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-20   浏览: 101 ::
收藏到网摘: n/a

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

<ul><li><a href="#">收集分享</a></li></ul>

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

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

<p id="breadcrumbs"><a href="#">首页</a> » <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)
miaobao02
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 对 其他标签元素
miaobao03
给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>

中文原文:我的5个html编写偏好
英文原文:My Top 5 HTML Coding Preferences