HTML链接（详细）与分割线（部分）

最新推荐文章于 2024-04-24 14:53:02 发布

星·回

最新推荐文章于 2024-04-24 14:53:02 发布

阅读量2.9k

点赞数

文章标签： html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_53509627/article/details/128697361

版权

（一）说明模块

HTML链接用法------三种属性：
*      href属性：指定跳转目标，也就是指定需要打开的链接地址，是必须存在的，不可缺省的
*      target属性：指定链接标签的弹出方式（默认为"_self"是指在本页面弹出跳转界面，"_blank"是指在新窗口打开界面），可以缺省（自动为默认值）
*      title属性：指定此链接的介绍信息

*      分割线的实现：<hr align="center" width="200" color="#aa00ff" size="5"> ---→ align设置线条位置（left靠左、right靠右、center居中）

在使用html链接时，href是必不可少的，不可或缺的，不可以省略它，存在的主要目的是跳转到我们想要跳转的某个地方；target是指定链接的弹出方式，弹出方式有两种，第一种是"_self"，是在自身存在的页面弹出窗口，不会新建一个窗口弹出你指定的弹出链接，第二种是"_blank"，是指在除本身之外的窗口在弹出一个新的窗口显示编写者指定的链接内容，可以缺省，如果缺省，则会默认使用了"_self"弹出方式；title是介绍链接的内容，不会在窗口中显示，是可以省略的。

关于分割线的介绍已经在上面说明了，在此就不过多赘述了。

（二）代码模块

<!--/* ============================================================================= *\
*    Author                      : 星·回
*    Filename                    : test_1.html
*    Create Date                : 2023/01/15
*    Revision【修订】            : 1.0 
*    Additional Comments【备注】 : 
*      HTML链接用法------三种属性：
*      href属性：指定跳转目标，也就是指定需要打开的链接地址，是必须存在的，不可缺省的
*      target属性：指定链接标签的弹出方式（默认为"_self"是指在本页面弹出跳转界面，"_blank"是指在新窗口打开界面），可以缺省（自动为默认值）
*      title属性：指定此链接的介绍信息
*      分割线的实现：<hr align="center" width="200" color="#aa00ff" size="5"> ---→ align设置线条位置（left靠左、right靠右、center居中）
\* ============================================================================= */-->
<!DOCTYPE html>
<html>
    <head>
        <!--<meta charset="utf-8">--------------->
        <title>星回</title>
    </head>
    <body>
        
        <!-------仅使用href的情况--------->
        <br />
        
        <p>
            <a href="../code/test_1.html">此文本</a>是一个指向星回文本格式化的页面链接。
        </p>
        <p>
            <a href="http://www.baidu.com">百度</a>此文本是指向百度的页面。
        </p>
        
        <br>
        <hr>
        
        <!-------href＋target的情况--------->
        <br />
        
        <p>
            <a href="../code/test_1.html" target="_self">此文本</a>是一个指向星回文本格式化的页面链接。
        </p>
        <p>
            <a href="http://www.baidu.com" target="_blank">百度</a>此文本是指向百度的页面。
        </p>
        
        <br>
        <hr align="center" width="200" color="#aa00ff" size="5">    <!--align设置线条位置（left靠左、right靠右、center居中）-->
        
        <!-------href＋target＋title的情况--------->
        <br />
         
        <p>
            <a href="https://www.bilibili.com/video/BV1rS4y1X7Wo/?spm_id_from=333.337.search-card.all.click" target="_blank" title="点击跳转到哔哩哔哩">数学</a>此文本指向哔哩哔哩中的一个网站。
        </p>
        <p>
            <a href="https://www.csdn.net" target="_blank" title="点击跳转到CSDN首页">CSDN</a>此文本指向访问CSDN页面。
        </p>
        
        <br>
        <hr width="500" align="center" color="#ff0000" size="6">
        
        <!---------创建图片链接--------->
        <p>创建图片链接                    <br>
            <a href="https://pic.netbian.com/tupian/30892.html">
                <!----无边框----->
                <img border="0" src="../code/img/春.png" alt="彼岸" width="32" height="32">
                <br>
        </p>
        <p>
            <a href="https://pic.netbian.com/tupian/30892.html">
                <!----有边框----->
                <img border="5" src="../code/img/春.png" alt="彼岸" width="32" height="32">
        </p>
        <hr align="center" width="200" color="#aa00ff" size="5">
        
        <!-------当前页面中的指定------->
        <br />
        <p>
        <a href="#C1">词1</a>            <br>
        <a href="#C2">词2</a>            <br>
        <a href="#C3">词3</a>            <br>
        <a href="#C4">词4</a>            <br>
        <a href="#C5">词5</a>            <br>
        <a href="#C6">词6</a>            <br>
        <a href="#C7">词7</a>            <br>
        <a href="#C8">词8</a>            <br>
        <a href="#C9">词9</a>            <br>
        <a href="#C10">词10</a>           <br>
        </p>
        
        <h2><a id="C1">词1</a></h2>
        <p>阳关万里道，不见一人归。唯有河边雁，秋来南向飞。</p>
        
        <h2><a id="C2">词2</a></h2>
        <p>溪上残春黄鸟稀，辛夷花尽杏花飞。始怜幽竹山窗下，不改清阴待我归。</p>
        
        <h2><a id="C3">词3</a></h2>
        <p>浪花有意千重雪，桃李无言一队春。</p>
        
        <h2><a id="C4">词4</a></h2>
        <p>凋悴缘何事，青青忆旧丛。有枝撑夜月，无叶起秋风。暑路行人惜，寒巢宿鸟空。倘留心不死，嘘拂待春工。</p>
        
        <h2><a id="C5">词5</a></h2>
        <p>疏雨池塘见，微风襟袖知。阴阴夏木啭黄鹂。何处飞来白鹭立移时。易醉扶头酒，难逢敌手棋。日长偏与睡相宜，睡起芭蕉叶上自题诗。</p>
        
        <h2><a id="C6">词6</a></h2>
        <p>一身转战三千里，一剑曾当百万师。</p>
        
        <h2><a id="C7">词7</a></h2>
        <p>飒飒西风满园栽，蕊寒香冷蝶难开。他年我若为青帝，报与桃花一处开。</p>
        
        <h2><a id="C8">词8</a></h2>
        <p>况是青春日将暮，桃花乱落如红雨。</p>
        
        <h2><a id="C9">词9</a></h2>
        <p>坠素翻红各自伤，青楼烟雨忍相忘。将飞更作回风舞，已落犹成半面妆。沧海客归珠有泪，章台人去骨遗香。可能无意传双蝶，尽付芳心与蜜房。</p>
        
        <h2><a id="C10">词10</a></h2>
        <p>星回昭以灿，天行徐且溢。</p>
        
    </body>
</html>

（三）效果图