前端开发语言学习-笔记2-常见标签和浅析SEO

最新推荐文章于 2022-08-14 20:36:54 发布

zhangliang_852469

最新推荐文章于 2022-08-14 20:36:54 发布

阅读量264

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39944891/article/details/100930588

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

常见标签和浅析SEO
1、img 标签

<img src="miaowei.jpg" alt="美女">

2、a标签

<a href="#" ></a>

功能一、跳转地址

<a href="www.baidu.com" target="_blank">sss</a>

target 定义页面中所有的链接为新窗口打开

<head>
	<title>document</title>
	<meta charset="utf-8">
	<base target="_blank"> 定义页面中所有的链接为新窗口打开
	<style type="text/css">

	</style>
</head>
<body>
	<div id="box"></div>
	<img src="miaowei.jpg" alt="美女">
	<a href="https://www.baidu.com">sss</a>

功能二、当a标签中的href中不在是链接，而是文件地址，则是下载文件
功能三、锚点（页面定位）

<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<meta charset="utf-8">
	<base target="_blank"> 定义页面中所有的链接为新窗口打开
	<style type="text/css">

	</style>
</head>
<body>
	<div id="box">
		<a href="#box1">秦时明月</a>
		<a href="#box2">诸子百家</a>
		<a href="#box3">万里长城</a>
		<a href="#box4">刀光剑影</a>
		<a href="#box5">揭竿而起</a>
		<a href="#box6">长平之战</a>
	</div>
	<div id="box1" style="height: 500px">
	秦时明月<br />...............<br />
	</div>
	<div id="box2" style="height: 500px">
	诸子百家<br />...............<br />
	</div>
	<div id="box3" style="height: 500px">
	万里长城<br />...............<br />
	</div>
	<div id="box4" style="height: 500px">
	刀光剑影<br />...............<br />
	</div>
	<div id="box5" style="height: 500px">
	揭竿而起<br />...............<br />
	</div>
	<div id="box6" style="height: 500px">
	长平之战<br />...............<br />
	</div>
</body>
</html>

总结：
链接、下载、锚点的三个作用。

3、h 标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

4、p 段落标签

<p>段落</p>

5、strong 强调加粗

<strong> 强调</strong>

6、em 强调

<em> 强调（内容显示为斜体）</em>

7、 span 区分样式标签

<span> 区分样式</span>

8、ol 有序列表

<ol>
	<li>列表</li>
	<li>列表</li>
	<li>列表</li>
	<li>列表</li>
</ol>

9、ul无序列表

<ul>
	    <li>列表</li>
    	<li>列表</li>
    	<li>列表</li>
    	<li>列表</li>
</ul>

10、dl定义列表

<dl>
	<dt>定义列表标题</dt>
	<dd>定义列表项</dd>
	<dd>定义列表项</dd>
	<dd>定义列表项</dd>
	<dd>定义列表项</dd>
</dl>

11、浅析SEO
部分方法：
a、页面标签语义化；
b、使用对SEO有利的标签：h1、h2、h3、strong、em…
c、提高页面关键词密度

12、选择符
a、id选择符不能重复

  <div id="box1">块</div>
  #box1{width: 100px; height: 100px; background: red;}

。。。
b、群组选择符

 #box1,#box2,#box3{width: 100px; height: 100px; background: red;}

c、 class 选择符

.box1{width: 100px; height: 100px; background: red;}

e、包含选择符

div p span{width: 100px; height: 100px; background: red; }

f、通配符

* {border:1px solid red;}

13、选择符优先级

a、同级样式默认是后者覆盖前者；
b、class中多个名称不会前者后者覆盖前者；
c、id选择器优先级高于class优先级；
d、行间样式优先级高于id选择器；

14、伪类：用于向被选中元素添加特殊效果（元素在特定情况下才具备的）。
a标签的伪类
link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后）
注意：其他的标签一般支持hover

		<style type="text/css">
	/*伪类
	link 默认
	hover 鼠标悬停
	active 链接激活
	visited 访问过后
	*/
	a:link{font-size: 60px; text-decoration: none; color: green;}
	a:visited{color: black;}
	a:hover{color: red; text-decoration: underline;}
	a:active{color: yellow;}

</style>