正确熟悉DIV+CSS机关

有不少网友在评论用到div+CSS机关这个说法，用来和table机关较量。it560以为现实上div不是用来机关的，div只是用来暗示一个其余元素都无法精确表达语意的一个块区，只有CSS是用于机关的，以是基础就不存在div+CSS机关这回事。反过来，table机关的时辰常常依靠于CSS界说一个单位格的机关属性，以是可以说是table+CSS机关。也就是说，我们接头的两种主流机关要领应该是纯CSS机关和table+CSS机关，假如你认为你在用的是div+CSS机关，那么有也许你也有强制症了。

接下来我们说说怎样举办纯CSS机关，由于CSS机关依靠于XHTML，以是我们先要说说怎样誊写一个CSS无关的XHTML。着实誊写CSS无关的XHTML并不难，固然你不能再仿佛誊写table机关代码那样齐集精神于最重的视觉结果上，但其难度也不外是中门生写作文那样。

中门生写作文怎样写呢？起首看看标题，然后想想整篇文章分为哪几个大的段落，每个大的段落说些什么，可以或许把你要说的对象说清晰。对付XHTML来说，这相等于用div把文档切割为几大块。这时辰你不要想着这些div将构建一个奈何的DOM啊、CSS怎样选择DOM中元素配置法则实现机关之类的工作，就或许分别一下文档的大地区就好了。

然后虽然是用一些常用的伎俩来示意感情可能论证题目，这在XHTML中就是用特定的元向来完成一些常见的信息组织。下面就是信息组织情势与元素的对应列表。

img
作为内容的图片是必然要放到img内里的，这没有更好的选择了。然而假如图片不是作为内容，而是作为修饰性的，则万万不要用img。对付非内容的图片，应该在CSS中引用，而不在XHTML中呈现。譬喻每一个导航链接有一个前导的箭头指示，那么这些箭头就应该通过CSS的background-image属性加上去，而不是直接作为img呈现。

a
这也是一个很是精确界说的元素，链接都必要行使它。或者已经有许多人健忘了a的本意是锚点，其拭魅这是一个异常有效的语义，你可以用它来标志文档中一些重要的引用位置。

ul, ol
ul和ol别离是什么意思呢？假如你答复不上来，却知道它们可以用来干什么，那证明你是被可视化器材宠坏了，要转换过来编写切合语义的XHTML必要先增补基本常识，这时辰你最好先找一些看起来很是基本很是全面的XHTML书本看看，由于没有踏实的基本你在上面构建更多的常识都是不平稳的。ul和ol着实别离代表unordered list和ordered list，也就是无序列表和有序列表。在语义上，它们都用于暗示一类并列相关的内容，譬喻我们去市肆购物之火线一张shopping list，上面要买的对象就是并列相关，在中文可以用顿号离隔那种。

苏息够了吧?下面继承看!

ul常用于导航条，由于导航元素切合上面所说的并列相关，树状导航布局还可以通过嵌套ul来表述。在这里，导航可所以我们常见的程度或竖直导航栏，乃至可所以舆图导航，譬喻在中国舆图上差异的省份热区着实是差异的li。假如我说，在主流赏识器上用户看到了中国舆图和可以直接点击省份热区，在不支持CSS的赏识器上用户能看到一份纯文本的省份名称列表，行使的是统一份XHTML，而这完全通过CSS实现，乃至不依靠于JavaScript，你信托吗？

其它，假如你要表现一个图库的缩略图，这些图片也可以放在ul中哦，由于这些图片也是并列相关。它们可以自动先横排，排满一行就自动排第二行，CSS可以让他们乖乖列队，而不需仿佛table那样把图片定死在一个格子里。着实table用于机关就犹如用牢狱关押内容一样，把内容锁死在一个格子里不让它处处乱跑；切合语义的XHTML就犹如一个开放的舞台，你只要分明操作CSS的法则，内容就天然会找一个得当示意本身的处所站着。

dl
没有传闻过dl吗？由于那些可视化器材天生的代码中从来不会呈现dl？dl的意思是definition list，也就是界说列表。它包括的子元素不是li，而是dt和dd，也就是definition term和definition description。dl自己计划为字典单词与表明列表这样的语义，譬喻：
<dl>
<dt>hehe</dt>
<dd>哈哈</dd>
<dt>girl</dt>
<dd>it560</dd>
</dl>

假如你必要暗示的的语义也是相同的，一个列表既包括界说也包括表明，那么也可以思量用dl。

form, input
form也就是表单啦，这没什么好说的，就算再掉臂及语义的人在誊写XHTML时也会思量到它与各类input对提交数据的影响，从而警惕审慎。

table
table天然是用来暗示表格的，这不空话！假如是数据表，虽然可以用table来暗示，但假如不是，就最好别用table了。

人名列表呢？譬喻一个3行4列的人名列表。假如这12小我私人名是并列相关，我提议你用ul和12个li来暗示，再通过CSS来让它们在一行内并列表现多个。手刺表呢？也就是3行8列，每两列中左侧一列表现人名右侧一列表现电话地点等接洽方法。我认为dl在必然水平上能满意此需求，dt放人名，dd放接洽方法，不外这时辰就涉及了dl滥用的争论，由于人名与接洽方法看成界说与表明有点牵强。

接下来尚有一个关于你是否体系进修过XHTML的小提问，那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary属性别离用于界说什么，尚有就是你誊写table时是否会行使thead、tbody。

div, span
再次审视上面的列表，假如你必要暗示一个块区却无法在上面找到更得当的元素，那么你就可以思量行使div和span这两个最没有语义的元素了。div与span的区别，汗青上的不说了，此刻凡是大块的地区用div，行内的小文本片断就用span。在上面我已经说了div一样平常用于全局分别为几个大的地区，以是一样平常不必要行使了。span着实也很少行使，由于行内的夸大凡是可以用语义更强的元素譬喻strong和em。

在领略上上述那么多常用元素后，写一个XHTML就真的犹如中门生写作文一样垂手可得,此刻你领略了你在搭的是什么，而早年你只在乎搭出你想要的视觉结果来。写代码与写作文所相同的处所，就在于你写得越多就越纯熟，也就越能写出好对象来。在写好XHTML后我们就要开始思量怎样写CSS了，或者还必要在XHTML中略作修改以利便CSS中法则的选择与匹配，不外这是往后再说的内容了，本日就说到这里。

相干文章：

行使DIV+CSS网站机关的利弊说明

div+css计划中ID的定名风俗和类型

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!