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

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

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

Posted on 2026-04-05 21:45  福寿桃呐  阅读(0)  评论(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>