当前位置：首页 > news >正文

web前端开法技术课堂笔记07

news 2026/6/24 4:14:14

超链接

1.超链接的介绍

每个网页都是由众多的网页组成，网页之间通常是通过链接的方式相互关联的。超链接方便在各个页面的跳转。

2.超链接分为

内部链接，外部链接，电子邮件链接，锚记链接，空链接，交互等。

超链接形式的改变

a{	display:none;/*隐藏*/display:block;/*显示块元素*/display:inline;/*行元素*/display:inline-block;/*行内块元素*/}

内部链接

1.内部链接的介绍

内部链接指超链接的网页和链接的对象的网页在同一网站内。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>信息工程学院</title></head><body><h1>信息工程学院</h1><h2><a href="index.html">返回学院首页</a></h2><h2><a href="xygk.html">学院概况</a></h2><h2><a href="xyfm.html">学院风貌</a></h2></body>
</html>

锚记链接

1.锚记链接介绍

锚记链接是一种内部链接，锚记链接的链接对象是链接当前页面的一部分。

2.链接方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{text-decoration: none;/*去掉下划线*/color: #686868;display: block;width: 400px;height: 200px;}</style></head><body>//href="#id名"<a href="#wenbu"><img src="img/返回顶部.png"></a>//锚记链接，链接到尾页<h1 id="top">首页</h1><a>首页</a><a>页面1</a><a>页面2</a><a>页面3</a><h1 id="wenbu">尾页</h1><a href="#top"><img src="img/返回顶部.png"></a>//锚记链接，链接到首页</body>
</html>

空链接

1.空链接介绍

链接位置是#的链接是空链接，空链接一般用于前期的样式调试。

2.空连接的写法

<a href="#">空链接</a>

给同一页的超链接设置成不同的颜色

方法一

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{text-decoration: none;/*去掉下划线*/display: block;}.color-red{color: #FF0000;	}.color-orange{color:orange;}.color-yellow{color: #FFFF00;	}.color-green{color: #00FF00;	}.color-cyan{color: #00FFFF;background-color: #8B00FF;}.color-purple{color: #8B00FF;	}</style></head><body><a href="#" class="color-red">空链接</a><a href="#" class="color-orange">内部链接</a><a href="#" class="color-yellow">外部链接</a><a href="#" class="color-green">锚记</a><a href="#" class="color-cyan">电子邮件</a><a href="#" class="color-purple">点我下载</a></body>
</html>

首先以.自定义吗{颜色：}的格式定义一个颜色

.color-red{color: #FF0000;	}

再在超链接中href="#"链接class="自定义名"

<a href="#" class="color-red">空链接</a>

方法二：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{text-decoration: none;/*去掉下划线*/display: block;}#link1{color: #FF0000;}#link2{color: orange;}#link3{color: #FFFF00;}#link4{color: #00FF00;}#link5{color: #00FFFF;}#link6{color: #8B00FF;}</style></head><body><a href="#" id="link1">空链接</a><a href="#" id="link2">内部链接</a><a href="#" id="link3">外部链接</a><a href="#" id="link4">锚记</a><a href="#" id="link5">电子邮件</a><a href="#" id="link6">点我下载</a></body>
</html>

首先以#自定义吗{颜色：}的格式定义一个颜色

#link1{color: #FF0000;}

再在超链接中href="#"链接id="自定义名"

<a href="#" id="link1">空链接</a>

写4个标题一，分别设置样式为：第1和3同一样式，2和4同一样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{text-decoration: none;/*去掉下划线*/display: block;}.style1{color: #8B00FF;text-decoration: none;display: block;width: 100px;height: 100px;}.style2{color: #00FF00;text-decoration: none;display: block;width: 200px;height: 300px;}</style></head><body><h1 class="style1">首页</h1><h1 class="style2">页面1</h1><h1 class="style1">页面2</h1><h1 class="style2">页面3</h1></body>
</html>