HTML超链接详解-CSDN博客

本文链接：https://blog.csdn.net/grace666/article/details/52187597

本文详细介绍了HTML中的超链接使用方法，包括如何创建指向其他文档的链接、如何在文档内部设置书签链接，以及如何利用超链接实现页面元素间的跳转等。文章还展示了如何设置超链接的目标窗口以及如何创建锚点方便页面导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.超链接可以是一个字，一个词，一个词组，或者是一幅图，可以通过点击跳转到新的文档中，或者当前文档的某个位置

2.当鼠标移动到超链接上，箭头会变成一个小手

3.通过<a>标签来创建超链接

4.<a>标签语法有两种使用方式：

（1）通过href属性：创建指向另一个文档的链接

（2）通过name 属性：创建文档内的书签

5.通过Target属性，定义被链接的文档显示在何处

6.通过name属性，规定锚（anchor）的名称，锚的好处就是可以创建直接跳到该锚（如，页面中某小节）的链接

（1）锚的语法：

<span style="font-family:Microsoft YaHei;"><a name="label">锚</a></span>

（2）可以用id属性代替name属性

示例代码：

test_tag.html

<span style="font-family:Microsoft YaHei;"><html>

<head>
<style type="text/css">
    h1 {color: red}
    p {color: black}
    h2{color: yellow}

    body {background: pink}
</style>

</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">

    <br/>
    <a name="test" href="http://www.csdn.net">测试页面内链接</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    111111111111111111111111111111111111111111111111111
    <img src="testimg2.jpg" width="104" height="142"/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    222222222222222222222222222222222222222222222222222
    <img src="testimg1.jpg" width="104" height="142">This is a pic.</img>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    333333333333333333333333333333333333333333333333333
    <a href="http://www.taobao.com" target="_blank"><img src="testimg1.jpg" width="104" height="142"/></a>
    <br/><br/><br/><br/><br/><br/>
    <a href="#">回顶部</a>      <a href="#test">回到“测试页面内链接”</a>
    <a href="test_a.html#test4">回test_a页面</a>

</body>
</html></span>

展示效果：

注：

   1）<a   href= "# "> 链接一个空锚点，默认链接到网页顶部 </a>
   2）<a   href= "#meizz "> 链接到本网页里name=meizz的锚点 </a>
   3）<a   href= "test.html#meizz "> 链接到test.html里meizz的锚点 </a>

7.跳出框架示例代码：

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">
    <!--a标签，链接-->
    <a href = "http://www.baidu.com">This is 1 link.</a>
    <p><a href="http://www.sina.com">This is 2 link.</a></p>
    <!--img标签，图像-->
    <br/>
    <a name="test" href="http://www.csdn.net">测试页面内链接-1</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    测试页面内链接-2
    <img src="testimg2.jpg" width="104" height="142"/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    测试页面内链接-3
    <img src="testimg1.jpg" width="104" height="142">This is a pic.</img>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    测试页面内链接-4
    <a href="http://www.taobao.com" name="test4" target="_blank"><img src="testimg1.jpg" width="104" height="142"/></a>
    <br/><br/><br/><br/><br/><br/>
    <a href="#">回顶部</a>        <a href="test_tag.html" target="_top">回test_tag</a>

</body>
</html></span>

展示效果：