宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

超连接就是打开另外一个页面，可以是本地的，也可以是网页，也可以通过图片来打开。

一：基础超链接

[html] view plain copy

  1. <span style="font-size:14px;"><!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>超连接</title>  
  6. </head>  
  7. <body bgcolor="#fff">  
  8.     <!– 在同一个网页内的链接–>  
  9.     <a href="http://www.baidu.com">超连接网址</a>  
  10.     <br>  
  11.     <!– 必须在同一目录下文件全名–>  
  12.     <a href="text01.html">链接到本地</a>  
  13.     <br>  
  14.     <!– 图片指定路径，标签嵌套–>  
  15.     <a href="http://www.360.com"><img src="指定图片.png"></a>  
  16.     <br>  
  17.     <!– 电脑上必须安装发邮件工具–>  
  18.     <a href="mailto:2305600865@qq.com">发邮件</a>  
  19.     <br>  
  20.     <a href="下载图片.png">下载,可以指定文本和图片</a>  
  21. </body>  
  22. </html></span>  

HTML超连接-风君子博客

二：认识target属性，默认是在当前页面打开。如果想在新的页面打开，需要设置target="_blank"

[html] view plain copy

  1. <a href="http://www.baidu.com" target="_blank">打开新窗口</a>  

三：锚点链接，所谓锚点链接就是在同一个页面跳到指定位置的方式。这里需要认识一下id。id在同一个html页面中是唯一的。又id当然有名字name,name可以理解为元素的内容。方法，首先通过a标签定义链接，a标签内href改为id.

[html] view plain copy

  1. <a href="#1">锚点1</a>  

在需要的地方定义锚点

[html] view plain copy

  1. <a id="1">锚点1</a>  

全部代码：

[html] view plain copy

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>超连接学习02</title>  
  6. </head>  
  7. <body bgcolor="#fff">  
  8.     <!– target  
  9.     _self默认，当前网页  
  10.     _blank打开新窗口  
  11.     —>  
  12.     <a href="http://www.baidu.com" target="_blank">打开新窗口</a>  
  13.   
  14.     <!– 锚点链接–>  
  15.     <a href="#1">锚点1</a>  
  16.     <a href="#abc">锚点2</a>  
  17.     <a href="#d10">锚点3</a>  
  18.         <br><br><br><br><br><br>  
  19.         <!– id属性在同一个html中是唯一的–>  
  20.         <a id="1">锚点1</a>  
  21.         <br><br><br><br><br><br>  
  22.         <br><br><br><br><br><br>  
  23.         <br><br><br><br><br><br>  
  24.         <br><br><br><br><br><br>  
  25.         <a id="abc">描点2</a>  
  26.         <br><br><br><br><br><br>  
  27.         <br><br><br><br><br><br>  
  28.         <br><br><br><br><br><br>  
  29.         <br><br><br><br><br><br>  
  30.         <a id="d10">描点3</a>  
  31.         <br><br><br><br><br><br>  
  32.         <br><br><br><br><br><br>  
  33.         <br><br><br><br><br><br>  
  34.         <br><br><br><br><br><br>  
  35.         <br><br><br><br><br><br>  
  36. </body>  
  37. </html>  

效果：

HTML超连接-风君子博客