HTML学习笔记6：超链接

最新推荐文章于 2025-08-14 11:52:26 发布

提辖鲁

最新推荐文章于 2025-08-14 11:52:26 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏： Web # HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/lj402159806/article/details/122440959

Web 同时被 2 个专栏收录

37 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

本文介绍了超链接的基本用法，包括外部链接、内部链接及锚点链接的实现方式。通过实例展示了如何使用a标签创建指向不同目标的链接。

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

超链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--a标签 超链接-->
<!--href属性 超链接路径-->
<a href="https://www.baidu.com">百度一下</a>
<br/>
<!--target属性 超链接打开窗口方式-->
<!--_self	默认值，在原来窗口打开链接-->
<!--_blank	在新窗口打开链接-->
<!--_parent	在父窗口打开链接-->
<!--_top	在顶层窗口打开超链接-->
<a href="https://www.w3school.com.cn/html/index.asp" target="_blank">
    <img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png"
         alt="HTML"/>
</a>
</body>
</html>

在这里插入图片描述

内部链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部链接1</title>
</head>
<body>
<p>
    <a href="2-inner-link-2.html">跳转到页面2</a>
</p>
<p>
    <a href="2-inner-link-3.html">跳转到页面3</a>
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部链接2</title>
</head>
<body>
<h1>页面2</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部链接3</title>
</head>
<body>
<h1>页面3</h1>
</body>
</html>

在这里插入图片描述

锚点链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
<div>
    <!--href锚点链接 指向#{id}-->
    <a href="#title1">标题1</a><br/>
    <a href="#title2">标题2</a><br/>
    <a href="#title3">标题3</a><br/>
</div>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<!--定义id-->
<div id="title1">
    <h3>标题1</h3>
    <ul>
        <li>内容1</li>
        <li>内容1</li>
        <li>内容1</li>
    </ul>
</div>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<div id="title2">
    <h3>标题2</h3>
    <ul>
        <li>内容2</li>
        <li>内容2</li>
        <li>内容2</li>
    </ul>
</div>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<div id="title3">
    <h3>标题3</h3>
    <ul>
        <li>内容3</li>
        <li>内容3</li>
        <li>内容3</li>
    </ul>
</div>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
<p>空格</p>
</body>
</html>

在这里插入图片描述