(转)http://www.qianduan.net/labels-id-or-class.html
想谈一下几个基本的HTML问题,都是围绕着应该怎样使用HTML。
1. 多用有语义的标签,少用div和span,避免使用没有class的div和span。
设想一下HTML的世界最初只有div和span这两个标签,其实网页依然可以写得出来。更多标签的出现,其实是为了替代利用率高但不好书写的 <div class=”{tagname}”> 和<span class=”{tagname}”> 来的。
想再接着多说一句的是,在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的,像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单,定期统计一下最常用的class和id,然后取前几名作为新的标签名就行了。
上周还有人在微博上感慨那个“史上最牛的HTML代码”:
1
2
3
4
|
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
|
再过几年它真的也许会消失的。
反过来思考也可以,尽量使用有语义的标签名,实在想不出来合适的标签名了,再用div然后起个class或id。这样的思路也不错。
2. 不要滥用class而回避id,该出手时就出手。
和问题1同理,设想一下HTML的世界最初只有class没有id,其实网页依然可以写得出来,语义依然表达得出来。无非就是会出现很多特殊的class呗。因此,我们也很好理解,id的出现,就是可以和class一起协作,使某些语义即使没有现成的标签可以表示它,但依然可以把一般性和唯一性完美的结合在一起。
这里驳斥一个观点:“尽量都使用class,因为控制样式的时候class的优先级是同级的,id的优先级更高,它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题,所谓的“平衡”是不存在的,也没有必要去刻意维护,通过id来表示的内容一定是相对特殊的,优先级自然高一些,这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式,如oocss里的基础样式,或很多网站都会有common.css文件或general.css文件,里面的东西尽量用class没问题。
另一个更重要的理由是,在HTML5里,除了id和class这两个特性可以控制样式之外,还可以通过特性选择器来定义样式,类似E[attr="..."]的写法。我们会发现可以控制样式的方式越来越灵活,选择越来越多。这是Web发展的必然趋势。当其他人已经在用id/class/data-*/tagname对样式展开多重维度攻势的时候,我们实在没有必要把自己还关在class的世界里。
3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。
比如两列布局的左右侧多半是正文和辅助信息的关系,那么就不建议用class=”left”和class=”right”而是倾向于class=”main-content”和class=”sidebar”,或者直接用article和aside。
在自适应Web设计(responsive web design)如火如荼的今天,页面上的某个元素处在网页什么位置更像是个变量,所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天,你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了,right变成了底部通栏,这都是很正常的变化。
实在没什么语义的,比如为了给IE加圆角而增设的标签,或清除浮动用的额外的标签,再或者是基础样式的,和具体内容无关的,再用div加表象的class来描述。
4. 尽量避免表示纯样式的class或id。
比如class=”f14 red”。印象中网上有很多拙劣的例子,也有很多深刻批判这种用法的文章,我想说的是,如果你非要这样改样式,那不如直接写内联style来得直观。
最后想说的是……
互联网是一个快速发展的领域,它的快速发展甚至让人们忘却了很多传统领域的停滞不前。在这样的领域里工作,勇敢尝试,关注新技术,把握新趋势是如此的重要。不要拒绝新事物,不要被不思进取的人拖累,不要对大千世界失去好奇心和求知欲,方可永葆青春。
原文地址:http://jiongks.name/blog/html-or-id-or-class/
原作者:勾三股四
分享到:
相关推荐
一个提供和ID3v1和ID3v2读取或修改的类,是ID3作者自己写的一个非常不错的类,采用C#编写,直接调用即可,非常方便,欢迎下载!
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用...
代码片段: <div class="label-selected"> 展开标签库 收起标签库 <input type="hidden" name="label"> </div>
调用标签名: {PE.Label id="图片一列式栏目上下循环"/} 数据源调用标签名: {PE.DataSource id="cone" datasource="图片一列式栏目上下循环" /} 标签分类: 栏目类 标签文件大小: 3K 更新时间: 2010/3/29 9:...
<div class="plus-tag tagbtn clearfix" id="myTags"> <div class="plus-tag-add"> <form id="" action="" class="login"> <ul class="Form FancyForm"> <span class="label">我的标签: ...
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。 4,在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反,它先...
该py脚本从xml文件中提取...class_id center_x center_y w h 并存入txt文件 转换后可直接用于yolov模型训练 (另有json转txt和批量修改文件格式的资源见主页) 下载后按脚本中注释改下xml,txt,images各自路径即可运行
<div class="tagCon clearfix" id="tagcon"> <div class="addBox clearfix" id="addBox"> <input class="" type="text"> 添加 这是一份jQuery输入关键词生成标签,需要的朋友可以下载使用
下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了
摘要:脚本资源,jQuery,表单验证插件,日历插件 KooTeam基于标签的表单验证插件-标签对象支持class和id,示例中还包括有日历插件。使用说明: 1.页面中引入jquery.js库和koo.js 2.验证标签对象可以是id或class两...
<div class="banner">{PE.Label id="自设内容" nodeid="{PE.Label id="取得第N级父节点ID" nodeid="<xsl:value-of select="$currentId"/>" depth="1"/}" num="1" /} </div> <div id="nav"> <a class="home" ...
<DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容 <DIV class=tagContent id=tagContent2>第三个标签的内容</DIV></DIV> function selectTag(showContent,selfObj){ // 操作标签 var tag = ...
该py脚本从json文件中...class_id center_x center_y w h 并存入txt文件 转换后可直接用于yolov模型训练 (另有xml转txt和批量修改文件格式的资源见主页) 下载后按脚本中注释改下json,txt,images各自路径即可运行
(data,key,index) in datas' v-on:click=addClassFun(index) v-bind:class='{class1:index==qwerqwre}'>{{data.data}} [removed] new Vue({ el: '#app', data: { datas: { data1: { data: 测试1, ifAdd: 0 }, data2...
div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则,请大家参考一下: 首先讲一下div+...
DVI+CSS常用布局标签,注释,id,class
o @IdClass o @Inheritance • J o @JoinColumn o @JoinColumns o @JoinTable • L o @Lob • M o @ManyToMany o @ManyToOne o @MapKey o @MappedSuperclass • N o @NamedNativeQueries o @NamedNativeQuery o @...
为了更方便的操作页面中标签,就需要给这些标签标识一个身份牌,所需用到的属性有:name、id、class,它们的具体格式、应用场景及其特性如下,感兴趣的朋友可以参考下哈
public class Activity01 extends TabActivity { //声明TabHost对象 TabHost mTabHost; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ...
我们可以使用标签的CSS属性爬取择我们想要的一个或者多个标签,如class(类)属性、id属性、src属性等。 为了方便演示标签的选择,我们使用书中作者特别准备好的爬虫演示网站为例...