前端之CSS基础知识

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41282726/article/details/96104615

1.CSS的概念及其作用

css全称为(Cascading Style Sheets)翻译过来就是层叠样式表

作用:主要作用就是设置网页的文字(大小,颜色,字体,对齐等等)图片和板式布局等等

2.字体属性

设置字体的大小:

取值:font-size: 12px;            注意:在css大多数数值都需要添加单位

设置字体的粗细:

normal 不加粗(400)         bold 加粗(700)         bolder

设置字体的风格:

font-style 设置字体的风格(样式):  normal 默认 显示标准的字体样式            italic  字体倾斜

设置不同类型的字体:

 font-family 设置不同的字体          默认是微软雅黑

 注意事项: 1.中文字体需要添加引号 英文可以不用 但是如果英文字体有空格或者其他特殊符号$也需要添加引号

                     2.字体可以设置多个 中间用逗号隔开 浏览器的解析原则:从左至右 一次解析 如果当前电脑识别这个字体 则直接使                           用,后续不管 如果不能识别 继续找下一个字体 如果都不识别 则会使用默认的

                     3. 不建议使用一些偏门字体

font简写:   font:   font-style  font-weight  font-size/line-height  font-family;

不建议修改顺序  并且不需要设置的属性可以不写  但是font-size和font-family必须指定,否则将不起作用

3.选择器

想要操作任何一个标签,那么首先需要做的事情就是选中对应的标签,而这个就是选择器的作用

基础选择器:标签选择器   类选择器   多类名选择器   id选择器   通配符选择器   伪类选择器

1)标签选择器

div {
	font-size: 100px;
    }

    标签选择器:通过标签名选中对应的元素

    优点:会将所有满足条件的标签都选中

    缺点:无法实现差异化选择

2)类选择器

.box {
	   color: red;
	 }

声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} (声明类名选择器)

给对应的元素添加class类名属性 class="自定义的类名" (调用类名选择器)

特点:可以给相同标签的元素定义不同的样式 在实际工作中用的最多

3)多类名选择器

   一个元素可以拥有多个类名       类名和类名之间用空格隔开多类名选择器可以让我们解决更复杂的一些需求

.red {
	color: red;
}
.ft12 {
	font-size: 12px;
}
.ft14 {
	font-size: 14px;
}

<div class="red ft12">内容</div>
<div class="red ft14">内容</div>

4)id选择器 

id选择器的使用方式和类选择器基本一致

  1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}

  2. 调用id 给对应的元素添加属性 id="自定义id"

#box {
	font-size:12px;
}

<div id="box">内容</div>

特点:id选择器一般配合后期的JS使用较多,效果和类选择器一样,只不过是类选择器可以被多个元素调用,但是id选择器只能被一个元素调用          在同一个页面中,不能出现两个id值相同的元素

5)通配符选择器

特点:选中任何元素,后期用于页面初始化

* {
    属性1: 值1;
    属性2:值2;
}

6)伪类选择器

伪类选择器可以理解为选择的元素的一种状态,并不是如之前直接选中元素就完事了

a:link   没有被访问的时候的状态                 a:visited  访问之后的状态    
a:hover        鼠标移动上去之后的状态        a:active    鼠标按下的状态

伪类选择器在实际工作中,不会写这么多,意义不大,推荐简写的方式完成

a {}
a:hover {}

4. 文字的对齐  缩进   下划线

1)水平对齐

text-align:值;  
取值:left right center
该属性控制的是标签  “内部的文字”  水平居中

2)首行缩进

text-indent:值;
取值可以是像素,也可以是em  推荐写法:text-indent:2em;

3)字体下划线和删除线

text-decoration:值;
取值:underline 下划线     line-through 删除线    none 去掉多余的样式

5.行高

    行高控制的是文字与文字之间的上下距离 (行距)

     line-height:值;

     1)值的取值是像素

      2)**小技巧:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中

      3)两者结合使用可以让单行文字在标签内部水平垂直居中

[Cssç²¾é]æ·±å¥ç解CSS中çè¡é«ä¸åºçº¿ - æ§å - ç§Â·æ°´è½ç³åº

6.样式表的书写位置

样式表可以有三种书写方式,分别分为内嵌式样式表、外链式样式表、行内式样式表

1)内嵌式样式表

内嵌式样式表是在html里面嵌套一个style标签,将css语句都写在style标签里面

<style>
	css语句
</style>

2)外链式样式表

单独创建一个后缀名为.css的文件,在html文件里面通过link标签引入css文件  

<link rel="stylesheet" href="css文件的地址" />

3)行内式样式表

将样式直接写在标签本身上,以属性的形式存在

<div style="color:green; font-size:20px;"></div>

4)三种样式表总结

样式表 优点 缺点 使用情况 控制范围
行内式样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少)
内嵌式样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外链式样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多)

7.标签的三种显示模式

a.块级元素

1)可设置宽和高

2)独占一行

3)默认宽度是父级标签的宽度

4)块级元素一般用于包裹其他块级或者行内元素

5)p这种段落标签不要嵌套块级元素

代表标签:div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section
                  display:block;

b.行内元素

1)设置宽高无效

2)行内标签允许其他的行内标签排一排

3)尽量不要用行内元素包裹块级元素 a链接除外

代表标签:a,span,b,u,s,i,strong,ins,del,em
                 display:inline

c.行内块元素

1)行内块标签其实本质上是一种特殊的行内标签 (text-align和line-height都可以控制行内块元素)

2)允许其他的行内元素排一排

3)可以设置宽高

代表标签:input,img
                 display:inline-block

注:一般实际工作来说标签不需要进行转换,因为大多数情况下都可以选择对应的标签来实现需求 行内块较为特殊!!

8.复合选择器

1)交集选择器      既又原则 
例如:p.box {}  既是p标签 又有box类名

2)并集选择器       将多个选择器合并在一起 
例如: div,p,h1 {}  

3)后代选择器       空格前面的元素和后面的元素必须是嵌套关系 
例如:.father .houdai {}

4)子代选择器     > 前面的元素和后面的元素必须是父子关系 
例如:.father > .son {}

注:快速定位行数:ctrl + g

9.背景

        背景颜色:background-color: 颜色;

        背景图片:background-image: url(路径);

        背景平铺:background-repeat: no-repeat || repeat || repeat-x || repeat-y;

        背景是否跟随滚动:background-attachment:scroll(默认) || fixed;

        背景位置:background-position:

        1)方位名词 left right top bottom center 顺序不论

        2)像素 第一个值是X轴方向 第二值是Y轴方向         程序的坐标系 水平x轴 方向朝右 垂直Y轴 方向朝下

        3)百分比(了解)                                                    4)混写 但是需要考虑顺序     

       背景的简写:

       background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

       如:background: #fff url() no-repeat scroll center center;

       img和背景图片的区别:

       img不需要专门写宽高就能够显示在页面上

       而背景图片默认是撑不开容器的 需要专门写宽高
       一般产品插入图都推荐使用img  而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
       而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位)

10.css的三大特性

     1)继承性  

后代元素会继承祖先元素的一些样式 跟文字相关属性可以继承 color font- line- text- 可以继承 块元素可以继承父级元素的宽度,高度不继承

  • 注意:a链接颜色不予继承,需要单独写

  • 注意:如果元素自身有该css样式,那么该样式不予继承

     2)层叠性 

       后渲染的css样式会覆盖掉先渲染的css样式 (权重相同的情况下)

       注意:层叠性针对css的书写声明位置,类的调用位置先后会它没有影响

     3)优先级(权重)

       不同的选择器之间会有不同的优先级

       继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

     权重叠加

     CSS特殊性(Specificity)

      关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

       specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素(标签)贡献值为 0,0,0,1
每个类,伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 正无穷

     !important 只能针对单条css属性起效果 而不是整个选择器

     !important 对于继承没有作用

     当多个选择器选中同一个元素的时候  会进行权重对比 并且权重是会进行叠加的

     比如的例子:

     div ul  li   ------>      0,0,0,3
    .nav ul li   ------>      0,0,1,2
    a:hover      -----—>      0,0,1,1
    .nav a       ------>      0,0,1,1   
    #nav p       ------>      0,1,0,1

11.盒子模型

  网页的布局本质就是把网页上的元素,如图片,文字,都放入盒子里面,然后按照自己的需要摆放盒子的过程就是网页布局

 1)边框

  border: 边框大小  边框样式(solid 实线  dashed 虚线 dotted 点线 double 双实线) 边框颜色;

  border-方位名词:边框大小 边框样式 边框颜色;

 边框大小;border-width
 边框样式:border-style
 边框颜色:border-color

	border:1px solid #ccc;
  • 补充:细线表格 border-collapse:collapse;

table {
			border:1px solid #ccc;
			/* 合并边框 针对的是table  添加在table身上*/
			border-collapse: collapse;
		}

2)圆角:borde-radius:值; 一个值控制的上左 上右 下右 下左;

         边框圆角语法:border-radius:像素;

        取值还可以是百分比 百分比参照的是当前盒子完整的宽高

        注意:边框圆角并不需要依赖边框

        单独控制圆角

        一个值:四个角

        两个值:对角线

        三个值:左上 对角线 右下

        四个值:从左上开始 顺时针

border:10px solid #ccc; 
border-radius: 20px; 
border-radius: 50%;

3)内边距

padding的取值可以是1-4个

一个值:控制整个上下左右
两个值:第一个控制上下  第二个控制左右
三个值:第一个控制的上 第二个控制的左右 第三个控制的下
四个值:上右下左

也可以单独写: padding-top   padding-bottom   padding-left   padding-right

注意:行内元素里面不要写上下padding,左右可以

4)外边距

  1. margin的取值方式和padding一样

  2. margin的大小只会移动盒子的位置,并不会对盒子的大小造成影响(特殊情况例外)

  3. 行内元素也不要给上下的margin

  4. 特殊值:auto margin:0 auto; 可以让一个块级元素水平居中

    • 前提条件:必须是块级元素 同时必须有固定的width

    • 注意:text-align和margin:0 auto的不同 前者是控制盒子内部的文字或者内部的行内块 后者控制的是盒子本身

5)清除内外边距

* { 
	padding: 0;
	margin: 0; 
}

6)外边距的BUG

a.相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,
下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

解决方案: 两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)。

b.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,
则父元素的上外边距会与子元素的上外边距发生合并,
合并后的外边距为两者中的较大者,
即使父元素的上外边距为0,也会发生合并。

解决方案:

  1)不要给子元素margin-top 给父元素添加padding-top

  2)给父容器添加上边框或者上padding

  3)给父容器添加overflow:hidden;

  1. 实际应用注意:在实际工作中,我们很难直接话的得到盒子的内容的大小,所以我们会直接将整个盒子量出来,在后续如果需要添加padding的情况下 一定要减掉 padding

  2. 如果这个块级盒子没有width属性(从父级继承宽度)的时候,添加padding和border不会撑大盒子(盒子内容部分会自动压缩)

12.浮动

 1)布局的三种基本方式

      标准流 按照标签默认的特性摆放盒子即为标准流

      浮动流 利用浮动摆放盒子即为浮动流

       定位流 利用定位摆放盒子即为定位流

2)浮动的意义

  浮动最开始是做图文绕排的。浮动的布局应用场景:让元素直接排成一排,或者一个靠左一个靠右

3)浮动的特性解析

a.浮动的元素会“脱标”

b.脱标的元素拥有行内块的表现             脱标:(脱离了标准流)

 标准流:块元素单独占一行,行内元素可以排一排的这种默认的盒子排列方式就是标准流 (按照默认的规则排列的)

1. 脱标的元素不占标准流的位置
2. 不会继承父级的的宽度,内容有多个就撑多大 (不论前身块级还是行内)
3. 可以直接写宽高 (不论前身块级还是行内)
4. margin:auto对于脱标元素不起作用

浮动因为脱标的特性(脱离标准流了,不占位置,会盖住其他的标准流的盒子),所以,在使用上有一个口诀:要浮全浮(要浮动的话兄弟元素都浮动)

其他细节特性:

1. 浮动是在盒子内容区域浮动,不会超出padding区域(水平方向)
2. 浮动的盒子一排装不下的时候会掉下来(掉下来的位置会根据上一个浮动盒子的高度决定)
3. 右浮动会颠倒盒子顺序
4. 浮动的盒子压不住文字和图片
5. 尽量在标准流的盒子里面浮动

4)闭合浮动

浮动带来的问题:浮动元素撑不开父级容器

解决办法(闭合浮动):

1. 强行给父盒子添加高度 (不推荐,不利于后期维护)
2. 创建一个新的块级盒子放在浮动元素的最后面,给这个盒子添加一个css属性:clear:both;(不推荐,会产生一个多余的盒子)
3. 用伪元素闭合浮动 (推荐,书写一个公共类就可以使用)
4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)

5)伪元素

就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染

伪元素特性:

1、伪元素由css渲染  所以不会增加你的DOM(html结构)开销
2、伪元素默认是行内元素 可以进行转块等处理
3、伪元素不管有没有内容  content这个值一定不能少 即使没有 也要写个空
4、伪元素 官方推荐写::  但是为了兼容考虑 写成单冒号
5、因为伪元素是css渲染  所以JS获取不到

伪元素清除浮动完整代码:

.clearfix::after {
	content:'';
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix {
	*zoom:1;
}
或者
.clearfix:before,
.clearfix:after { 
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
	*zoom:1;
}

13.ps的使用

基本设置:

1、ctrl+k  打开首选项----单位与标尺--- 将单位都改成像素
2、V工具状态下 在属性栏里面干掉自动选择 同时将组设置为图层
3、在Z工具状态下 去掉细微缩放

切片工具的使用 :

切片工具:c
c是一个工具组 我们需要的是里面的切片工具 
shift + c 切换切片工具组
临时切换到切片选择工具:在切片工具下,按住ctrl不放,会临时将切片工具转换成切片选择工具
打开标尺 ctrl+r

怎么切片:用c工具框选对应的图片区域出来,利用三键+s (ctrl+shift+alt+s)导出切片  在导出的过程中选择“选中的切片”

14.定位

定位的使用包含两个部分:

  1. 定位的方式                2.偏移值 left,right,top,bottom

偏移值准确的理解是“距离什么位置有多大” 如 top:100px; 距离顶部为100像素 (向下走)

 定位的元素的移动起始点实在padding的起始位置 (不包含边框)

1)静态定位

    所有的标准流都是静态定位         position:static;

  • 一般用于将某些已经定位的元素还原成标准流,用的很少

  • 偏移值对于静态定位来说不起作用,我们以后说的元素定位不包括静态定位

2)相对定位

    相对定位是相对自己的标准流的位置进行定位移动         position:relative;

特性:

1. 移动的出发点是自身标准流的位置
2. 相对定位移动的元素不会对别的元素产生干扰,“没有脱标”,真正占得位置还是标准流的位置(肉体不在 灵魂永驻)
3. 可以盖在标准流的上方
4. 一般用于微调元素和配合绝对定位来实现效果

3)绝对定位

position:absolute;

特性:

1.移动的出发点:
    从绝对元素开始一直往上级找(直到找到最大的html标签),在这个过程中,只要有一个元素(A元素)是定位(相对,绝对,固定)的任何一个,这个绝对定位的元素就会参照这个A元素进行定位,并且不会在往上找了,如果一个都没有,最终会以html元素定位

2.脱标

    1.1. 脱标的元素不占标准流的位置
    1.2. 不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内)
    1.3. 可以直接写宽高 (不论块级还是行内)
    1.4. margin:auto对于脱标元素不起作用

巧妙运用:让一个定位盒子水平垂直居中

left: 50%;
top: 50%;
margin-left:-自身宽度的一半;
margin-top:-自身高度的一半;

使用方式:

在工作中,绝对定位"大多"配合相对定位一起使用(父相子绝) 
父相:在标准流上占有位置
子绝:针对这个标准流在去移动

注意:父绝子绝的情况也有,只是很少,不要完全形成思维定式。

4)固定定位

position: fixed;

特性:

1.脱标
    1.1.脱标的元素不占标准流的位置
    1.2.不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内)
    1.3.可以直接写宽高 (不论块级还是行内)
    1.4.margin:auto对于脱标元素不起作用
2.移动的出发点:浏览器窗口 (直接表现:滚动条对于固定元素没有作用)

5)四种定位总结

定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标,正常模式 不可以 正常模式
相对定位relative 不脱标,占有位置 可以 相对自身位置移动
绝对定位absolute 完全脱标,不占有位置 可以 相对于定位的父级移动位置
固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置

6)z-index

控制“定位”元素的叠放层级

1)z-index只针对定位元素有效果

2)z-index值越大,层级越高

     思考:上大盒子压住下大盒子 下大盒子里面的子元素压住上盒子

3)如果父元素已经比较过层级了(父元素“都有”z-index的时候,并且值不为auto),那么子元素与子元素之间是不会再去比较的

15.元素的显示和隐藏

1)将元素的显示模式设置成none即可让元素隐藏

display的值为none的时候,元素完全隐藏
display的值为block的时候,元素呈块级显示
display的值为inline的时候,元素呈行内显示

display为none隐藏时候是不占位置的
实际工作中用的较多

2)visibility 控制元素的显示和隐藏

visibility的值选择
hidden 占位置隐藏
visible 显示
实际工作中用的较少

16.overflow

控制元素溢出之后的显示方式

取值:
visible  直接显示
hidden   超出的部分隐藏掉
auto      如果超出,自动产生滚动条,如果不超出,不产生
scroll      不管有没有超出,都有滚动条控件

overflow-x:hidden;
overflow-y:hidden;

17.BFC

块状格式上下文 产生BFC之后,盒子内部的空间与外部完全隔离

触发BFC的条件:

overflow只要取值不是visible的情况下
float的值不为none的时候
display为table或者inline-block的时候
position的取值为fixed或者absolute

(课外BFC参考资料)[https://www.cnblogs.com/CafeMing/p/6252286.html]

(课外display:table参考资料)[https://blog.csdn.net/Bessicxie/article/details/78572424]

18.vertical-align

控制行内块与文字的对齐方式,写在行内块元素上面

1)取值:

baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线(行高的顶线)对齐
bottom 图片的底线和文字的底线(行高的底线)对齐
middle 图片的中线和文字的中线对齐

2)应用场景:

可以解决图片与文字排列时候底下留白的问题 
(不要让图片以基线对齐即可 或者将图片转成块元素)

可以解决表单元素与文字排列不对齐的问题
(设置图片的vertical-align:middle || top || bottom)

可以设置图片(行内块)垂直居中

可以设置多行文字居中显示

3)如何让一个行内块在一个盒子里面水平垂直居中:

1、给父级元素设置text-align:center  (水平居中)
2、给父元素设置一个等高的行高
3、给行内块元素设置vertical-align:middle;(让图片以文字的中线对齐)

4)如何设置多行文本水平垂直居中

1、给多行文字包裹一个盒子 给这个盒子设置成行内块 
2、给父级元素添加行高,并且给行内块元素设置成vertical-align:middle;即可
3、给行内块添加行高  让其覆盖掉继承过来的行高 

.box {
			width: 600px;
			height: 600px;
			border: 1px solid #ccc;
			/* 控制行内块垂直居中 */
			line-height: 600px;
			text-align: center;
		}
		/* 需求:让info水平垂直居中 */
		.info {
			background-color: red;
			display: inline-block;
			vertical-align: middle;
			/* 覆盖掉继承过来的行高 */
			line-height: 1.2;
		}

display:table和display:table-cell的妙用(多行文字垂直居中)

   .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

 

19.溢出文字以省略号的形式显示(单行)

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

溢出文字以省略号的形式显示(多行)

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

20.精灵图(雪碧图 sprite)

概念:就是将很多的小图片 icon,都整合到一张大图上使用。作用:减少网络请求,降低服务器压力,提高效率

因为浏览器会去服务器请求页面,请求回来的页面在执行的过程里面,会不断的去服务器请求对应的图片,当页面上的小图片过多了,那么浏览器会频繁的去服务器发请求,这个会给服务器带来很大的压力,同时效率很慢。解决方式就是将小图片整合到一张大图上,直接请求大图片即可,需要使用到某一张小图的时候只需要获取这个小图在这张大图的位置即可。

使用方式:

1.将需要显示的区域用切片选中,直接将切片的宽高赋值给盒子
2.直接获取切片的坐标,直接将坐标取负值赋值给background-position

	.box {
			width: 15px;
			height: 20px;
			border: 1px solid #000;
			background: url(images/jd.png) 0 -100px no-repeat;
		}

21.字体图标

概念:将图标做成字体来是使用

作用:字体相对图片来说容量更小,同时更加利于维护和修改

使用:借助于第三方网站(iconfont.cn)找到对应的图标。下载下来,按照DEMO提示即可 (一定要注意文件的路径)

22.滑动门技术

  要求:    1.盒子会跟随内容撑开          2.背景前后不一致

实现: 设置三个盒子,左盒子针对左背景 右盒子针对右背景 中间的盒子由内容撑开 三个盒子完成浮动

其他细节:

1.cursor 
    pointer 小手
    default 箭头
    text 文本
    move 移动
    url(),临时替换的样式
2.outline:none;(input)
    去掉选中之后的蓝色边框
3.resize:none;(textarea)
    去掉文本域的自动拉伸效果

23.网页SEO三大标签

1)网页的title标签

title具有不可替代性,是我们的内页第一个重要标签,是搜索引擎了解网页的入口,和对网页主题归属的最佳判断点。
长度:谷歌:35个中文 百度:28个中文
首页建议:网站名(产品名)- 网站的介绍 
例如:品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!

2)Description标签

针对网站的描述,是标题的一个补充,可以较为详细,一般不超过120个字,作用相对次之
    <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />

3)Keywords关键字

搜索引擎的关注点之一,应该限制在6-8个关键字之间
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页