• 【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的内容啊：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>这是index1的网页title>
    6.         <style type="text/css">
    7.             
    8.         style>
    9.     head>
    10.     <body>
    11.         <a href="./index.html">跳回index去a>
    12.     body>
    13. html>

    1.4 修改 index.html 的内容

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>我的第一个网页title>
    6.         <style type="text/css">
    7.             
    8.         style>
    9.     head>
    10.     <body>
    11.         <a href="./index1.html">我要跳到index1去a>
    12.         <br/>
    13.         <p title="这里是为了占空间">这里是为了占位置p>
    14.         <br/>
    15.     body>
    16. html>

    1.5 开点

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

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

    2 打开新的标签页

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>我的第一个网页title>
    6.         <style type="text/css">
    7.             
    8.         style>
    9.     head>
    10.     <body>
    11.         <a href="./index1.html" target="_blank">我要跳到index1去a>
    12.         <br/>
    13.         <p title="这里是为了占空间">这里是为了占位置p>
    14.         <br/>
    15.     body>
    16. html>

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

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

    3 打开完整的网页url

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>我的第一个网页title>
    6.         <style type="text/css">
    7.             
    8.         style>
    9.     head>
    10.     <body>
    11.         <a href="https://www.baidu.com" target="_blank">去百度一下a>
    12.         <br/>
    13.         <p title="这里是为了占空间">这里是为了占位置p>
    14.         <br/>
    15.     body>
    16. html>

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

    4 做下载功能

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

    4.1 添加文件目录和文件

    4.2 修改代码 

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>我的第一个网页title>
    6.         <style type="text/css">
    7.             
    8.         style>
    9.     head>
    10.     <body>
    11.         <a href="./files/myExcel.xlsx" target="_blank">下载文件a>
    12.         <br/>
    13.         <p title="这里是为了占空间">这里是为了占位置p>
    14.         <br/>
    15.     body>
    16. html>

    4.3 查看下载效果

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

  • 相关阅读:
    csapp深入理解计算机系统 bomb lab(1)phase_1
    漫反射实现 - UnityShader
    LeetCode75——Day8
    带你深入学习Redis主从复制，学习心跳包、主从结构，全量复制、部分复制等
    网络编程-流
    数据结构与算法之Hash&BitMap
    Android学习笔记 1. TextView
    在Linux系统上实现区域更改
    分组后合并记录中的字段值
    MnasNet学习笔记
  • 原文地址：https://blog.csdn.net/xingyu_qie/article/details/140328190