html超链接和锚点

最新推荐文章于 2026-04-01 01:15:50 发布

原创最新推荐文章于 2026-04-01 01:15:50 发布 · 1.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

html超链接和锚点

1.超链接

<a…/>元素主要可以包含文本、图像、表单元素等内容
<a…/>元素有3个重要的属性；
1.href 指定超链接所关联的另一个资源如果是要跳网站那这个值就是我们要跳转到那个网站的地址
2.target 指定使用框架集中的哪个框架来装载另一个资源，这些属性值可以是 _self 、_blank 、_top、_parent，分布代表使用自身、新窗口、顶层框架、父框架
3.media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  <a.../>元素主要可以包含文本、图像、表单元素等内容 -->
    <a href="http://www.crazyit.org">
        <b>疯狂java联盟</b>
    </a>
    <br>
    <a href="http://www.crazyit.org">
        <img src="logo.jpg">
    </a>
    <br>
    <!-- <a.../> 元素有3个重要的属性
         1.href 指定超链接所关联的另一个资源 如果是要跳网站那这个值就是我们要跳转到那个网站的地址
         2.target 指定使用框架集中的哪个框架来装载另一个资源，这些属性值可以是 _self 、_blank 、_top、_parent，分布代表使用自身、新窗口、顶层框架、父框架
         3.media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才生效
    -->
    <br>
    <a href="http://www.crazyit.org" target="_blank">
        <em>疯狂java联盟</em>
    </a>
    <br>
    <a href="http://www.crazyit.org" target="_self">
        <small>疯狂java联盟</small>
    </a>
    <br>
    <a href="文本格式化元素.html" target="_self">
        <small>相对地址跳转</small>
    </a>
    <br>
    <a href="ftp://www.crazyit.org/tomcat.rar">下载tomcat</a>
    <br>
    <a href="mailto:265303820@qq.com">写信给我</a>
    <br>

    <a href="锚点.html#test">跳转锚点</a>
    <!-- 定位到指定锚点需要在URL资源后指定锚点名称，锚点名和URL之间使用#隔开 -->
</body>
</html>

展示效果：
在这里插入图片描述

2.锚点

定义：<a…/>元素使用name属性，生成一个锚点，同时锚点不会展示任何内容
定位到锚点，需要在URL之后指定锚点名称，锚点名称和URL使用#隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        菩萨蛮·雨晴夜合玲珑日

        唐代：温庭筠

        雨晴夜合玲珑日，万枝香袅红丝拂。闲梦忆金堂，满庭萱草长。
        绣帘垂箓簌，眉黛远山绿。春水渡溪桥，凭栏魂欲销。
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- 下面代码会生成一个命名锚点 -->
    <a name="test">qqqqqqqqqqqqqqqqqqq</a>
    <!-- 该命名锚点不会展示任何内容 -->
</body>
</html>

展示效果：
在这里插入图片描述