【HTML入门】第八课 - 链接的学习(二)

我们上一节学习了,链接的基本知识,有锚点,还有鼠标上移的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>

4.3 查看下载效果

然后我们点击 “下载文件” 的链接,看一下是否可以下载下来。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 03:18:02       70 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 03:18:02       74 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 03:18:02       62 阅读
  4. Python语言-面向对象

    2024-07-13 03:18:02       72 阅读

热门阅读

  1. python多线程与多进程开发实践及填坑记(3)

    2024-07-13 03:18:02       27 阅读
  2. MySQL-锁

    2024-07-13 03:18:02       16 阅读
  3. 我的PHP8编译日志

    2024-07-13 03:18:02       20 阅读
  4. error: #29: expected an expression

    2024-07-13 03:18:02       20 阅读
  5. MySQL版本升级

    2024-07-13 03:18:02       19 阅读
  6. 数据建设实践之大数据平台(四)安装mysql

    2024-07-13 03:18:02       22 阅读
  7. Python-数据爬取(爬虫)

    2024-07-13 03:18:02       21 阅读
  8. 关于QT实现绘图库的技术栈考虑

    2024-07-13 03:18:02       21 阅读