内部链接
页面间内部链接
用于跳转到本站内的其他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>
浙公网安备 33010602011771号