网站后台怎么转发网页内容(一个classclass排版需要注意的一些问题是什么呢？)

　　网站后台怎么转发网页内容(一个classclass排版需要注意的一些问题是什么呢？)

　　现在在学校里，有很多培训机构的课程都是专注于前端图形的。总之，他们在学习div+css的网页布局。经过这一轮的学习，很多人发现自己对排版非常熟悉，甚至说自己是div+css的高手。实际上，要了解网页布局，需要注意哪些问题？在电脑上看到自己的排版页面，真的是一个成功的网页吗？以下是我在网页排版方面需要注意的一些事项：

　　一、使用样式的类型和名称的规范

　　id 和 class 应该如何使用

　　我们在使用div+css排版的时候，会给每个div一个样式，样式有两种，一种是id，一种是class。有时候不管我们用哪一个做logo，都可以实现页面的CSS样式控制。但是为什么会有 id 和 class 两种呢？

　　其实，我们可以在一个网页中做一个类比：body 我们可以认为是学校，id 我们可以认为是一个班级，class 我们可以认为是一个人。所以在同一所学校，不能重复上课，我们每个人都可能有相同的名字。因此，在一个网页中，一个id只能出现一次，而一个类可以出现多次。id的权限高于class，所以我们可以用id来表示一些不需要复制重复的div，用class来表示一些可复用的样式。例如，一个网页只有一个头部、中间和底部。所以这三个部分我们可以使用id。有一些博客分为左右两部分。这些部分一般不需要在我们的网页中重复，所以我们使用id来定义它们，每个部分的内容有时可以重复使用，

　　有时人们会问，如果我们可以单独使用它们，为什么不直接使用 id 和 class。这是因为如果全部使用了id，我们网页的JS和PHP函数调用都使用了id。如果我们占用css样式，程序员会很麻烦。如果所有的类都用了，可能是因为权限不足和同层未标记的元素，如ul、li、a等，会受到外层样式的影响，导致代码较多书面。

　　id和class应该怎么命名？

　　这个名字可以任意命名，所以有些人使用英文、拼音或随机字母。虽然可以这么说，但是后期修改网站会给自己和其他人带来很大的麻烦，而且会因为找到一个标签而头晕目眩。我的个人名字是基于层次结构的。这是一个例子：

　　比如我用head这个名字为head，那么head可以分为两部分：存放logo和存放导航栏。我会用head_1、head_2来表示这两个部分，那么存储logo的部分可能分为左右两边，另一边是广告或者搜索栏，我会将其命名为：head_1_left、head_1_right Express。有时候我们修改的时候不需要翻到html页面就可以看到这样的css代码，直接根据样式名称就可以看到。

　　二、适当使用标签有助于收录和网站的SEO优化

　　让我们举个例子。有时候在一个新闻内容板块的html中，很多人会直接在div中间写文字，然后控制这个div的样式：

　　新闻内容

　　. 虽然这个功能齐全，但是在搜索引擎的眼里，它并不认为这是文本内容而是代码之类的，所以我们在写这个的时候记得合理使用p标签，比如上面的新闻内容应该是写给：

　　新闻内容

　　. 当我们合理使用标签的时候，一方面可以让人觉得你是在用心做这个网页的排版，更重要的是让这个网站后期优化得到事半功倍的效果努力。以下是您想添加的标签的摘要：

　　h1：网页的主题，一个页面上只能出现一个。权重仅次于网站的标题，所以尽量简单的把你的网站的主要关键词放进去。如果 关键词 被包裹在像这个 文章 的标题这样的句子中，我们可以这样写：

　　说彭剑是对的

　　网页排版

　　什么时候要注意的一些事情

　　.

　　h2-h3：一般网页中使用h3就够了，后面的h4-h6一般不用再用了。我们需要合理安排这两个标签，h2代表页面中的一列，h3代表该列中的一个子列或文章。

　　p：p标签是一个段落标签，我们也可以说他是一个内容标签。这个标签是真实的内容。

　　alt：搜索引擎不看图片。我们必须向他解释这张图片代表什么，所以我们注意在每张图片上向他解释。

　　title：这个标签在a标签中使用，一般很少人使用。但是，我们要考虑到搜索引擎的优化，所以一定要注意给搜索引擎一个简单准确的描述，比如说一个文章标题是“Tell me about Peng Jian Himself when you要注意网站一些东西的排版。那么我们的代码应该写成

　　说说彭剑自己在网站排版时应该注意的一些事情。

　　写下对标题含义的最短和最准确的描述。

　　nane：我相信很少有人会注意到这个标签。这个名称标签可以说是直接与搜索引擎对话的标签。他也用在一个，他是告诉搜索引擎这个超链接里有什么。如上面的标题，我们可以这样写：

　　说说彭剑自己在网站排版时应该注意的一些事情。

　　strong：这是一个重要的标签，看起来和b标签一样。很多做seo但不懂代码的人都知道，每一个文章都应该加粗关键词，但总以为这个粗体就是ab标签。事实上，这个粗体是一个很强的标签。我们可以把这个标签加到我们网页重要的关键词中，然后在css中设置成和普通字一样。正常浏览时不会有任何影响，但其实已经优化过了。

　　三、代码的分层和规划让你的代码看起来更舒服

　　在我自己写代码的时候，彭健非常关注这方面，因为做出来的页面可以让客户和我自己都感到舒服。我更喜欢使用同层换行，下层换行的方法。例如，网页的头部可以分为上半部分和导航栏部分，再将上半部分分为左右。我们可以很容易地看到，上下两个div处于同一级别，而左右div是从属的。代码如下：

　　至于规划方面，css代码放在css文件里，js代码放在js代码里，嵌入和捆绑的写法不实用。

　　四、排版时注意后台调用

　　当我们排版一个页面的时候，我们用无数的样式来一个一个地指定每个div或者li的样式，效果看起来都一样，但这就是一个成功的代码？我们知道，生成的页面不只是放在网站上运行，而是将页面做成模板，添加到后台调用标签中进行调用。例如，文章 列表 (ul) 中有许多 文章 主题 (li)。我们知道每个文章主题都是从后台调用的，所以这些li需要循环使用。如果我们每个 li 都有不同的类，相信这个循环调用会给程序员带来很多头疼的事情。因此，当我们这样做时，请尝试使用统一的样式。如果导航栏的每一项都用竖线隔开，我们一般把竖线放在每个li的左边，然后给第一个首页的li加个样式去掉竖线，因为这样可以在后台成功调用后面的列。每个 网站 都需要主页，所以它是否是静态的并不重要。

　　而我们网站上的图片有两种，一种是风格图片，一种是资料图片。样式图片是指不需要更改的背景，比如导航栏的背景（我们通常不能保存在浏览器上），保存在css中，可以随时更改数据图片. 它是从后台调用的，例如商品。缩略图（我们通常可以保存在浏览器上）。我们在写代码的时候一定要分清楚这些图片属于哪一种图片，这样才能更专业的排版一个页面。至于logo，有的人喜欢放在css中，有的人喜欢放在html中，这是根据自己的需要。

　　五、网页图片大小

　　当我们制作网页时，有时不同的人会做出不同的尺寸，但是我们如何解决这个问题呢？比如一个网页的导航栏，如果是spring导航栏，我们在排版上有3种方法。

　　1、在设计图上剪下一整块导航栏，作为背景。

　　2、剪切一个像素进行平铺。

　　3、直接使用颜色作为背景。

　　这三种方法都具有相同的效果，但第三种是最经济的。所以我们可以理解，做一个网页可以做出效果，做的最小的就是最好的。所以我们要注意：能用color就用color，不能用color就用tile，最后再考虑用image。

　　有时一张图片不仅在一个地方使用，而且在多个地方使用，所以我们应该注意将这张图片应用到多个地方，而不是在每个地方切割一张图片。最后，我们在裁剪图片的时候还需要注意一件事。剪一张大图是不够的。我们要准确切到最边缘，尽量把图片的尺寸缩小到最小。

　　后记

　　以上的一些总结，是作者自己在网页排版中一步步总结出来的。当我们是 web 前端工程师的时候，可以简单的看懂代码，但是当我们是 web 前端工程师的时候，考虑到 网站 的操作，也要考虑到程序员看到的你的排版感受和网站SEO的难点。希望看完这部电影文章后，可以回复一两句话支持彭剑，写这么长的文章不容易。想详细了解作者操作网站的心得吗？