首页前端开发HTML熟手的html编写风格与原因分析

熟手的html编写风格与原因分析

时间2024-01-27 04:07:03发布访客分类HTML浏览516
导读:收集整理的这篇文章主要介绍了熟手的html编写风格与原因分析,觉得挺不错的,现在分享给大家,也给大家做个参考。 一、导航:无序列表 对 其它标签元素用最常用的“无序列表“来写导航的理由是显而易见的,它代表一列链接,这本身就有足够的...
收集整理的这篇文章主要介绍了熟手的html编写风格与原因分析,觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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)

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 对 其他标签元素

给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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

html

若转载请注明出处: 熟手的html编写风格与原因分析
本文地址: https://pptw.com/jishu/587699.html
IE6的BUG及修复 谓防患于未然的策略 XHTML标签的嵌套规则分析

游客 回复需填写必要信息