关于div，有很多话要说。 我想关于把div当作布局元素的看法最多的，比如“用div代替table进行布局”、“实用的CSSDIV布局”等等太多了，而且很多人还是沿用Dreamweaver的定义，Div叫做图层，是按照Photoshop的图层的概念来使用的……有的同学干脆把div和span称为辅助布局元素。
怎么说呢？ 其实我很想说，熟悉div是错误的。 div 不是布局元素，也没有使用标签进行布局。 我对吗？ 我也不知道。 几乎所有人对div的宣传都是布局，无论是“民间”还是“官方”，而如果我们寻找症结所在，在英语中，div是一个结构性标签css加图片，一个块级元素。 好，我们先来看看div有什么语义，除法（分隔），它在语义上的作用就是将两部分分开。 然后我们回到w3看看如何定义div和span：DIV和SPAN元素与id和class属性结合，提供了向文档添加结构的机制。这些元素将内容定义为内联（SPAN）或块级（DIV），但在内容上强加其他表示形式。
你有没有注意到我里面加粗的那句话？ W3没有说forlayout，而是forstruction，也就是结构体！ 由于分离而形成（定义）了代码结构。 我认为结构和布局应该是两个概念。 其实，既然表格确实是用来布局的，那么这些根深蒂固的布局思想自然就转移到了div上，这个我也了解很久了。 而且，现在我说，这绝对是一个错误，而且，这是一个非常严重的错误！ ！ ！ 这纯粹是个人观点、个人理解，由你自己决定。
为何严重？ 理解的错误直接是由使用的错误造成的。 因为如果按照这个思路使用div作为布局元素，那么我认为：
你永远无法修复xhtml！ 一直陷入css的困境！ 永远不要思考和理解结构！ 千万不要擦掉桌子上留下的痕迹！ 永远无法接近神
事实上，将div称为布局元素是为了更好地实现标准，但却导致人们从一个错误走向另一个错误。 三年前第一次接触标准的时候，我就被《重构之美》第一章的修改蒙蔽了。 尽管随着理解的加深有了突破，但是我写完xhtml后，并没有改变，然后我用css的方法修复了它。 完成新布局。 比如著名的csszengarden。 然后很快我又被骗了。 一个人做到这一点不成问题，但是团队呢？ 比如同样的内容，设计成两种格式，然后交给两个不同的人写xhtml，会一样吗？ 就像如果我们反转csszengarden的方法，先根据同样的数据制作100份设计稿，让100个人根据这份设计稿写100份xhtml，会一样吗？ 我想按照div的布局模式，对于同一个布局，不同的人分析不同的页面会形成不同的xhtml，更何况是不同的布局呢？ 由于表示与结构无关，因此相同内容的 xhtml 副本不应超过 2 个。 不要低估这个问题。 是球队中前后场有效分离、快速协调的关键！ 我在训练中提出一个观点：最理想的状态是前台闭着眼睛都能知道后台输出的是什么样的xhtml结构代码。 那么问题出在哪里呢？ div布局！ 尤其是了解了h系列的不合理标签之后，感受更加深刻。
我在下一篇文章中提出的结构应该分为两种：语义结构和代码结构。 了解了这两种结构之后，这样的div的好处就更清楚了，稍微动动脑筋就可以想到组织代码结构了。 所以我觉得hx标签的问题很经典，更不用说html了，虽然对于xhtml来说，大多数人还是关心如何表达，少部分人关心语义结构，很少有人关心代码结构，虽然 xml 有了，但是 xhtml 就不需要代码结构了。 而从hx系列的问题中，我们可以看到并延伸出W3对于代码结构还是很在意的。 从1.0、1.1到2.0，我们还是希望xhtml有像xml一样严谨的代码结构。 说到这里，我们再来看看xhtml2.0的另一个变化。 br 不再推荐，应该很容易理解。 br 的语义是形成截断（break），但实际功能是形成一条线，语义结构还是不同的。 完美，所以使用 line 而不是 thisisoline。 同样，br 根本没有代码结构。 如果我想提取第三行的数据怎么办？ 所以像 br 和 hr 这样的标签很可能会被丢弃。 我在想，xhtml1.x是W3的清晰表现，将人们拉向语义结构[Semantic]的方向，而xhtml2.0则是展示并突出代码结构[structural]。 呵呵，你觉得我想得对吗？ 废话。
回过头来看，如何组织呢？ 首先，对于一份设计稿，一定不要被设计蒙蔽和左右，只提取可见和不可见的数据，然后丢弃设计稿，先完成数据的语义结构，然后添加代码结构（添加结构到文档。），完成xhtml后，最后一步，再次拿起设计稿，打开css，还原。 其实实际做的时候不看设计稿是不可能的，而且怎么看呢？ 就说数据吧！ 还有一件事，什么决定了文档中数据的顺序？ 其实是由文件决定的，而不是由设计稿决定的。 例如，如果有两个栏目，新闻标题和一般新闻。 谁在前面，谁在后面？ 看起来，在文件中，标题应该在前面，将军应该在后面。 这是综合考虑UE（用户体验）和列的权重来确定的。 并且根据div布局，按照设计稿的上、下、左、前、右、后的顺序来确定。 这样，如果在设计稿中将综合新闻栏设计在左边栏，将标题设计在中间栏，那么文档中的综合新闻就会被移到标题里面去。 那么我打开一个标准的网站文档来浏览，如果文档的顺序是根据页面布局的顺序确定的上前下后、左前右后，那么我……作为特例，如果单个- 屏幕设计网站，标题和导航设计在页面底部，那么标题和导航不是在你的文档底部吗？ 这些是什么 UE？ 这不是废话。 div，div布局的缺点——文档结构仍然受到性能的影响！ 看起来有效！ ！
代码结构怎么做？ 根据下一篇文章的内容，大处使用h系列来定义大结构。 这么小的地方怎么办？ 这里涉及到div的另一个概念：块级元素。 哪些块？ 模块！ 使用div来模块化小地方。 例子：
示例代码[]
用户登录
针对【复杂形式】中提到的这个反例，我们来详细分析一下div在小地方是如何模块化使用的。 虽然很简单，但是h3/lable/p是一个语义结构。 之后，用户名和对应的输入框实际上是一个不可分割的整体。 那么好，div将其标记为块css加图片，对应的密码部分是相同的。 最后，两者与标题、按钮、div一起构成了一个密不可分的登录整体。 这有非常好的语义结构和代码结构。 良好的代码结构不仅可以轻松修复xhtml以便程序可以操作节点，还可以为css提供高度的自由度。 如上例的结构，我只需要给最外层的div一个class即可，比如“loginarea”。 所以：
我可以通过节点/路径层来定义它，如下所示：.loginarealabel{}.loginareainput{}.loginareadivlabel{}.loginareadivinput。 如果我需要垂直登录，只需要定义一个关键点：.loginareadiv{float:left}，如果是水平登录，则去掉这个关键点，模块化登录就这么简单。 这样也可以节省很多类，特别是对于一些看似复杂的结构。 虽然采用了模块化设计，但模块内部却很简单。 过去定义了一个路径，根本不需要类，不会造成风格冲突和干扰。 CSS可以用可读性也很好。 其实这里就会涉及到css的方法。 我认为css最重要的方法就是分析页面。 如果页面分析得好，写出来的css简单明了，还有更多的标签可以准备扩展。 否则，很多复杂、繁琐的类就会丢失。 认为标签不够，添加破坏结构。 复杂表单系统我写了48K的css，还没有优化。 所有图片总共只有5K，而且都是无损PNG格式。 整个系统有几十个大模块，有无限的菜单、树、选项卡、弹出窗口、复杂的表单、协议、框架、iframe、报表、控件集等等，还有各种乱七八糟的东西，css和图片都可用。 在50K之内完成。 这个项目是由四个程序员开发的，我一个人负责所有的前台。 三个月的时间，程序员们不关心任何与性能相关的部分，我只是玩玩就完成了。 到了中后期，快要交付给客户的时候，我还是觉得公司提供的设计不好，花了1天时间重新设计了一下，不到2天又写了一个css。 整个系统都变了，之前的设计并没有丢失。 当功能不变的情况下，界面会发生很大的变化。 不管系统有多大，一个人只需要几天的时间，程序员不需要操心。 这是 Web 标准的力量之一！ （因为是外网应用，所以我几乎没有考虑和照顾浏览器兼容性，没有必要，也是对速度的一种激励）
所以我想一行一列、两行一列等等的div+css布局代码在各大网站上都提前以各种形式列出来了。 很难说他们错了。 行和列的布局，然后合理的运用到自己的结构中。 而如果你根据他提供的代码来设置和添加内容，那么你就错了。 但话虽如此，你还关心每篇文章标题“布局”二字潜移默化下的结构吗？ 所以很多人都在思考css，所以这种善意的Web标准推动者还是错的，包括我在内，我2004年写的《重构之美》的代码示例部分更具欺骗性（好吧，过去，我再三指出代码没有参考意义，也是在文中填写的）。 今天怎么样？ 不知道，在路上，在路上……
写得好多了，span的合理使用，留待以后的更新！
CSS（即级联样式表）是一种用于样式化和低格式网页的强大语言。 当您深入研究 CSS 时，您可能会在 CSS 选择器中遇到逗号 (:) 和双引号 (::) 的使用。 这些符号具有特定的含义，用于定位 HTML 文档中的不同元素或状态。
理解伪类 (:)
我们首先来看看逗号(:)在CSS中的作用。 逗号主要用于选择伪类。 哪些是伪类？
在 CSS 中，伪类允许我们根据 HTML 结构中未明确定义的条件或状态来选择元素并设置元素样式。 此类条件可以包括用户交互，例如将鼠标悬停在元素上或单击链接，甚至包括存储在浏览器中的信息css 符号，例如访问的链接。
使用伪类，我们使用逗号 (:) 符号将它们附加到 CSS 选择器的末尾。 这是一个反例：
a:hover {
color: red;
}
在前面的代码片段中，我们定位 a（锚点）元素，并在用户将键盘悬停在其上方时将其颜色设置为黄色。 伪类 :hover 表示键盘光标位于元素上方的状态。
另一个常用的伪类是:visited。 它允许我们设计用户访问过的链接的样式。 这是一个例子：
a:visited {
color: purple;
}
在代码内部css 符号，a:visited 选择器将访问的链接的颜色设置为黄色。 这是一种有用的技术，可以向用户指示他们已经访问过哪些链接。
伪类可以与其他选择器结合使用来定位特定元素。 例如，伪类可用于选择其父级的第一个子级： :first-child:
li:first-child {
font-weight: bold;
}
在此反例中，li:first-child 选择器将其父容器中的第一个 li 元素作为目标，并为其应用 Arial 权重。
要探索 CSS 中可用的全部伪类，您可以参考 MDN 上的详细文档。
伪元素 (::)
现在我们已经了解了伪类，现在让我们将注意力转向伪元素，它们在 CSS 选择器中用双引号 (::) 表示。
伪元素使我们能够选择元素内容或结构的特定部分并设置其样式。 与根据条件或状态选择元素的伪类不同，伪元素用于在元素内创建附加元素。 这个伪元素并不存在于HTML结构中，而是由CSS生成的。
常用的伪元素是::before。 它允许我们在元素内容之前插入内容。 这是一个反例：
p::before {
content: ">> ";
}
在里面的代码片段中，p::before 选择器在每个 p 元素的内容之前插入字符串“>>”。 这些技术可用于向布局添加装饰或信息元素。
同样， ::after 伪元素在元素内容之后插入内容。 这是一个反例：
p::after {
content: " <<";
}
在这些情况下，p::after 选择器会在每个 p 元素的内容前面添加字符串“
