3.标签&选择符&超链接&SEO（SEM）

最新推荐文章于 2022-03-13 10:51:13 发布

无足舞者

最新推荐文章于 2022-03-13 10:51:13 发布

阅读量421

点赞数 1

分类专栏：前端工程师【基础篇】文章标签：标签选择符超链接 SEO css

本文链接：https://blog.csdn.net/u010567918/article/details/79219994

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

常见标签

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> <divid=”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>

</ol>

b) 效果

ul

1. 无序列表

2. 例：

a) 代码

<ul>

</ul>

b) 效果

dl

1. 定义列表

2. 例：

a) 代码

<dl>

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

<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>

<style>

#box1{

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

</body>

</html>

群组选择

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

a) 多个选择对象用逗号（“，”）隔开。

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

3. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

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

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

</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>

<style>

.box1{

width:300px;

height:200px;

background:red;

}

.box2{

border:1px solid blue;

}

</style>

</head>

<body>

</body>

</html>

类型选择符/元素选择符

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

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

2. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

div{

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

<div>box1</div>

<div>box2</div>

<div>box3</div>

</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>

<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>

</body>

</html>

通配符

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

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

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

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

优先级

元素选择符（“1”）

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

2. 同级覆盖

a) 例：

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

li{height:30px;}

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

li{background:blue;}

</style>

</head>

<body>

<ol>

<li></li>

</ol>

</body>

</html>

ii. 效果

3. 结合包含选择符使用（不同级）

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

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

c) 例：

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

li{height:30px;}

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

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

</style>

</head>

<body>

<ol>

</ol>

</body>

</html>

ii. 效果

类选择符（“10”）

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

a) 优先级：元素选择符（1）< 类选择符（10）

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

2. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<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 class="list"></li>

</ol>

</body>

</html>

b) 效果

3. 同级覆盖

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

b) 例：

i. 代码

<!DOCTYPE html>

<html>

<head>

<style>

li{height:30px;}

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

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

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

</style>

</head>

<body>

<ol>

</ol>

</body>

</html>

ii. 效果

id 选择符

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

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

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

2. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

li{height:30px;}

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

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

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

</style>

</head>

<body>

<ol>

</ol>

</body>

</html>

b) 效果

行间样式

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

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

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

3. 例：

a) 代码

<!DOCTYPE html>

<html>

<head>

<style>

li{height:30px;}

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

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

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

</style>

</head>

<body>

<ol>

</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>

<style>

li{height:30px;}

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

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

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

</style>

</head>

<body>

<ol>

</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伪类。

无足舞者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.标签&选择符&超链接&SEO（SEM）

常见标签div1. 表示“块”。2. 例：“块”。3. 常用做网页布局。img [单标签]1. 图片标签。2. 例：“图片名字"/>” 。a) src属性是图片的路径（相对/绝对）b) alt属性的属性值是图片的名字，正常情况下不显示，当图片src定位不到资源时，才显示alt属性值。i. 利于SEO 。 alt属性虽然正常情况下不显示，但对于搜索引擎却是很
复制链接

扫一扫