首页 » CSS » 3.标签&选择符&超链接&SEO(SEM)

3.标签&选择符&超链接&SEO(SEM)

原文 http://blog.csdn.net/u010567918/article/details/79219994

2018-02-01 02:00:11阅读(322)

常见标签 div

1. 表示“块”。

2. 例:“<div>块</div>”。

3. 常用做网页布局。

img [单标签]

1. 图片标签 。

2. 例:“<img src="icon.jpg" alt="图片名字"/>” 。

a) src属性是图片的路径(相对/绝对)

b) alt属性的属性值是图片的名字,正常情况下不显示,当图片src定位不到资源时,才显示alt属性值。

i. 利于SEO 。 alt属性虽然正常情况下不显示,但对于搜索引擎却是很友好的,索搜引擎会抓取alt属性值。

a

1. 链接/锚点/下载

2. 例:

a) 超链接: “<a href="http://www.baidu.com" target="_blank">超链接</a>” 。

i. target属性可以指定打开方式,默认覆盖当前页。

1. “target="_blank"”表示打开一个新的页面显示。

2. “target="_self"”表示覆盖当前页,这也是默认值。

3. target属性的其他值不常用,因为跟html框架有关,而现在html框架几乎废弃了。

ii. 使用技巧 (推荐)

1. 页面中有很多链接,如果每一个链接都添加“target="_blank"”属性会很麻烦且代码累赘,那么我们就可以在头元素中添加下面一句代码,就可以达到为页面中所有链接指定“_blank”打开方式(简化代码):

a) <base target=” _blank”/>

2. 另外,当我们在head元素中添加了此<base target=” _blank”/>标签后,可能页面中有个别链接的打开方式不希望这样,那么你也不用担心,你只需要在这些个别的链接中再添加target属性和属性值即可,因为它的优先级大于base 。

b) 锚点 :“<a href="#did">a锚点</a>  <div id=”did”></div>” 。

i. 锚点与超链接区别就在于href属性的属性值是资源定位的路径,还是以“#”号开头的元素id 。

c) 下载 :“<a href="icon.zip">下载</a>” 。

i. 当超链接定位的资源浏览器不认识时,浏览器就会显示下载

1. 利用这一特性可以实现下载功能,比如定位一个文件或压缩包等。

hn

1. 标题标签

2. 显示效果为加粗放大

3. 例:“<h1>标题1</h1>” 、 <h6>标题6</h6>

4. hn中n的取值范围为1到6

a) h1是最大的标题标签,h2其次以此类推往下递减,h6为最小标题标签。

b) h1标题标签相对特殊,一般一个页面最多只用一个。

i. h1用的太多,搜索引擎会认为你作弊,从而将页面拉入黑名单。

5. 利于SEO 。搜索引擎对页面中的标题标签会“另眼相看”,“另眼相看”的程度随着hn中的n数值递增而减小。

p

1. 段落标签

2. 显示效果为换行

3. 例:<p>段落</p>

strong

1. 强调语气强烈,好比很重要的意思。

2. 显示效果为加粗

3. 例:“<strong>强调</strong>”

4. 利于SEO

a) 虽然利于SEO,但一个页面不要刻意用太多,按照正常的需求使用即可,一般占整个页面内容6%—8%为宜(不要让搜索引擎认为你作弊)。

em

1. 强调语气不强烈。

a) 与strong相同,都是强调语气,但没有strong那么强烈。

2. 显示效果为斜体。

3. 例:“<em>强调</em>” 。

4. 利于SEO

a) 虽然利于SEO,但一个页面不要刻意用太多,按照正常的需求使用即可,并且“em”标签自带斜体样式,实在不利于用户体验,在使用时也可以将样式清空。

span

1. 区分样式

2. span标签本身没有带样式

a) 我们经常用它来为一段文本中部分文本添加样式,如下:

i. “给我<span style="color:red;">一个</span>特殊对待”

1. 浏览器显示效果为: “给我一个特殊对待” 。

3. 应用场景

a) 当一段文字中其中一部分样式与其他不一样,这时就可以使用span标签来区分。

ol

1. 有序列表

2. 例:

a) 代码

<ol>

     <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

</ol>

b) 效果

 

ul

1. 无序列表

2. 例:

a) 代码

    <ul>

     <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

    </ul>

 

b) 效果

 

 

dl

1. 定义列表

2. 例:

a) 代码

    <dl>

     <dt>定义列表标题</dt>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

        <dd>定义列表项</dd>

    </dl>

 

b) 效果

 

SEO

1. SEO(Search Engine Optimization),中文是“搜索引擎优化”的意思,是隶属于SEM(搜索引擎营销,英文:Search Engine Marketing)之下。

2. 部分方法

a) 页面标签语义化

i. 如:该是段落就用段落标签“p”,该是标题就用标题标签“hn”,不要什么都用“div”标签来模仿。

ii. 例如:一个标题“我爱中国”,你用“div”标签配合样式虽然可以模拟出标题来,但搜索引擎也只会将你模拟出来的标题当作“块”,而不会当作标题,但你用“h”标签就不一样了,搜索引擎会将其作为标题处理。

b) 使用对SEO有利的标签

i. 如:h1/h2/h3/strong/em......

ii. 合理优化,不要刻意过分优化,免得被搜索引擎拉入黑名单。

c) 提高页面关键字密度 。

d) ......等等 。

选择符/选择器 原则:使用选择符要准确选择目标又不影响其他 选择符详解 Id选择符

1. 用“#”开头跟着页面中某个元素的id属性值

2. 特点:一个页面中元素id值不能重复,必须唯一。

3. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>选择符</title>

    <style>

#box1{

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

<div id="box1">box1</div>

    <div id="box2">box2</div>

</body>

</html>

群组选择

1. 群组选择符是由多个选择符对象(如:”#id”或”.clazz”等)和逗号组成的。

a) 多个选择对象用逗号(“,”)隔开。

2. 产生原因:一群元素需要共用一组样式。

3. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>选择符</title>

    <style>

#box1,#box2{    /* 用逗号隔开 */

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

<div id="box1">box1</div>

    <div id="box2">box2</div>

</body>

</html>

类选择符 (class)[最常用]

1. 实际工作中相对于id选择符用的较多。

a) Id也用,但比类选择符少了很多。

2. 可以理解为可以重复使用的id 。

3. 产生原因:一大群元素需要共用同一组样式。

a) 这时再使用群组选择符就不方便了,代码会非常累赘 。

4. 特点:

a) 可重复使用,使用上非常灵活。

b) 一个元素可同时使用多个,只需要在多个类之间用空格隔开即可

i. 如 : “<div class="box1 box2">box2</div>” 。

ii. 理论上可以同时指定无数个 。

5. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /> 

<title>选择符</title>

    <style>

.box1{

width:300px;

height:200px;

background:red;

}

.box2{

border:1px solid blue;

}

</style>

</head>

<body>

<div class="box1">box1</div>

    <div class="box1 box2">box2</div> 

</body>

</html>

类型选择符/元素选择符

1. 使用元素的类型来做选择符,举例如下:

a) “div{…样式…}” 。

2. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>选择符</title>

    <style>

div{

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

 

        <div>box1</div>

        <div>box2</div>

        <div>box3</div>

        

        <p>p1</p>

        <p>p2</p>

        <p>p3</p>

    

</body>

</html>

包含选择符/后代选择符

1. 格式:“ E  F {…样式…} ”

a) E和F都表示元素(不一定是元素,其实还可以是其它的选择符,如 “p .clazz #myId {...}”),并且两元素之间使用空格隔开 。

b) 包含选择符,该选择器定位元素E的后代中所有元素F  。

2. 嵌套

a) 包含选择符可以包含多层,如:“E F G H…{…样式…}” 。

b) 一般开发中不会包含太多层,差不多3层已经算长的了。

3. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>选择符</title>

    <style>

div p{    /* div和p元素之间使用空格隔开 */

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

 

        <div>

         <p>p1</p>

        </div>

        

        <div>

         <span>

             <p>p2</p>

            <span>

        </div>

        

        <p>p3</p>

    

</body>

</html>

通配符

1. 格式:*{…样式..}

a) 直接用“*”跟样式。

2. 使用通配符会选中页面中所有的元素,所以通配符的性能自然就不高了,所以不推荐使用 。

3. 可以说是一个没用的选择符,一般不用 。

优先级 元素选择符 (“1”)

1. 可以将元素选择符的优先级看成1 。

2. 同级覆盖

a) 例:

i. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

li{background:red;}  /* 会被覆盖掉 */

li{background:blue;}

</style>

</head>

<body>

<ol>

         <li></li>

            <li></li>

            <li></li>

        </ol>

</body>

</html>

ii. 效果

 

 

3. 结合包含选择符使用(不同级)

a) 同级样式默认后者覆盖前者 。

b) 将一个元素选择符看做1 ,那么当元素结合后代一起使用时,就看谁嵌套的多了,每多嵌套一个元素就加1,最后数值累加最大的优先级最高。

c) 例:

i. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

ol li{background:red;} /* 1+1 */ /* 数值累加最大,所以优先级最大 */

li{background:blue;}/* 1 */

</style>

</head>

<body>

<ol>

         <li></li>

            <li></li>

            <li></li>

        </ol>

</body>

</html>

ii. 效果

 

类选择符 (“10”)

1. 可以将类选择符的优先级看成10

a) 优先级:元素选择符(1) < 类选择符(10)

b) 注意:虽然上面我们说元素选择符优先级可以看成1,但这并不代表10个元素选择符包含就等于一个类选择符,这是不可能的,它们是两个层面上的,无论元素选择符包含多少级都小于类选择符。

2. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

.list{background:green;} /* 10 */  /* 会作用后3行 */

ol li{background:red;} /* 1+1 */   /* 会作用前3行*/

li{background:blue;}  /* 1 */

</style>

</head>

<body>

<ol>

         <li></li>

            <li></li>

            <li></li>

            <li class="list"></li>

            <li class="list"></li>

            <li class="list"></li>

        </ol>

</body>

</html>

b) 效果

 

3. 同级覆盖

a) 注意:同级样式前者会覆盖后者,这里的前后顺序指的是样式的书写顺序,跟class属性值的顺序无关(容易弄错)。

b) 例:

i. 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

.list1{background:green;} /* 10 */

.list2{background:yellow;} /* 10 */  

        /* 如果list1与list2被同时使用了,那么list2会覆盖list1  */

</style>

</head>

<body>

<ol>

            <li class="list2 list1"></li>  <!—注意:跟这里顺序无关 -->

            <li class="list1"></li>

        </ol>

</body>

</html>

ii. 效果

 

id 选择符

1. Id选择符优先级可以看成数值100

a) 元素选择符(1)< 类选择符(10)< id选择符(100)

b) 同样不是10个类选择符就能抵得上一个id选择符的,它们根本就不是一个层面上的。

2. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

#did{background:red;} /* 100 */

.list1{background:green;} /* 10 */

.list2{background:yellow;} /* 10 */

</style>

</head>

<body>

<ol>

            <li class="list2 list1" id="did"></li>

            <li class="list1"></li>

        </ol>

</body>

</html>

b) 效果

 

行间样式

1. 行间样式的优先级可以看成数值1000

a) 元素选择符(1)< 类选择符(10)< id选择符(100)< 行间样式(1000)

2. 行间样式实际开发中基本上不用。

3. 例:

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

#did{background:red;} /* 100 */

.list1{background:green;} /* 10 */

.list2{background:yellow;} /* 10 */

</style>

</head>

<body>

<ol>

            <li class="list2 list1" id="did" style="background:purple;"></li> 

            <li class="list1"></li>

        </ol>

</body>

</html>

 

b) 效果

 

js动态样式

1. Js可以动态的修改样式,我们可以将它优先级看成数值10000

a) 元素选择符(1) < 类选择符(10) < id选择符(100) < 行间样式(1000) < js(10000)

b) css本身选择符的优先级到行间样式就到顶了,但如果硬要说有比行间样式优先级更高的话,那也就是js动态修改样式了。

2. 例 :

a) 代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>优先级</title>

    <style>

li{height:30px;}

#did{background:red;} /* 100 */

.list1{background:green;} /* 10 */

.list2{background:yellow;} /* 10 */

</style>

</head>

<body>

<ol>

            <li class="list2 list1" id="did" style="background:purple;"></li>

            <li class="list1"></li>

        </ol>

        <script>

document.getElementById('did').style.background='#000'; // 10000

</script>

</body>

</html>

b) 效果

 

小测试

1. 问:下面两条样式,哪一条优先级高

a) A.  #header #div1 .box1 div .section p .link{…………}

b) B .  #some .base #font #call a{…………}

2. 答:B

a) 不要认为长的优先级就高,需要看选择符的优先级。

i. 像上面问题中的样式,一般开发中不会这么写的,实际开发中包含两三层就差不多了。

伪类 什么是伪类 ?

1. 元素后跟随一个冒号,如:“a:link{……}” 。

2. 伪类用于向被选中元素添加特定的样式,伪类是元素在特定情况下才具备的。

伪类的一些问题

1. IE6不支持a标签以外其他任何标签的伪类 。

2. IE6以上的浏览器支持所有标签的hover伪类 。

a) 这里“所有”指的是鼠标能放上去的标签,像“<br/>”就除外。

a标签

1. a标签有四个状态,这四个状态就叫做a标签的四个伪类,四个分别如下:

a) link (未访问)[默认]

b) hover (鼠标悬停/鼠标划过)

c) active (链接激活/鼠标按下)

d) visited (访问过后/点击过后)

2. 四个伪类书写是有顺序的,如下:

a) 依次按照link、visited、hover、active的顺序来写 。

i. 如果将visited写在最后面,那么hover和active就始终会被visited伪类样式覆盖从而失效,visited是一个持久状态 。

3. 一般网站中很少四个伪类全用,而只用hover一个。

工作中首先会给a标签加一个样式去控制它所有状态,再给它加一个hover伪类。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹