HTML超链接、锚链接

солнце вкус

已于 2022-05-15 11:44:34 修改

阅读量1.8k

点赞数 1

文章标签： HTML 超链接锚链接页面跳转内部导航

于 2022-05-15 11:43:35 首次发布

本文链接：https://blog.csdn.net/qq_45523980/article/details/124779480

版权

超链接和锚链接的区别，就是超链接需要跳砖页面；锚链接不需要，在同一页面中跳转到某个位置。

不管是超链接，还是锚链接，都是用a元素。

超链接：超链接的使用就是在href中加入网址，如果是图片超链接就是在a元素中加一个img元素

需要注意的是，超链接的字体大小，颜色，下划线等样式设定都是用css属性来控制的，html的元素表示的语义，a元素只是表示内容是一个链接的文字或者图片

文字超链接、图片超链接-以百度，百度百科为例，点击即可跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a{
            font-size: 2em;
        }
        div a img{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">百度</a>
        <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281">
            <img src="./imgs/Solar.webp" alt="Solar">
        </a>
    </div>
</body>
</html>

锚链接-这里用到vscode中英文字符生成工具lorem

要设置锚链接，首先要给锚链接连接到的位置定位，即设置id属性；其次，在a元素中的href属性中实现跳转到该id位置即可。

<!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 href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>

    <h2 id="chapter1">
        章节1
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae corporis, ducimus vel totam architecto blanditiis aliquam quasi eveniet ullam, quaerat placeat odit pariatur alias sunt ipsa, deserunt expedita incidunt cupiditate itaque corrupti mollitia officiis. Magni corrupti saepe accusamus nihil, aperiam dolorum dolores libero iure iste veniam corporis quam odit cumque voluptatibus consectetur labore doloribus sit architecto iusto doloremque ut laborum ad voluptatum. Perspiciatis earum assumenda modi, cupiditate, corporis suscipit possimus qui ut nam sunt doloremque eius. Quia dolorem obcaecati labore asperiores earum a tempora repudiandae! Laudantium nesciunt vero id consequatur accusantium hic! Dicta, assumenda non itaque quod quae nobis placeat?</p>
    <h2 id="chapter2">
        章节2
    </h2>
    <p>Error quisquam possimus voluptatibus dolores sequi eaque cupiditate, alias esse ab nihil enim rem facilis nemo delectus a optio. Voluptatibus quia eligendi ea corporis hic distinctio suscipit amet, tenetur corrupti voluptas totam ad quaerat nihil sapiente rerum eius at numquam deserunt. Architecto impedit ipsa ullam quam accusantium optio perspiciatis maiores, illum officia rem autem, error dignissimos repudiandae cumque aliquid harum laboriosam. Ex necessitatibus incidunt eius sint soluta possimus tempore, nihil consequuntur explicabo consectetur, similique doloremque omnis quae excepturi. Hic, cupiditate expedita excepturi dolore quos quae. Odio vitae, adipisci incidunt molestiae hic esse quaerat aliquid velit inventore mollitia, veritatis corporis iste.</p>
    <h2 id="chapter3">
        章节3
    </h2>
    <p>Sunt distinctio a, culpa reiciendis nihil praesentium cupiditate officia inventore officiis! Corporis et explicabo fuga expedita aperiam repudiandae hic assumenda debitis tempora pariatur facere blanditiis quo esse, vitae magnam voluptates, impedit corrupti quis deleniti eligendi? Corrupti quibusdam commodi ab, suscipit illum quisquam reprehenderit doloremque, corporis sit facere sequi. Eos sint tempora omnis explicabo, praesentium odio saepe natus voluptatibus doloribus ducimus accusantium obcaecati veritatis, quis numquam, sit unde accusamus id ipsam sed maxime consectetur? Aliquam enim quam quasi a dolor. Maxime reprehenderit culpa, sed omnis quos molestiae sit, nobis veritatis officia ut magni architecto laboriosam veniam perspiciatis. Cupiditate, minima exercitationem. Aut.</p>
    <h2 id="chapter4">
        章节4
    </h2>
    <p>Natus velit quod ipsum saepe ipsam tempora at quibusdam dicta! At minima soluta vel quod accusantium itaque, esse suscipit odit, corporis doloremque commodi, ut sit non ducimus maxime ratione sunt nostrum cumque assumenda! Dolorum incidunt cum et quidem ipsam, dicta eos necessitatibus, laudantium debitis voluptatibus voluptates dignissimos. Voluptatum vel iusto pariatur obcaecati soluta voluptatibus ea eveniet quae est ad. Tempore reiciendis libero et nesciunt, quas molestias aliquam tempora suscipit, inventore laudantium earum fuga eius itaque debitis delectus culpa reprehenderit. Rem repudiandae possimus porro accusantium ipsa dignissimos aliquam temporibus, delectus vitae sapiente provident neque ullam quidem dicta accusamus animi nesciunt cupiditate?</p>
    <h2 id="chapter5">
        章节5
    </h2>
    <p>Libero vel possimus aut consequatur perferendis non autem sit exercitationem, architecto ea perspiciatis similique ipsa veniam quia provident, iste ut explicabo ullam velit repellendus corporis! Aspernatur, tenetur sint. Ipsam repellendus ab qui impedit laudantium quam quis natus, ullam exercitationem illo? At iste ab nam alias, accusamus aliquid quibusdam soluta dolorem repudiandae ut molestiae voluptatum dolores doloremque facilis similique veritatis, et magnam nulla. Maiores facilis labore minima unde velit porro odit, et totam earum. Quibusdam totam, sapiente praesentium quidem deleniti at aliquam repellendus animi nisi, nam quia maxime officiis laudantium magni fugiat. Animi rem nobis natus eligendi, numquam nam rerum incidunt.</p>
    <h2 id="chapter6">
        章节6
    </h2>
    <p>Officia dolorem blanditiis consequatur autem minima assumenda distinctio impedit quos consequuntur inventore. Ad, possimus molestias. Ad placeat id minus odit praesentium necessitatibus nostrum aperiam, quod culpa. Non, maiores quam. Et hic provident unde facere necessitatibus iusto earum. Esse repellat sapiente dolore, veritatis voluptatem amet delectus. Saepe autem similique exercitationem enim, eos quam delectus? Esse, magni. Voluptatem nemo est maxime, nobis fugit inventore harum dolore nam officia reprehenderit magni dignissimos sapiente quaerat ea minus, voluptatibus odio hic modi libero placeat nostrum at quidem natus veniam. Placeat iure esse dolores modi. Itaque vero, perspiciatis laborum ratione minima nam laudantium quae dolore distinctio.</p>
</body>
</html>