深入css结构的探讨 如何运用div和span才是合理的!

  关于div,说法很多。把div看成是布局元素这种观点我想是最多的,类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等,太多了,还有不少人延用Dreamweaver的定义,称div为层,按Photoshop的层的概念来使用……有朋友干脆就直接称div和span为辅助布局元素。
  怎么说呢?虽然我很想说对div类似的这种认识是错误的,div不是一个布局元素,没有一个tag是用来布局的,但是我是对的吗?我也不知道。几乎所有人对div的宣传都是布局,不管是'民间’的还是'官方’的,但是如果我们找根源,中文中,div是一个结构化标签,是一个块级元素。好吧,我们首先看看div拥有的语义,division(分隔),按语义它的作用是将两个部分分隔开来。然后我们再回到w3去看看怎么定义div和span的:The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
  注意到我上面加粗的一句话了吗?W3可没说是 for layout,而是for structure,是结构!因为分隔从而产生(定义)一个代码结构。我想,结构和布局应该是两个概念吧。或许,因为table确实被用于布局了,所以这种根深蒂固的布局思路又自然而然的转嫁到div上,我曾在很长一段时间里也是这么理解的。但是,现在我要说,这绝对是一个错误并且,这是极度严重的错误!!!这纯粹个人观点个人理解,自己取舍好了。
  为什么严重?理解的错误直接导致的就是使用的错误。因为如果按照这个思路,把div作为布局元素使用,那么我认为:
  你永远无法固定xhtml!永远陷在css的怪圈中!永远不会去思考和理解结构!永远擦不干净table烙下的痕迹!永远无法接近神(貌合神离的神哈,呵呵)……
  或许把div称为布局元素还是为了更好的推行标准,但是却将人们从一个错误带向了另一个错误。两年前我刚接触标准时就在《重构之美》首篇中迷惑过关于改版的事情,虽然随着理解的深入好像有了突破,在我写下xhtml后不变动,然后通过css的技巧来完成新版面。比如像著名的csszengarden。但是很快我又有新的迷惑,一个人这样做好像没什么问题,团队呢?比如如果同样的内容,设计成两个版式,然后交给不同的两个人来写xhtml,会一样吗?就像如果把csszengarden的形式颠倒一下,基于同一份数据先做好100个设计稿,让100个人按照这个设计稿写100份xhtml,会一样吗?我想按照div布局模式,对于同样的版式,不同人不同的页面分析都会产生不同的xhtml,更何况不同的版式呢?但是既然表现与结构无关,那么同样的内容不应该有2份以上的xhtml。不要小看这个问题,对于团队中前后台的有效分离与快速协同,这是关键!我在培训中提出一个观点:最理想的境界是前台闭着眼睛都能知道后台输出的是什么样的xhtml结构代码。那么问题出在哪里?div布局!尤其是在理解了h系列标签不合理之后,体会更深刻。

时间: 2024-09-15 05:49:16

深入css结构的探讨 如何运用div和span才是合理的!的相关文章

《Web前端开发精品课 HTML与CSS进阶教程》——1.3 div和span

1.3 div和span 对于div和span这两个元素,不少新手也不知道它们之间有什么区别,使用起来也很随便.因此,这里有必要简单介绍一下. div和span没有任何语义,正是因为没有语义,这两个标签一般都是配合CSS来定义元素样式的. div和span区别如下. (1)div是块元素,可以包含任何块元素和行内元素,不会与其他元素位于同一行:span是行内元素,可以与其他行内元素位于同一行. (2)div常用于页面中较大块的结构划分,然后配合CSS来操作:span一般用来包含文字等,它没有结构

div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢

问题描述 div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢 div+css做html的布局,请问div和span有什么区别?span不能做布局么?table呢 解决方案 div元素做出来的效果是盒子模型:span元素是用来凸显某些关键字的,做不了布局:table元素可以拿来布局,但是不推荐,因为在网页加载的时候很慢,必须全部加载好了才显示出来. 解决方案二: html分块级元素 ,行内元素,行块元素. 块级元素是可以有宽和高的,默认占一行,最先的

深入CSS结构:div再议以及对span的迷惑

css 修整一个月,我又回来了,好吧,咱继续聊. 上篇文章中主要否定了使用div进行布局这种说法,提出div应当用于组织代码结构,现在我们再深入一点,div拥有语义吗?这个问题前段时间在研究群里曾激烈争论过,当时米随随发问:"什么是语义化WEB,div是什么?"小毅答曰:"DIV表示无意义容器."我说:"否定."然后旁边有人嘀咕:"...又要打起来了."我大笑着进入战斗状态,结果迅速被围攻了.呵呵,总是和主流格格不入的我又一次

深入CSS结构:合理运用div和span

css 特意上网搜索了一下,关于div,说法很多. 把div看成是布局元素这种观点我想是最多的,类似有"用div代替table进行布局"."实战CSS+DIV布局"等等等等,太多了,还有不少人延用Dreamweaver的定义,称div为层,按Photoshop的层的概念来使用--有朋友干脆就直接称div和span为辅助布局元素. 怎么说呢?虽然我很想说对div类似的这种认识是错误的,div不是一个布局元素,没有一个tag是用来布局的,但是我是对的吗?我也不知道.几乎

初学者用div+css结构写静态网页的几个误区

网页的制作中对于用div和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用div和css结构还有很多误区,这些误区也是我曾经经历过的并且被"老鸟"指正的地方,所以总结下来分享给大家,希望对写网页有所帮助. 1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数

初学者用div+css结构写网页的几个误区

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网页的制作中对于用div和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用div和css结构还有很多误区,这些误区也是我曾经经历过的并且被"老鸟"指正的地方,所以总结下来分享给大家,希望对写网页有所帮助. 1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来

深入学习CSS2.0结构,再谈div、span的困惑

css 使用div进行布局,提出div应当用于组织代码结构,现在我们再深入一点,div拥有语义吗? division(分割),对了,前段时间浏览w3schools时,看到它是这样定义div的:The div tag defines a division/section in a document. 我想我对div的理解是没错的.在文档中定义一个分割或者节点.我说div用于模块化页面内容,实际上从代码结构角度是展现xml化的节点结构.除了定义一个节点以外,div目前还用于定义一个分割,产生具有结构

深入学习网页技术CSS,再谈div、span的困惑!

css|网页 使用div进行布局,提出div应当用于组织代码结构,现在我们再深入一点,div拥有语义吗? 这个问题前段时间在研究群里曾激烈争论过,当时米随随发问:"什么是语义化WEB,div是什么?"小毅答曰:"DIV表示无意义容器."我说:"否定."然后旁边有人嘀咕:"...又要打起来了."我大笑着进入战斗状态,结果迅速被围攻了.呵呵,总是和主流格格不入的我又一次站在主流的对立面.我还是不赞成将div视为无意义容器.容器这个

dw括号里面的宽度-css宽度问题,明明没有规定div的宽度,但是在DW里面显示是有宽度的

问题描述 css宽度问题,明明没有规定div的宽度,但是在DW里面显示是有宽度的 有时候写代码,明明没有规定div的宽度,但是在DW里面显示是有宽度的,如图,浏览器测试一切正常,宽度显示也是100%,但是还是想知道为什么在DW里面就会有括号显示其他宽度.有时候明明规定了宽度大小,括号里面也会显示另一个宽度,有大神知道原因么? 解决方案 你那不是引了一个class吗 解决方案二: 网页是有默认宽度的!!!!!!