Web前端开发技术第五周周五课堂笔记

Posted on 2026-04-05 21:45  福寿桃呐  阅读(15)  评论(0)    收藏  举报

内部链接

页面间内部链接

用于跳转到本站内的其他HTML页面,不跨域名,是网站页面跳转的主要形式。

页面内锚点链接(锚记链接)

锚记(书签、锚点链接):页面很长的内部页面跳转

写法: href="#id名"

步骤:

1.先下载好跳转按钮,将下载好的跳转按钮保存到本代码所属文件中的img文件中 。

2.然后在代码的< body >中链接所下载的跳转按钮即可。

<a href="#top"><img src="img/返回顶部.png"/></a>
内部链接常用属性

target="_self" :默认值,在当前窗口打开内部链接

target="_blank" :在新窗口打开本站内部页面

href="#" :空内部链接,点击回到页面顶部

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>赤橙黄绿青蓝紫</title>
		<style type="text/css">
			a.link1{
				text-decoration: none; /*去掉下划线*/
				color: #FF0000;
			}
			a.link2{
				text-decoration: none; /*去掉下划线*/
				color: #FF7F00;
			}
			a.link3{
				text-decoration: none; /*去掉下划线*/
				color: #FFFF00;
			}
			a.link4{
				text-decoration: none; /*去掉下划线*/
				color: #0080000;
			}
			a.link5{
				text-decoration: none; /*去掉下划线*/
				color: #00FFFF;
			}
			a.link6{
				text-decoration: none; /*去掉下划线*/
				color: #0000FF;
			}
			a.link7{
				text-decoration: none; /*去掉下划线*/
				color: #800080;
			}
		</style>
	</head>
	<body>
		<a href="#"class=link1>空连接</a><br />
		<a href="#"class=link2>内部链接</a><br />
		<a href="#"class=link3>外部链接</a><br />
		<a href="#"class=link4>锚记</a><br />
		<a href="#"class=link5>电子邮件</a><br />
		<a href="#"class=link6>点我下载</a><br />
		<a href="#"class=link7>JS互交</a><br />
	</body>
</html>

为4个标题一,分别设置样式为:第1和3同一样式,2和4同一样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				text-decoration: none; /*去掉下划线*/
				color: #00BBDD;
			}
			.b2{
				text-decoration: none; /*去掉下划线*/
				color: #686868;
			}
			.b1{
				text-decoration: none; /*去掉下划线*/
				color: #00BBDD;
			}
			.b2{
				text-decoration: none; /*去掉下划线*/
				color: #686868;
			}
		</style>
	</head>
	<body>
		<h1 class="b1">标题一</h1>
		<h1 class="b2">标题一</h1>
		<h1 class="b1">标题一</h1>
		<h1 class="b2">标题一</h1>
	</body>
</html>

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3