咨询,就免费赠送域名与服务器,咨询热线:18870219079当前位置: 主页 > SEO课程 >
SEO课程
联系我们
市场部:刘经理
15558075325
营销部:王总监
15257873850
代码、框架事业部:李工
18668016270
设计部:董明茜
13067811906
网站客服:Alvin
19814733980

网站优化文章简单不是没有内容

作者/整理:admin 来源:栢塑科技 2020-01-16

不是说网页要图文并茂吗,这里怎么又说越简单越好?需要明确的是这H讲的并非网页内容,而足网站的结构。
 
T i p s:我们都知道搜索引擎喜欢F型或者树型的网站结构,F型或者树形都满足了网站扁平化的需求,网站爬虫能够顺利地去爬取网页,更利于搜索引擎的折本。爬虫抓取深度是有限的,而这样扁平化的网站结构设计利于爬虫爬取。合理的网站链接结构设计是我们做SEO的第一步。F型或者树型的网站结构这样的设计对于用广來说无疑非常漂亮好看,但是对于搜索引繫來说简直就是醍梦。除了搜索引擊疋法抓取的问题,Flash、JS等还会严軍:拖慢网站的I方问速度。这样的网M虽然非常绚丽漂亮,但用广的耐心迠有限度的。
 
我们了解D 1 V+C S S内容和形式分离的特点,就很容秘理解它为什么适合S E O了。搜索引擊是餅蜘蛛的爬行来索幣个互联网的信息,这些信息被搜索引擎索引后会进行分析处理,D I V+C S S内容和形式分离的模式更清晰地将网页的内容主题展示出来,rfli TABLE就没有这个优势。
 
尽管这些年搜索引幣算法在不断升级,但是归根到底其还是一套程序,程序只能按照闹定的模式进行质的判断,这也就足为什么D 1 V+C S S史加受欢迎的原因。
 
建议:用字母、_号、•号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间。例如:头部样式用h e a d e r,头部左边可以用h e a d e r j e f t或h e a d e r _ l;如果是列结构的可以这样表示:box Jof3(三列中的第一列),box_2of3(三列中的第二列)、box_3of3(三列中的第三列),其他的我就不一一举例了,大家按以上规律去命名就好。
 
下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命名就会更加统一了,就不会有一义多词的情况了。)
 
容器:container/box
 
头部:header
 
主导航:mainNav
 
子导航:subNav
 
顶导航:topNav
 
网站标志:logo
 
大广告:banner
 
页面中部:mainBody
 
底部:footer
 
菜单:menu
 
菜单内容:menuContent
 
子菜单:subMenu
 
菜单内容:subMenuContent
 
搜索:search
 
第11章用十二个月创造成功网站315
 
搜索关键字:keyword
 
搜索范围:range
 
标签文字:tagTitle
 
标签内容:tagContent
 
3前标签:tagCurrent/currentTag
 
标题:title
 
内容:content
 
列表:list
 
当前位置:currentPath
 
侧边栏:sidebar
 
图标:icon
 
注释:note
 
登录:login
 
注册:register
 
列定义:column_lof3(三列中的第一列)
 
column_2of3(三列中的第二列)
 
column_3of3(三列中的第三列)
 
二、id和class的使用及区别
 
我们知道在样式表定义一个样式的时候,可以定义i d也可以定义c l a s s。例如I D方法:#t e s t{c o l o r:#3 3 3 3 3 3},在页面中调用<d i v>内容<d i v>。C L A S S方法:.test{color:#333333},在页面中调用<div class=”test"〉内容<div>id一个页面只可以使用一次,c l a s s可以多次引用。我在页面中用了多个相同i d在I E中显示也正常,id和class好像没什么区别,用多个相同id有什么影响吗?
 
页面存在多个相同I D的影响就是不能通过W 3的校验。在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同I D在一般情况下也能正常显示。但是当你需要用J a v a S c r i p t通过i d来控制这个d i v,那就会出现错误。i d是一个标签,用于区分不同的结构和内容,就像一个屋子有两个人同名,就会出现混淆。
 
c l a s s是一个样式,可以套在任何结构和内容上,就像一件衣服。i d是先找到结构/内容,再给它定义样式;c lass是先定义好一种样式,再套给多个结构/内容。也就是说大家在写X H M L+C S S时如果是维一的结构定位的就用i d,否则就用c l a s s(这样让出非结构定位的div块的id让程序员自己定义使用)。
 
三、使用CSS缩写
 
使用缩写可以帮助减少C S S文件的大小,使读者更加容易阅读。常用的CS S
 
缩写的主要规则如下:
 
颜色
 
16进制的色彩值,如果每两位的值相同,可以缩写一半。例如:#000000 4以缩写为#000;#336699可以缩写为#369。
 
盒尺寸
 
通常有下面四种书写方法:
 
property:value 1;(表示所有边都是一个值value 1)。
 
property:valuel value2;(表示top和bottom的值valuel,right和left的值是value2)
 
property:valuel value2 value3;(表示top的值是valuel,right和left的值是value2,bottom的值是value3)。
 
property:valuel value2 value3 value4;(四个值依次表示top,right,bottom,left)。方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例f
 
如下:
 
margin:lem 0 2em 0.5em;
 
边框(border)
 
边框的属性如下:
 
border-width:lpx;
 
border-style:solid;
 
border-color:#000;
 
可以缩写为—•句:border:1 px solid#000;
 
语法是border:width style color;
 
背景(Backgrounds)
 
背景的属性如下:
 
background-color:#fD0;
 
background-image:url(background.gif);
 
background-repeat:no-repeat;
 
background-attachment:fixed;
 
background-position:0 0;
 
可以缩'4为一句:background:#fD0 url(background.gif)no-repeat fixed 0 0;语法是background:color image repeat attachment position;
 
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
 
color:transparent;
 
第11章用十二个月创造成功网站317
 
image:none;
 
repeat:repeat;
 
attachment:scroll;
 
position:0%0%;
 
字体(fonts)
 
字体的属性如下:
 
font-style:italic;
 
fbnt-variant:small-caps;
 
font-weight:bold;
 
font-size:lem;
 
line-height:140%;
 
font-family:'Lucida Grande",sans-serif;
 
口J以缩写为一句:font:italic small-caps bold 1 em/140%"Lucida Grande",sans-serif;
 
注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。
 
列表(lists)
 
取消默认的圆点和序号可以这样写:list-style:none;
 
list的属性如下:
 
list-style-type:square;
 
list-style-position:inside;
 
list-style-image:url(image.gif);
 
口1以缩写为一么J:list-style:square inside url(image.gif);
 
四、明确定义单位,除非值为0
 
忘记定义尺、的单位是C S S新手普遍会犯的错误。在H T M L中你可以只写width=IOO,但是在C SS中,你必须给一个准确的单位,比如w idth:100px width:100em。只行两个例夕卜情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不耍在数值和单位之M加空格。
 
五、区分大小写
 
3在X H T M L中使用C S S时,C S S里定义的元素名称是区分大小写的。为了避免这种错误,我辻议所行的定义名称都采用小%。
 
c l a s s和i d的值在H T M L和X H T M L中也是区分人小写的,如果你一定要大小写混W,请仔细确i人你仵CSS的定义和XHTML里的标签是一致的。
 
六、取消class和id前的元素限定
 
当你写给一个元素定义c l a s s或者i d,你可以省略前面的元素限定,因为I D在一个页面里是唯一的,class可以在页面中多次使用。例如:div#idl{}可以写成#idl{}这样可以节省一些字节。
 
七、默认值
 
通常padding和margin的默i人值为0,background-color的默i人值是transparent但是在不同的浏览器默认值可能不同。如果担心冇冲突,可以在样式表、开始就先定义所有元素的margin和padding值都为0,如下面这柞:
 
*(
 
padding:0:
 
margin:0
 
}
 
或者是针对某元素来定义:
 
ul,li>div»span{
 
padding:0;
 
margin:0
 
}
 
八、CSS的优先级
 
行内样式(i n l i n e s t y l e)>I D选择符>样式(c l a s s),伪类(p s e u d o-c l a s s)和属性(attribute)选择符>类别(type),伪对象(pseudo-element)
 
解释:
 
*内联样式(inl ine s tyl e):元素的s tyle属性,比如<div style="color:red;"></div>,其中的color:red;就是行内样式。
 
*ID选择符:元桌的id属性,比如<divx/div>可以用ID选择符#content。
 
*伪类(pseudo-class):最常见的是铺(a)伪类,比如a:link,aivisited.
 
*属性选择符(attribute
 
selectors):比如
 
div[class=demo],含有
 
class
 
 
demo
 
的div元素。
 
*类别选择器(t ype s e l ec t or):H TM L标签选择,比如di v.dem o,div元素下含有class为demo的元素。
 
*伪对象选择器(pseudo-element
 
selector):比如
 
div:first-letter,
 
div
 
元素下的第
 
一个单词。
 
九、不需要重复定义可继承的值
 
CSS中,f•元素自动继承父元素的属性值,像颜色、卞体等,巳经在父元素中定义过的,在?•元素中可以直接继承,不需要重复定义,除非是为了更变当前元素样式不使用父元素的属性值。但是要注意,浏览器可能用一些默认值覆盖你的定义。
 
十、多重CSS样式定义,属性追加重复最后优先原则
 
一个标签可以同时定义多个C l a s s,也可以是同一个c l a s s中重复定义属性。例如我们先定义两个样式:
 
.one{width:200px;background:url
 
(http://www.abc.com/helloseo.jpg)no-repeat left top;}
 
.two{border:lOpx solid#000;background:url
 
(http://www.abc.com/goodseo.jpg)no-repeat left top;}
 
在页面代码中,我们可以这样调用:
 
<div class="one"two></div>
 
这样最终的显示效果是这个div样式是什么呢?重复的是以哪一个为准呢?<div class="one"two></div>应用到的样式如下:
 
width:200px;
 
border:10px solid#000;
 
background:url(http://www.abc.com/seo.jpg)no-repeat left top:
 
T i p s:因为,当应用两个或多个样式时,浏览器所应用的样式根椐是属性追加重复最后优先原则。就是说两个或多个或重复的样式名定义,浏览器所应用的样式是按先后顺序的。如果定义了重复的属性值,以最后定义的为准。如果应用了两个或多个样式名,里面不重复定义的属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是4艮据页面上应用的名字顺序,而是样式表里的样式顺序。
 
~\—、使用子选择器(descendant selectors)
 
使用子选择器是影响效率的原因之一。子选择器可以帮助你节约大量的c la s s定义。我们來看下面这段代码:
 
<div>
 
<ul>
 
<li class="subnavitem"><a href=
 
"http://www.abc.com/articlel/#"
 
class=’’subnavitein">Itein K/ax/li»
 
<li class=subnavitemselected><a href=
 
"http://www.abc.com/articlel/#"
 
n n
 
<li class="subnavitem"><a href=
 
"http://www.abc.com/articlel/#"
 
320跟我学SEO
 
『从入门到精通J
 
>工tem l</a></li>
 
</ul>
 
</div>
 
这段代码的CSS定义是:
 
div#subnav
 
div#subnav
 
div#subnav
 
div#subnav
 
div#subnav
 
ul
 
ul
 
ul
 
ul
 
ul
 
{}
 
li.subnavitem{}
 
li.subnavitem a.subnavitem{}
 
li.subnavitemselected{}
 
li.subnavitemselected a.subnavitemselected{}
 
你可以用下面的方法替代上面的代码
 
<ul id=”subnav”>
 
<li><a href="http://www.abc.com/articlel/#〉"
 
<li class="sel"><a href=
 
"http://www.abc.eom/articlel/#>"Item l</a></li>
 
<li><a href=
 
Item l</a></li>
 
"http://www.abc.com/articlel/#>"
 
工tem l</a></li>
 
</ul>
 
样式定义是:
 
#subnav{}
 
#subnav li{}
 
#subnav a{}
 
#subnav.sei{}
 
#subnav.sei a{}
 
用子选择器可以使你的代码和css更加简洁、更加容易阅读。
 
如果一个容器里有多个同样的元素,而且这些元素样式都不一样,请避免用这个方式,建以采用不同的Class如:
 
<ul class=one'xli></li></ul>
 
<ul class="tow’'〉<li〉</li〉</ul>
 
十二、不需要给背景图片路径加引号
 
为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必需的。例如:background-image:url("images
 
margin:0 auto;
 
}
 
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧來解决,用text-align属性。就像这样:
 
body{
 
text-align:center;
 
}
 
#wrap{
 
width:760px;
 
margin:0 auto;
 
text-align:left;
 
}
 
第一个b o d y的t e xt-al ign:c e nte r;规则定义I E5/W i n中body的所有元素居中(其他浏览器只是将文字居中),第二个text-align:Ieft;是将#warp中的文字居左。
 
十三、导入(Import)和隐藏CSS
 
因为老版木浏览器不支持C S S,所以通常的做法是使用i r n p o r t技巧来把C S S隐藏起來。例如:“import url(main.css);”。
 
然而,这个方法对I E4不起作用。这让作者很是头疼了一阵P,后来作者用这样的法:“import main.css;”。
 
这样就可以在I E4中也隐藏C SS T,呵呵,还节省了5个字节呢。想了解import语法的详细说明,可以看centricle's css filter char“
 
十四、CSS hack
 
有些时候,你需要对I E浏览器的b u g定义一些特别的规则,这里有太多的C S S技巧(h a c k s),我只使用其中的两种方法。不管微软在即将发布的I E 7 b e t a版里是否支持CSS,这两种方法都是最安全的。
 
1.注释的方法
 
(a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):
 
html>body p{
 
}
 
(b)
 
下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏):
 
*html p{
 
}
 
(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧:*html p{
 
declarations
 
}
 
(d)
 
F面这个写法只有I E 7浏览器可以理解(对其他浏览器都隐藏):
 
*+html p{
 
2.条件注释(conditional comments)的方法
 
另外一种方法,我认为比C S S h a c k s更加经得起考验就是采用微软的私有属性条件注释(c o n d i t i o n a l c o m m e n t s)用这个方法你可以给I E单独定义一些样式,而不影响主样式表的定义。就像这样:
 
<!-[ifIE]>
 
<link rel=stylesheet/css href="http://www.abc.com/style/ie.css/>
 
<![endif]—>
 
还有更多的C S S h ac k大家u j•以通过网上找找,但是有很多h a c k都是不符合w 3 c标准的,作者根据以上的h a c k写了一个能区分I E 6、I E 7、FF的样式,而且可以符合w3c标准。代码如下:
 
.classname{width:90px!important;width:lOOpx;}
 
*+html.classname{width:95px!important;}
 
这样写后在IE6下宽是lOOpx,IE7下是95px,火狐下是90px。
 
十五、调试技巧:层有多大?
 
当调试CSS发生错误,你就要像排版工人一样,逐行分析C S S代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看出层占据多大空间。有些人建议用border,一般情况下用是可以的,但问题是,有时候b o r d e r会增加元素的尺寸,border-top和b oeder-bottom会破坏纵向m argin的值,所以使用b ackground史加安全些。
 
另外一个经常出问题的性是outline。outline看起來像boeder,但不会影响元
 
素的尺寸或者位置。但只有少数浏览器支持outline属性,我所知道的有Safari.OmniWeb和Opera。
 
十六、CSS代码书写样式
 
在写C S S代码的时候,对于缩进、断行、空格,毎个人有每个人的书写习惯。在不断实践后,我决定采用下面这样的书写样式:
 
.classname{
 
width:lOOpx;
 
}
 
当使用联合定义时,我通常将培个选择器单独写一行,这样方便在C S S文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接写在属性值后,不要加空格。