美文网首页
html超链接

html超链接

作者: 零00_ | 来源:发表于2021-04-21 18:17 被阅读0次

    超链接标签a

    超链接使用:<a></a>
    超链接属性:
    <strong>href</strong>- - -指明要跳转到的地址 eg:<a\ href="https://www.baidu.com/">\点击跳转到百度</a> ,此例表示点击链接后,跳转到百度首页
    <strong>target</strong>- - -指明点击链接后,打开跳转页面的方式,target="_blank"表示在新窗口打开(点击链接后,点击链接的这个网页窗口还在,新增加了另外一个窗口),target="_self"表示在链接所在这个网页窗口打开(点击链接后,点击链接的这个网页窗口出现跳转到的页面,不会新增窗口)

    超链接分类

    1.外部链接:点击链接,跳转到其他网站的页面
    2.内部链接:点击链接,跳转到该链接所在网站的页面
    3.空链接:href="#"代表空链接,可用于暂时还未确定具体链接地址的情况等,先填写一个空链接,后面确定了再填写具体的跳转地址
    4.下载链接:href="压缩包名.zip",点击链接后直接下载压缩文件
    5.网页元素链接:其他网页元素,如图片<img><li>等等,都可以加上<a>
    6.锚点连接

    代码示例:

    项目目录结构:


    超链接demo.png

    demo1.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>链接练习</title>
    </head>
    <body>
        <h1>超链接练习</h1>
        <h4>1.外部链接:跳转到其他网站页面</h4>
        <a href="https://www.baidu.com/" target="_blank">点击跳转至其他网站页面---百度</a>
        <h4>2.内部链接:本网站页面间的跳转</h4>
        <a href="demo1-1.html" target="_self">点击跳转--本网站页面</a>
        <h4>3.空链接:#</h4>
        <a href="#">我是一条空链接,不会跳转到其他页面</a>
        <h4>4.下载链接:a标签中链接地址=压缩包名.zip,点击链接后直接下载文件</h4>
        <a href="cat1.zip">点击下载</a>
        <h4>5.网页元素的链接:如图片等,标签外面再套一层a标签</h4>
        <a href="cat1.jpg" target="_blank"><img src="cat1.jpg" width="300px"></a>
        <h4>6.锚点链接,点击后跳转到标记位置</h4>
        <h3 id="top">李白最著名的十首诗:</h3>
        <a href="#poem1"><strong>静夜思</strong></a>---点击查看该诗内容<br />
        <a href="#poem2"><strong>望庐山瀑布</strong></a>---点击查看该诗内容<br />
        <a href="#poem3"><strong>早发白帝城</strong></a>---点击查看该诗内容<br />
        <a href="#poem4"><strong>送孟浩然之广陵</strong></a>---点击查看该诗内容<br />
        <a href="#poem5"><strong>夜宿山寺</strong></a>---点击查看该诗内容<br />
        <a href="#poem6"><strong>望天门山</strong></a>---点击查看该诗内容<br />
        <a href="#poem7"><strong>赠汪伦</strong></a>---点击查看该诗内容<br />
        <a href="#poem8"><strong>独坐敬亭山</strong></a>---点击查看该诗内容<br />
        <a href="#poem9"><strong>春夜洛城闻笛</strong></a>---点击查看该诗内容<br />
        <a href="#poem10"><strong>渡荆门送别</strong></a>---点击查看该诗内容<br />
        <pre id="poem1">
            <h3>静夜思</h3>
            床前明月光,疑似地上霜。
            举头望明月,低头思故乡。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem2">
            <h3>望庐山瀑布</h3>
            日照香炉生紫烟,遥看瀑布挂前川。
            飞流直下三千尺,疑是银河落九天。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem3">
            <h3>早发白帝城</h3>
            朝辞白帝彩云间,千里江陵一日还。
            两岸猿声啼不住,轻舟已过万重山。             
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem4">
            <h3>送孟浩然之广陵</h3>
            故人西辞黄鹤楼,烟花三月下扬州。
            孤帆远影碧空尽,唯见长江天际流。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem5">
            <h3>夜宿山寺</h3>
            危楼高百尺,手可摘星辰。
            不敢高声语,唯恐天上人。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem6">
            <h3>望天门山</h3>
            天门中断楚江开,碧水东流至此回。
            两岸青山相对出,孤帆一片日边来。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem7">
            <h3>赠汪伦</h3>
            李白乘舟将欲行,忽闻岸上踏歌声。
            桃花潭水深千尺,不及汪伦送我情。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem8">
            <h3>独坐敬亭山</h3>
            众鸟高飞尽,孤云独去闲。
            相看两不厌,只有敬亭山。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem9">
            <h3>春夜洛城闻笛</h3>
            谁家玉笛暗飞声,散入春风满洛城。
            此夜曲中闻折柳,何人不起故园情。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        <pre id="poem10">
            <h3>渡荆门送别</h3>
            渡远荆门外,来从楚国游。
            山随平野尽,江入大荒流。
            月下飞天镜,云生结海楼。
            仍怜故乡水,万里送行舟。
                                    <a href="#top">返回顶部目录</a>
        </pre>
        
    </body>
    </html>
    

    效果图如下:


    超链接.jpg

    相关文章

      网友评论

          本文标题:html超链接

          本文链接:https://www.haomeiwen.com/subject/uqbzlltx.html