尚学堂-06-HTML-超链接标签学习+锚点学习

最新推荐文章于 2022-10-08 19:08:32 发布

奔跑的小脑斧

最新推荐文章于 2022-10-08 19:08:32 发布

阅读量133

点赞数

分类专栏： html学习

本文链接：https://blog.csdn.net/abc1234z0/article/details/103098154

版权

html学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
 <head>
  <title>超链接标签学习</title>
  <meta http-equiv="content-type" content="text/html" charset="utf-8" />
 </head>
 <body>
  <h3>超链接标签学习</h3>
  <hr />
  <!--
   超链接标签学习:
     a标签：href:要跳转的网页资源路径
            本地资源：相对路径
            网络资源：网络资源（网页）的URL
       target：指明要跳转的网页资源的显示位置
       _self 在当前页中刷新显示
       _blank 在新的标签中显示
       _top   在顶层页面中显示
       _parent 在父级页面中显示
     注意：
       超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片 
   锚点学习：
      作用：在一张网页中进行资源跳转
     使用：
       先使用超链接标签在指定的网页位置增加锚点，格式为：
       <a name="锚点名"></a>
     使用a标签可以跳转到指定的锚点，达到网页内部资源跳转的目的，格式：
        <a href="#锚点名">访问方式</a>
        
  -->
  
  <!--本地资源-->
  <h4>本地资源：</h4>
  <a href="05-HTML-图片标签学习.html" target="_blank">图片标签学习</a>
  <a href="04-HTML标签（列表标签）.html"><img src="img/3.gif" height="200px"/></a>
  <hr />
  <!--网络资源-->
  <h4>网络资源：</h4>
  <a href="http://www.taobao.com">淘宝一下</a><br />
  <a href="http://www.taobao.com"><img src="img/4.png"/></a>
  <hr />
  <!--锚点学习：-->
  <h4>锚点学习：</h4>
  <a href="锚点学习"></a>
 </body>
</html>

运行结果为
在这里插入图片描述

 <html>
 <head>
  <title>锚点学习</title>
  <meta charset="utf-8" />
 </head>
 <body>
  <h3>锚点学习</h3>
  <hr />
  <h4>目录</h4>
  <a href="#first">第一章</a><br />
  <a href="#second">第二章</a><br />
  <a href="#third">第三章</a><br />
  <a href="#forth">第四章</a><br />
  <p>第一章：</p>
  <a name="first"></a>
  <p>
   靖康耻，犹未雪；臣子恨，何时灭
   壮志饥餐胡虏肉，笑谈渴饮匈奴血
  </p>
  <p>
   靖康耻，犹未雪；臣子恨，何时灭
   壮志饥餐胡虏肉，笑谈渴饮匈奴血
  </p>
  <p>
   靖康耻，犹未雪；臣子恨，何时灭
   壮志饥餐胡虏肉，笑谈渴饮匈奴血
  </p>
  <p>第二章：</p>
  <a name="second"></a>
  <p>
   独上高楼望尽天涯路
  </p>
  <p>
   独上高楼望尽天涯路
  </p>
  <p>
   独上高楼望尽天涯路
  </p>
  <p>第三章</p>
  <a name="third"></a>
  <p>
   衣带渐宽而终不悔，为伊消得人憔悴
  </p>
  <p>
   衣带渐宽而终不悔，为伊消得人憔悴
  </p>
  <p>
   衣带渐宽而终不悔，为伊消得人憔悴
  </p>
  <p>第四章</p>
  <a name="forth"></a>
  <p>
   众里寻他千百度
   蓦然回首那人却在灯火阑珊处
  </p>
  <p>
   众里寻他千百度
   蓦然回首那人却在灯火阑珊处
  </p>
  <p>
   众里寻他千百度
   蓦然回首那人却在灯火阑珊处
  </p>
  <a href="#">回到顶部</a>
 </body>
</html>

运行结果为
在这里插入图片描述

奔跑的小脑斧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尚学堂-06-HTML-超链接标签学习+锚点学习

<html> <head> <title>超链接标签学习</title> <meta http-equiv="content-type" content="text/html" charset="utf-8" /> </head> <body> <h3>超链接标签学习</h3&g...
复制链接

扫一扫