内链的使用-HTML入门基础（020）

最新推荐文章于 2024-03-31 19:45:48 发布

虾米大王

最新推荐文章于 2024-03-31 19:45:48 发布

阅读量415

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/modern358/article/details/109826169

版权

html 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

超链接有两种链接方式：内部链接和外部链接。内部链接指的是超链接的对象都在同一个网站中的资源。

分享这部分内容前，我们先建立一个网站，方便讲解，站点名称website2，绝对路径为D:\website2，内含文件如下：

D:\website2D:\website2\imagesD:\website2\images\1.jpgD:\website2\page1.htmlD:\website2\page2.html

如果我们想要在page1中点击超链接跳转至page2，在page2中显示一张图片，那么示例代码如下：

page1.html

<html>  <head>    <title>page1</title>  </head>  <body>    <table border="1">      <tr>          <td><a href="./page2.html">学生1</a></td>      </tr>    </table>  </body></html>

page2.html

<html>  <head>    <title>page2</title>  </head>  <body>    <h2>学生1</h2>    <img src="./images/1.jpg" alt="学生1" title="学生1">  </body></html>

图片呢，大家自己准备一张，运行效果就是，点击学生1超链接，页面跳转至page2，显示图片。

锚点链接：

在HTML中，有时候页面内容比较多，页面过长，我们需要点击某个超链接，直接跳转至页面的某一部分，就可以使用锚点链接。

示例代码：

<html>  <head>    <title>锚点链接</title>  </head>  <body>    <div>      <a href="#first">第一章</a><br>      <a href="#second">第二章</a><br>      <a href="#third">第三章</a><br>      ......      ......      ......    </div>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <div id="first">      <h3>第一章</h3>      <p>此处省略一千字…………</p>    </div>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <div id="second">      <h3>第二章</h3>      <p>此处省略一千字…………</p>    </div>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <div id="third">      <h3>第三章</h3>      <p>此处省略一千字…………</p>    </div>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>  <body></html>