今天在cnbeta上看到一片作者评论div+css的文章，标题为“DIV+CSS 请不要再出来忽悠人了！”，文章的大致内容如下：
<blockquote>今天，尽管提到DIV+CSS，还会有很多人热情高涨，但是我会对他摇头了：DIV+CSS不是一切，更不是某些人所谓的“神话”！创造神话的是CSS，不是DIV+CSS。我想，是时候纠正这个问题了。
CSS的要义，是各个标签要各尽用，盲目推崇DIV+CSS只会让小白误入歧途的。
1、DIV只是HTML最常用的标签之一
显然HTML并不只是一个DIV标签有用，每个标签都有它的用途，只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能，那么W3C早就把HTML精简了！
Table也不是一无是处，只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网页数据的表现上，是其他标签无法替代的，只是，它不适合用来做整个页面的布局。
2、代码的可读性
纯DIV+CSS的网站的代码的可读性无疑是非常差的，甚至table还可以通过tr和td来区分行和列，一堆DIV堆砌在一起，如果没有注释，你根本不知道某个部分是做什么用的。
3、语义化与结构化
现在，在开发CSS的时候，提的越来越多的是语义化，语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读，更加易懂，比如，.text_01{color:red} 就没有.text_red{color:red} 容易理解。
HTML同样如此，比如我们看到<ol>就知道这是个有序列表；看到<p>标签就知道这是一个段落，内容为文字；看 到<span>就知道这个是比<p>还小的文字单位；看到<h1>、<h2>之类的就知道他们是标题。
显然，全部是div的页面，是看不出来这些的。
页面的结构化亦是如此，比 如<div><div><div><div>…..</div>< /div></div></div>这样的代码，显然是很难理解其DOM结构的，但 是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那个结构要清晰很多。
相信做开发的人对代码的语义化和结构化的理解会更加深刻。
4、团队合作
可读性低、结构化和语义化差，团队的其他成员的学习和维护难度就会提高，这对于一个团队来说，是很浪费时间和精力的。
其实，DIV+CSS的说法，已经把我们从table带到了另外的一个极端，正确的网页设计不是一个标签雄霸天下，而是每个元素都使用合适的标签。
所以说，DIV+CSS要换一种说法了，(X)HTML+CSS不更合适吗？
请不要再特意提DIV了。小白们真的会把它当作宝贝的！
其实回头看看国内普及标准化的过程，已然走错路了，就在国外同行研究CSS Sprites和网格（Grid）等技术时，我们在做什么？就在国外CSS框架遍地开花的时候，我们在做什么？到现在我们还是只能去国外的东西，依然跟在别人后面。</blockquote>
作者提到的“每个元素都使用合适的标签”这一点，还是非常正确的！但作者说div+css的学习和使用者是走错了路，走了极端，这点我个人认为是有问题的，写出这类代码的人他应该只是处于过度阶段，对于xhtml的标签的特点和不是十分了解，以至于只能反复用到一些常用的标签，如作者提到的div标签，但随着对xhtml标签的理解逐步加深，他们慢慢认识到用合理的标签，不仅能让代码结构简化，而且还能是代码易读；
为了能让正处在这一过度阶段的朋友更好了解到xhtml标签，我简单介绍下各标签：
Document Outline
<!DOCTYPE>Version of (X)HTML
<html>HTML document
<head>Page information
<body>Page contents
PageInfomation
<base />Base URL
<meta />Meta data
<title>Title
<link />Relevant resource
<style>Style resource
<script>Script resource
Document Structure
<h[1-6]>Heading
<div>Page section
<span>Inline section
<p>Paragraph
<br />Line break
<hr />Horizontal rule
Lists
<ol>Ordered list
<ul>Unordered list
<li>List item
<dl>Definition list
<dt>Definition term
<dd>Term description
Forms
<form>Form
<fieldset>Collection of fields
<legend>Form legend
<label>Input label
<input />Form input
<select>Drop-down box
<optgroup>Group of options
<option>Drop-down options
<textarea>Large text input
<button>Button
Text Markup
<strong>Strong emphasis
<em>Emphasis
<blockquote>Long quotation
<q>Short quotation
<abbr>Abbreviation
<acronym>Acronym
<address>Address
<pre>Pre-formatted text
<dfn>Definition
<code>Code
<cite>Citation
<del>Deleted text
<ins>Inserted text
<sub>Subscript
<sup>Superscript
<bdo>Text direction
Tables
<table>Table
<caption>Caption
<thead>Table header
<tbody>Table body
<tfoot>Table footer
<colgroup>Column group
<col />Column
<tr>Table row
<th>Header cell
<td>Table cell
Images and Image Maps
<img />Image
<map>Image Map
<area />Area of Image Map
Object
<object>Object
<param />Parameter
分享到：
相关推荐
如果确实需要找到具有完全相同`id`的元素，应该重新考虑设计，确保每个元素的`id`唯一，或者修改代码逻辑，比如使用更精确的查询选择器。 ### 总结 在JSP或任何基于Web的技术中，通过JavaScript操作DOM来获取具有...
周期表中的每个元素都代表着一个HTML标签，这些标签分为不同的类别，如文本内容元素、行内元素、块级元素、表格元素、表单元素、多媒体元素等。例如，`<header>`和`<footer>`用于定义页面头部和底部，`<article>`和`...
每个元素都是一个`IHTMLElement`接口的实例，包含了元素的各种属性和方法，如`tagName`可以获取元素的标签名。 4. **处理元素信息**：在枚举过程中，我们可以根据需要获取和处理每个元素的属性，如文本内容、样式、...
在Android开发中，`merge`标签是一...优化UI布局是Android开发中的重要一环，也是每个开发者都应该掌握的技能之一。在实际项目中，结合`MergeOptimizeUI`这样的实践，我们能够不断优化我们的应用，使之更加高效、流畅。
- 使用`append()`方法添加新的标签元素，并且为每个已选标签的删除按钮绑定`click`事件，以便在用户点击时移除对应的标签。 - 可以使用`.val()`获取下拉菜单的当前值，`.detach()`或`.remove()`删除DOM元素，`....
5. **语义化**：尽管可以自由创建自定义标签，但应避免过度使用，确保每个标签都有明确的语义含义。避免仅仅为了样式或布局目的而创建新标签，这会降低代码的可理解性。 6. **Web Components**：Web Components是...
- **使用集合生成选项**：通过`collection`属性指定集合，每个集合元素都将转换为一个选项。 #### 五、HTML OptionsCollection 标签详解 `html:optionsCollection`标签是`html:options`的扩展版本，特别适用于从...
在XML或HTML结构中，一个元素可能包含多个子元素，每个子元素又可能有各自的文本内容。有时，我们可能需要提取某个父元素下所有子元素的文本，而不仅仅是单个元素的文本。XPath提供了多种方法来处理这种情况。 1. *...
1. **数据准备**：首先，你需要一个标签数组，其中每个元素都是一个对象，包含标签的文本和相应的权重。权重可以决定标签的大小。 2. **DOM操作**：使用`document.querySelector`或`document.querySelectorAll`来...
这可能是一个数组，每个元素对应一个标签页，包含了页面的引用和相关元数据。 3. **DOM操作**：在Web开发中，使用JavaScript进行DOM（Document Object Model）操作是必不可少的。我们需要添加、删除和修改DOM元素以...
这样，你就可以遍历这个对象，查看或处理每个属性： ```javascript for (var attr in attributes) { if (attributes.hasOwnProperty(attr)) { console.log('属性名:', attr, ', 属性值:', attributes[attr]); } ...
`<s:iterator>`标签会遍历集合中的每个元素，并为每个元素创建一个新的上下文，使得我们可以使用`<s:property>`标签来访问当前元素的属性。 此外，Struts2的标签库还提供了其他一些增强功能，例如条件判断标签`...
接着，为了展示这些标签，我们可以使用HTML的`<label>`元素，每个标签作为一个`<label>`，内含用户输入的文字。在JavaScript中，我们可以动态创建`<label>`元素，将其内容设置为用户输入的标签，并添加到页面的某个...
每个标签页页签代表一个独立的视图，而内容面板则承载与该页签相关的控件或内容。在C#中，我们通常使用`System.Windows.Forms.TabControl`类来创建和管理这些标签页。 以下是一些关于如何使用C#窗体标签页控件的...
对于集合中的每个元素，使用`${dpList.value}'/>`和`${dpList.key}'/>`来获取元素的`value`和`key`属性，然后将这些值作为参数创建一个新的`Option`对象。这个对象随后被添加到`<select>`元素的`options`集合中，...
在这个例子中，它被用来遍历`dassetDesktopForm.ndTypes`集合中的每一个元素，并将每个元素赋值给变量`ntyp`。通过这种方式，可以动态地生成下拉列表中的选项。 #### `<c:out>`标签 `<c:out>`标签用于输出表达式的...
3. 应用样式：通过遍历标签元素，为每个元素应用随机的CSS样式，如字体大小、颜色等。 4. 添加动画：使用jQuery的`animate()`函数，可以为标签添加滑动、淡入淡出等动画效果，增加视觉吸引力。 四、无规则布局策略 ...
8. **可触摸性**：确保每个标签都是可触摸的，可以通过设置`android:clickable="true"`和`android:focusable="true"`属性来实现。 9. **响应式布局**：为了适应不同屏幕尺寸，应确保标签控件能够良好地适应屏幕变化...
每个标签可以是一个`<div>`元素，设置合适的`display`属性（如`inline-block`）来实现流式排列。为了保持视觉一致性，可以设定统一的背景色、边框、字体样式等。同时，通过JavaScript或jQuery实现交互功能，比如点击...
Data-sources 元素包含一个或多个 Data-source 元素，每个 Data-source 元素定义了一个具体的数据源。 Data-source 元素 Data-source 元素定义了一个具体的数据源。这个元素可以出现零次或多次。Data-source 元素...