如今在学校外面，培训机构外面都有很多课程是前端切图这一方面的，复杂来说就是学习div+css网页排版。有很多人经过这一轮的学习之后就发现本人对排版这一方面十分的熟习甚至说本人的div+css的高手。其实真正说要懂得一个网页排版需求留意的一些成绩是什么呢？是不是在电脑下面看到本人排版出来的页面就真的是一个成功的网页了吗？下面我说一下我本人在网页排版下面会留意的一些事情：

一、运用样式的种类和名字的标准

id和class应该如何运用

在我们运用div+css排版的时分，每一个div我们都会给他一个样式，而样式有两种一种是id一种是class。有时分无论我们运用哪一种作为标志都一样可以完成页面的css样式控制。但是为什么会出现id和class这两种呢？

其真实一个网页外面我们可以做一个比喻：body我们可以以为是一个学校，id我们可以以为是一个班级，class我们可以以为是一团体。那么在同一个学校外面，班级是不能重复的而我们每一团体的名字有能够是同名的。所以在一个网页外面，一个id只能出现一次，一个class可以出现屡次。而id的权限比class的权限要高，所以我们可以把一些不需求复制重复的div运用id来表示把一些可以重复用到的样式运用class来表示。例如一个网页只要一个头部，中部，底部。所以这三个部分我们可以运用id。有一些博客中间部分有分为左右，这一些板块在我们网页外面普通是不需求重复的，所以我们运用id来为他定义，而每一个板块外面的内容有时分是可以重复运用的，所以我们运用class为他定义。

有时分会有人问，假设我们全部独自运用一个也可以完成功用，为什么我们不单纯运用id和class呢？这个是由于假设全部运用id的时分，我们网页的JS和PHP的函数调用都是运用到id的，假设我们在css样式就占用了那顺序员会十分费事，假设全部运用class的时分能够会由于权限不够而在同一个层外面的没有标志的元素例如ul，li，a等的会收到外面一层的样式影响到这样招致要要多写比较多的代码。

id和class应该如何起名？

这个名字是可以随本人喜欢来起名，所以有一些人运用英文，拼音或许乱打几个字母。虽然说这样子是可以的，但是会招致本人和别人在前期的修正网站十分费事，就因找一个标签也要头晕了。 我团体起名字是按照层次来起，下面举个例子：

例如头部我运用了head这个名字，然后头部可以分为寄存logo和寄存导航条两部分。这两个部分我就会运用head_1、head_2来表示，然后在寄存logo的部分有能够分为左右一边是logo一边是广告或许搜索栏，我就会起名为：head_1_left、head_1_right来表示。这样子的css代码有时分我们在修正也无需翻到html页面看，直接按照样式的名字就可以看出来了。

二、合理运用标签有助于网站的收录和SEO优化

我们举一个例子，有时分一个旧事内容板块的html外面，很多人都会直接在div中间写上文字，然后给这一个div停止样式的控制：<div>旧事内容</div>。虽然这样子是完全可以完成功用，但是在搜索引擎眼中并不以为这个就是一个注释内容而是代码之类的，所以我们在写这个的时分记住合理运用p标签，如下面的旧事内容应该写为：<div><p>旧事内容</p></div>。在我们合理运用标签的时分一方面可以让人觉失掉你是用心来做这个网页的排版，更重要的是让这个网站前期的优化事半功倍。下面给大家总结一下本人觉得上要加的标签：

h1：一个网页的主题，在一个页面外面只能出现一个。权重仅次于网站标题，所以尽量单纯把本人网站的主关键词放在外面。假设关键词包在一个句子外面如这篇文章的标题，我们可以写成如下：

<p>说说彭健本人对</p>

<h1>网页排版</h1>

<p>的时分要留意的一些事情</p>。

h2-h3：在网页外面普通运用到h3就足够了，前面的h4-h6普通都不会再运用。这些两个标签我们需求合理放置，h2表示一个页面外面的栏目，h3表示在这个栏目外面的子栏目或许文章。

p：p标签为段落标签，我们也可以说他是内容标签。这个标签外面的才是真正的内容。

alt：搜索引擎是不会看图片的，我们必需要为他阐明这个图片表示的是什么，所以我们留意在每一张图片上为他阐明。

title：这个标签是用在a标签外面的，普通很少人运用。但是我们要统筹搜索引擎的优化所以我们必需要留意给搜索引擎一个复杂精准的阐明，例如说一篇文章标题是“说说彭健本人对网站排版的时分要留意的一些事情”。然后我们的代码应该写成

<a title=http://www.chinaz.com/web/2013/0527/”网页排版留意事项” href=http://www.chinaz.com/web/2013/0527/”">说说彭健本人对网站排版的时分要留意的一些事情</a>。

把最精准冗长可以阐明这条标题的意思写下即可。

nane：这个标签置信没几团体会留意到。这个名字标签可以说是直接跟搜索引擎说话的标签。他也是用在a外面，他是通知搜索引擎，进入这个超链接外面是什么东西。就如下面的标题我们可以写成：

<a name=http://www.chinaz.com/web/2013/0527/”网页排版留意事项” title=http://www.chinaz.com/web/2013/0527/”网页排版留意事项” href=http://www.chinaz.com/web/2013/0527/”">说说彭健本人对网站排版的时分要留意的一些事情</a>。

strong：这个是重要标签，这个的样子跟b标签一样。很多做搜索引擎优化而不懂代码的人他们知道每一篇文章要把重要的关键词加粗，但是他们总是以为这个加粗是b标签。其实这个加粗是strong标签。我们可以帮我们网页的重要关键词加上这个标签，然后在css外面设置他跟普通的字一样，在正常阅读的时分并不会有什么影响，但是其实他曾经优化了。

三、代码的层次感和规划让你代码看上去愈加舒适

在我彭健本人写代码的时分是十分留意这一方面的事情，由于一个页面做出来可以给客户看得舒适也能给本人看得舒适。我本人比较喜欢运用同级换行，下级换行退格的办法。例如一个网页的头部可以分为上部分和导航条部分，然后上部分分为左右。我们可以和容易看出，上下部分这两个div是同级的，而左右的div是下级的，代码如下：

<div>      

<div></div>      

<div></div>

</div>

<div></div>

至于规划这一方面就是css的代码放到css文件外面，js代码放到js代码外面，而不适用嵌入式和捆绑式的书写办法。

四、排版的时分要留意到后台的调用

(责任编辑：admin)