超链接标签

谁践踏了优雅 2023-10-03 22:53 15阅读 0赞

![5d2dae599bc64173f64691e9bed60253.png][]

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
  
 <a href="文本标签.html">这是一个超链接01</a>
 <a href="">这是一个超链接02</a> 
 <a href="abc">这是一个超链接03</a>
 <a href="https://www.baidu.com" target="_self">这是一个超链接04</a>
 <a href="https://www.baidu.com" target="_blank">这是一个超链接05</a>
 
 <a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
 </body>
 </html>

设置锚点

设置锚点：  
应用场合：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。

同一个页面不同位置的跳转：

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <a name="1F"></a>
 <h1>手机</h1>
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 华为p40
 <a name="2F"></a>
 <h1>化妆品</h1>
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 大宝
 <a name="3F"></a>
 <h1>母婴产品</h1>
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 奶粉
 <a name="4F"></a>
 <h1>图书</h1>
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 thinking in java
 <a href="#1F">手机</a>
 <a href="#2F">化妆品</a>
 <a href="#3F">母婴产品</a>
 <a href="#4F">书籍</a>
 </body>
 </html>

不同页面利用锚点：

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <a href="设置锚点.html#3F">超链接</a>
 </body>
 </html>

[5d2dae599bc64173f64691e9bed60253.png]: https://img-blog.csdnimg.cn/img_convert/5d2dae599bc64173f64691e9bed60253.png