Div+Css 如何让页面更精美(一)

 

随着技术的更新换代，在使用Div+Css做页面排版逐渐成为主流，但还是有部分的人认为使用div+css来布局有些难不好排版，依然使用Table式来排版。

Div+Css并不难，今天我想说说在我的理解中的Div+Css，从大角度来分我们可以将它分为：页面标签，样式。

一.页面标签

网页做出来给两类访问者看：用户，蜘蛛；用户在于加载速度，蜘蛛在于页面内容的信噪比以及内容的重要性。 如何使页面更加精简，我们需要考虑到以下两个方面：

1.标签的多样性

div+css讲究的并不是只使用Div来排版，用css来控制布局，而是让尽可能多的标签来完成你的页面排版。我们最常见的可以使用：div,p,span,a,img,em,b,h1-h6,strong,font等等。有些人可能觉得很麻烦，为什么要使用尽可能多的标签来完成布局呢？这样做的好处有二：1.页面排版精简化，2.从某种程度看可以减少编写样式。例如：

<div class="test1">

<div class="test1_1">如何页面更精美</div>

<div class="test1_2">这里有一段文字</div>

</div>

我们可以改成：

<div class="test1">

<span>如何页面更精美</span>

<p>这里有一段文字</p>

</div>

2.内容的重要性

页面排版精简了，我们还需要考虑给另外一种用户看，那就是各大搜索引擎看。我们完成标签多样性之后，可以提高我们网页的信噪比，我在这边瞎扯下。

　　网页信噪比查询信噪比(Signal/Noise)，原是电声学领域中的一个概念，指声音源产生最大不失真声音信号强度与同时发出噪音强度之间的比率。在网页优化中同样存在这样的原理，搜索引擎抓取页面，主要抓取除去html标签后的文本内容，这部分内容可以认为是不失真声音信号，而同时产生的那部分html标签内容，可以被认为是噪音。因此，网页信噪音比，可以这样理解：指网页中的文本内容部分与生成这些文本而产生的html标签内容的比率。声学中，信噪比越高，说明声音信号越清晰，同理，网页信噪比越高，说明页面中纯文本内容相对越多，搜索引擎抓取页面也越容易。
提示：
　　减少网页中的图片、flash，将html修饰转化为css样式表，封装css、js等，能大幅度提高网页信噪比，一般来说网页信噪音比小于30%为比较合理。

以上来看页面标签的多样性是很重要的，但我们往往会忽略到一点，页面内容的重要性，哪些内容是重点，哪些非重点。

例如我们在写一篇文章都会首先考虑一篇文章的标题，副标题（可有可无），段落中心，总结等等。对于蜘蛛来说我们可以视为“机器老师”它在抓取我们的网页时也会专注，文章的标题，中心思想（具体内容涉及到seo方便暂时不谈），那么我们要考虑那些哪些东西可以定位段落中心，哪个信息可以列为标题，副标题等。分析好了，剩下的就是相应的标题套上去:：

a.H1 一个页面的大标题，注意：一个页面多个h1从排版使用的标签来说没有问题，但体现不出这个页面的中心思想。

b.H2页面副标题，补充说明页面中心思想。也是一样，页面排版时不要出现多个H2标签。

c.h3一般指页面段落或板块，注意： 页面上可以出现多个h3标签，但不能过于滥用。

d.h4-h6比较少用，重要性从h1-h6依次递减，偶尔可以使用H4-h6来标明强命名或关键字，strong也是不错的选择。

二.样式

1.共用性

2.样式简洁化

3.继承性

4.命名规则

下一篇文章我会详细讲述下我的理解中的Css编写方式，如果是样式更精简更美观。