【HTML入门】第八课 - 链接的学习（二）

news2024/11/15 5:25:19

我们上一节学习了，链接的基本知识，有锚点，还有鼠标上移的title属性的作用，这一节，我们继续说链接的知识点。

1 跳转本项目的网页

1.1 修改html文件名

1.2 新建index1.html文件

1.3 修改index1.html文件

1.4 修改 index.html 的内容

1.5 开点

2 打开新的标签页

3 打开完整的网页url

4 做下载功能

4.1 添加文件目录和文件

4.2 修改代码

4.3 查看下载效果

1 跳转本项目的网页

我们上一节说，锚点是在当前网页来回跳，那么他还可以跳转到其他网页去。

1.1 修改html文件名

我们之前新建网页的时候，html文件名叫 “新建文本文档.html” 还记得吧。

现在我们修改一下名字，改成 index.html 这个名字。然后就是这样子了。

1.2 新建index1.html文件

然后我们再新建一个 index1.html 的网页文件。然后就是这样子了。

注意：这里的两个html文件，是处于同一目录下的。

1.3 修改index1.html文件

index1.html 是我们新建的网页，目的就是通过 index.html 跳转到 index1.html 去。那么我们先修改一下index1.html 的内容，以便区分这2个网页。

注意：这是index1.html的内容啊：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>这是index1的网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index.html">跳回index去</a>
    </body>
</html>

1.4 修改 index.html 的内容

注意，这里是index.html 的内容啊：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index1.html">我要跳到index1去</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

1.5 开点

然后你就可以用浏览器打开 index.html ，两个网页开始点着跳着玩了。如果你的代码没有错的话，2个网页就是来回点跳着玩的效果。

而且是没有新打开浏览器的标签页，只是在当前网页标签内来回跳。

2 打开新的标签页

想要打开新的标签页，使当前网页不受影响呢，是 target 属性的效果。我们看一下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./index1.html" target="_blank">我要跳到index1去</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

我们看到，index.html 这个代码里呢，我们加了 target="_blan" 的属性代码。这就是跳转的时候，新打开标签页的意思。

你可以点击一下，看一下效果，是不是新打开了一个标签页。

3 打开完整的网页url

我们还可以使自己的网页，点击后，跳转到其他第三方的网页去，只要给我们一个完整的网页链接url。比如我们跳转到百度的网页去。主要看一下 href 属性值的修改：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com" target="_blank">去百度一下</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

然后你可以点击一下链接，看是不是百度的网页出现了。

4 做下载功能

a这个链接标签呢，还可以用来做下载。比如我们要下载一个pdf文件，或者一个excel文件，浏览器可以识别，我们当前要跳转的是网页，还是指向了一个文件。比如我们在当前目录添加一个excel文件，来下载他。

4.1 添加文件目录和文件

4.2 修改代码

我们可以看到，files 文件夹，或者叫它 files 目录呢，和 index.html 在同级目录下的，所以，我们的 路径书写 是这样子的（主要看href属性）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="./files/myExcel.xlsx" target="_blank">下载文件</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>