（转）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/
原作者：勾三股四
分享到：
相关推荐
总之，ID3Class是一个强大的工具，可以帮助开发者高效地管理MP3文件的元数据，无论是读取现有的ID3标签还是创建新的。通过这个库，你可以轻松地为你的音乐播放器、媒体管理软件或其他与音频处理相关的应用增添功能。
如果使用a标签跳转到指定的div区域，则只需要把a标签的href属性设置为“#divId”就好了，比如： 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
### 根据标签名字和标签的class属性得到对象 在Web开发中，经常需要通过JavaScript来操作DOM（Document Object Model）元素。一个常见的需求就是根据指定的标签名和类名来获取页面中的DOM元素。本篇文章将详细介绍...
vue点击给dom添加class然后获取含有class的dom <div class=chose-ck v-for=(item,index2...dt v-for=(item2,index) in item.childsCurGoods :key=item2.id :class=index==iac[index2]?'check':'' :id=item2.id :data-c
class_id x_center y_center w h ``` 3. **使用场景**： - **自动驾驶**：BDD100k数据集广泛应用于自动驾驶研究，因为其包含了各种实际道路情况。 - **环境感知**：目标检测技术可以帮助车辆或其他设备理解周围...
在这个3D标签云中，HTML5可能用于定义每个标签的基本结构，如`<div>`元素来表示每个标签，并通过`class`或`id`属性来标识它们，以便于JS和CSS操作。 接下来，我们探讨CSS在3D标签云中的应用。CSS3引入了3D变换，...
标签可以拥有属性，如`id`、`class`、`value`等，用于进一步指定元素的特性和行为。 ### JavaScript操作DOM 在给定的代码片段中，使用JavaScript来查找具有特定ID的所有`<input>`标签。这是通过调用`document....
从概念上理解，`id`更像是一个标签，用于区分不同的结构或内容，确保每个`id`在页面中具有独特性和可识别性。而`class`更像是一个样式模板，可以应用于任何数量的元素，无论这些元素是否具有相同的结构或内容。例如...
('<s:property value="#item.messageid"/>')" value="提交" class="btn3"> ``` 总的来说，Struts2的`s:iterator`标签结合`<s:property>`标签可以方便地处理集合数据，动态生成ID，使得在JavaScript中针对每个迭代...
1. 选择目标元素，可以是ID选择器`$("#id")`或class选择器`$(".class")`。 2. 使用`click()`函数绑定点击事件处理器。 3. 在处理器内部调用`toggleClass()`方法，传入要切换的class名称。 希望这个解释有助于理解...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用...
例如，在表单元素中，当需要通过label标签与input元素关联时，必须使用id来作为label的for属性的值。此外，对于需要通过URL锚点直接跳转到特定位置的场景，使用id也是唯一的选择。 在实际应用中，class和id通常需要...
2. **Class ID：** `classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"` 指定了一个ActiveX控件，这里是Windows Media Player。 3. **Param标签：** `<param>` 用于设置ActiveX控件的属性。 - `ShowDisplay` ...
而在DW中，掌握类（Class）、标签（Tag）、ID的选择与应用是网页制作者必备的基础技能之一。它们在网页布局和样式控制方面扮演着至关重要的角色。 #### 1. 标签（Tag） **定义：** - 标签（Tag），又称为元素或...
代码片段： <div class="label-selected"> 展开标签库 收起标签库 <input type="hidden" name="label"> </div>
很多人会有这样的疑问，为什么不把这个原则四归入原则一形成：【标签 #ID > #ID > 标签.class > .class > 标签选择符> 通配符】呢？或者将“标签 .class ”看作多更为具体的“ .class ”从而归入原则二呢？ 其实，...
<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">我的标签： ...
--self.classid--]：本栏目/专题 ID * [!--class.keywords--]：栏目/专题关键字 * [!--class.classimg--]：栏目/专题缩略图 * [!--class.name--]：栏目名 * [!--class.intro--]：栏目/专题简介 * [!--bclass.id--]：...