上一节:
下一节:

  HTML 链接



  • HTML链接 | 超链接

    几乎所有网页都有链接。HTML链接是超链接。您可以单击链接并跳转到另一个文档。当您将鼠标移到链接上时,鼠标箭头将变成一只小手。
    注意:链接不必是文本。它可以是图像或任何其他HTML元素。
  • HTML链接 | 语法

    在HTML中,链接使用<a>标记定义: 例如:
    <a href="https://www.jc2182.com/">蝴蝶教程</a>
    
    尝试一下
    该href属性指定链接的目标地址(https://www.jc2182.com/)。 该链接的文本是可见部分(访问我们的首页)。 单击链接文本将发送到指定的地址。
    注意:如果子文件夹地址末尾没有正斜杠,则可能会向服务器生成两个请求。许多服务器会自动在地址末尾添加正斜杠,然后创建新请求。
  • 本地链接

    上面的示例使用绝对URL(完整的Web地址)。 使用相对URL(不包含http:// www ....)指定本地链接(指向同一网站的链接)。 例如:
    <a href="css/test.html">蝴蝶教程</a>
    
    尝试一下
  • HTML链接颜色

    默认情况下,链接将显示如下(在所有浏览器中):
    • 未访问的链接带有下划线和蓝色
    • 访问链接(鼠标悬停)带有下划线和紫色
    • 活动链接带有下划线和红色
    您可以使用CSS更改默认颜色:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a:link {
       color: green;
       background-color: transparent;
       text-decoration: none;
    }
    a:visited {
       color: pink;
       background-color: transparent;
       text-decoration: none;
    }
    a:hover {
       color: red;
       background-color: transparent;
       text-decoration: underline;
    }
    a:active {
       color: yellow;
       background-color: transparent;
       text-decoration: underline;
    }
    </style>
    </head>
    <body>
    
    <h2>链接颜色</h2>
    
    <p>您可以修改默认的链接颜色。</p>
    
    <a href="css/test.html" target="_blank">蝴蝶教程</a> 
    
    </body>
    </html>
    
    尝试一下
  • HTML链接 | 目标属性

    target属性可以具有以下值之一:
    • _blank - 在新窗口或选项卡中打开链接的文档
    • _self - 在单击的同一窗口/选项卡中打开链接的文档(这是默认设置)
    • _parent - 在父框架中打开链接的文档
    • _top - 在窗口的完整正文中打开链接的文档
    • framename - 在命名框架中打开链接文档
    此示例将在新的浏览器窗口/选项卡中打开链接的文档:
    <a href="css/test.html" target="_blank">蝴蝶教程</a>
    
    尝试一下
    提示:如果您的网页被锁定在框架中,您可以使用target="_top"以突破框架:
    <a href="css/test.html" target="_top">蝴蝶教程</a>
    
    尝试一下
  • HTML链接 | 图像链接

    将图像用作链接是很常见的:
    <a href="https://www.jc2182.com/">
     <img src="images/logo.png" alt="蝴蝶教程" style="width:120px;height:auto;border:0;">
    </a>
    
    尝试一下
    注意: border:0;添加以防止IE9(及更早版本)在图像周围显示边框(当图像是链接时)。
  • 链接标题

    title属性指定有关元素的额外信息。当鼠标在元素上移动时,信息通常显示为工具提示文本。
    <a href="https://www.jc2182.com/" title="链接到蝴蝶教程首页">
    蝴蝶教程
    </a>
    
    尝试一下
  • HTML链接 | 创建书签

    HTML书签用于允许读者跳转到网页的特定部分。如果您的网页很长,书签会非常有用。要创建书签,您必须先创建书签,然后添加一个链接。单击链接后,页面将滚动到带有书签的位置。例如: 首先,使用id属性创建书签:
    <h2 id="title4">标题4</h2>
    
    然后,在同一页面中添加指向书签的链接(“跳转到标题4”):
    <a href="#title4">跳转到标题4</a>
    
    或者,从另一页面添加指向书签的链接(“跳转到标题4”):
    <a href="html_demo.html#title4">跳转到标题4</a>
    
  • 外部路径

    可以使用完整URL或相对于当前网页的路径引用外部页面。 此示例使用完整URL链接到网页:
    <a href="https://www.jc2182.com/">蝴蝶教程</a>
    
    此示例链接到位于当前网站的html文件夹中的页面:
    <a href="css/test.html">蝴蝶教程</a>
    
    此示例链接到与当前页面位于同一文件夹中的页面:
    <a href="test.html">蝴蝶教程</a>
    
  • 章节总结

    可以使用完整URL或相对于当前网页的路径引用外部页面。
    • 使用<a>元素定义链接
    • 使用该href属性定义链接地址
    • 使用该target属性可以定义打开链接文档的位置
    • 使用<img>元素(在<a​​>内)将图像用作链接
    • 使用id属性(id =“ value ”)在页面中定义书签
    • 使用href属性(href =“#value ”)链接到书签
上一节:
下一节: