vscode超链接的重点与用法

最新推荐文章于 2024-05-30 10:53:59 发布

Futuregeneratio

最新推荐文章于 2024-05-30 10:53:59 发布

阅读量707

点赞数 2

本文链接：https://blog.csdn.net/Futuregeneratio/article/details/136404869

版权

Hello大家好，今天小编给你们带来实用且简单的超链接使用方法和超链接的知识点，快来看看吧！！

知识点：

<!-- html 超文本标记语言超：超链接

css 层叠样式表

-->

<!-- 超链接：可以是一个字，可以是图片，可以是表格，或者音视频等等

是行内标签，特殊的行内标签，它里面什么都能放，除了它自己

-->

<!-- 超链接：

功能

1，从一个页面跳到另一个页面‘

2，在当前页面进行跳转（锚点功能），一般可以用来做“楼梯导航”

3，下载

属性：

href属性指向超链接跳转的地址

跳转的路径：

绝对路径：是一个完整的地址，无论你在哪里，只要地址不写错，就可以实现跳转

相对路径：不是一个完整的地址，路径写法跟你所在的位置相关

./ 你所在位置跟你要跳转的位置在同意目录下,默认就是./开始

../ 你所在的位置跟你要跳转的位置不在同一目录下，跳出当前目录来到上一级目录中寻找

跳出当前目录来到上一级目录寻找，如果上一级目录没找到，

那就再../，知道找到为止

target属性:设置超链接的打开方式

可选值

_self 在当前页面打开超链接默认值

_blank 新开一个页面打开超链接

空链接写法（2种写法）

<a href="#">空链接写法1</a>

<a href="javascript:;">空链接写法2</a>

-->

<!--

锚点功能实现：

第一步：给你专挑的位置打一个标记

id=“ ”

id属性值：不能以数字开头，最好不要是汉字

第二部：在超链接href属性值里：#id属性值

特殊情况：<a href="#">回到顶部</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>
</head>
<body>
    <h2><a href="#qw">点击跳转到底部</a></h2>
    <h2><a href="#middle">点击跳转到中部</a></h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <h2 id="middle"></h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, minus.</p>
    <p>山可李吾责京心陈此从为不真非，赠氏欲卑。</p>
    
    <h2 id="qw">
        <a href="">点击回到顶部</a>
    </h2>
</body>
</html>