超链接标签

最新推荐文章于 2024-07-23 08:49:01 发布

卡夫卡的baby

最新推荐文章于 2024-07-23 08:49:01 发布

阅读量257

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125501614

版权

本文详细介绍了HTML中a标签的使用，包括文本超链接、图像超链接的创建，以及href属性的各种用法，如空链接、访问根目录等。同时，还涉及到JavaScript阻止跳转和目标属性(target)的设置，以及title属性在优化中的作用。

摘要由CSDN通过智能技术生成

超链接标签★★★★

a超链接标签的作用：用于从一个页面链接到另一个页面。

a超链接标签的分类：文本超链接、图像超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body><br>
    href="" 链接跳转的地址
    <div>
        <!-- a 文本超链接 -->
        <a href="https://www.qq.com/">腾讯</a>
        <br>
        <a href="https://www.baidu.com">百度</a>
    </div>
    <br>
        href="" 这个属性里面，如果不写值，叫“空链接”
        href="#" 这个属性里面，写#，叫“空链接”
        href="/" 这个属性里面，写/，叫“访问根目录”
        <br>
    <a href="">山有木兮木有枝</a><br>
    <a href="#">心悦君心君不知</a><br>
    <a href="/">月满西楼</a>
    <br>
    <!-- 图片超链接 --> 先写网址，再加入图片(图片加入时先按/ 然后选图片加入)
    <br>
    <a href="https://www.baidu.com">
        <img src="/img/wenyi.webp" alt="">
        <br>
    </a>
    <br>
    <a href="https://www.baidu.com">
        <img src="/img/maomi.webp" alt="">
    </a>
    <br>
    <div><br>
        <!-- javascript 是禁止跳转 -->
        <a href="javascript:;">一生一代一双人</a><br>
        <!-- https:// --> 是一个网址，一定要带上协议头 https:// 或  http://<br>
        <a href="www.youku.com/">优酷</a>
        <br>
        <a href="https://www.youku.com/">优酷</a>
    </div>

    <br>
    <div>
        <!-- 创建文件，我要访问perfect.html -->所建文件要与html同级
        <br>
        <a href="perfect.html">我要访问perfect.thml文件</a>
    </div><br>
    <div>
    <!-- title提示性文本 （有利于网站的内部优化） -->
    <a href="https://www.iqiyi.com/"title正在热播喜欢你，我也是>爱奇艺</a><br>
    <a href="https://www.youku.com/"title法医秦明之读心者>优酷</a>
    <br>
    <!-- title h6 缩短后面字数，用三个小点代替 -->先写上整个标题，下面再缩短
    <a href=""title="索尼（SONY）Xperia PRO-I 5G微单手机 1英寸超大成像元件 蔡司镜头 4K 120fps短片录制 12GB+512GB 黑色">
        <h6>索尼（SONY）Xperia PRO...</h6><br>
    </a>
    </div>
        <div>
            <a href=""title="几物森林 北欧碗碟套装陶瓷餐具套装家居盘子碗筷鱼盘套装家用乔迁送礼 32头青瑶礼盒装">
                <h6>几物森林 北欧碗碟套装陶瓷餐...</h6>
            </a>
        </div>
        <!-- a+br+a+br+a+br+a+br -->覆盖窗口<br>
        加target="_black"不会覆盖窗口  会覆盖窗口 加target="_(self  parent  top)"
        <br>
     <div>
        <a href="https://www.jd.com/"title=""target="_black">京东</a>
        <br>
        <a href="https://www.baidu.com"title=""target="_self">百度</a>
        <br>
        <a href="https://www.youku.com/"title=""target="_parent">优酷</a>
        <br>
        <a href="https://www.zhihu.com/"title=""target="_top">知乎</a>
        <br>
     </div>
</body>
</html>