艺兔的编程博客

Appearance

HTML 的超链接 Hyperlinks ​

超链接是互联网世界的基石，可以说互联网的互联本质，正式由超链接构成的。有了超链接，我们就能在不同的网页之间进行跳转访问。

这节课我们学习下如何在我们的网页中放置超链接。我们可以将超链接大致分成三类：

  • 第一类： 在网页中链接到本网页中的其它位置
  • 第二类： 在网页中链接到其它网站(外部网站)的页面
  • 第三类： 在网页中链接到本网站的其它页面

第一类： 在网页中链接到本网页中的其它位置 ​

按照之前我们学习的经验，那链接标签应该是<link></link> 或者是link的简写<l>。 而实际上在html中是有<link />这个标签，但是这个标签是专门用来定义文档与外部资源关系的。比如说引入外部的css文件。具体这个标签的用法我们以后再说。

在html中， 超链接的真正标签是<a></a>, 英文全称anchor, 锚点的意思。

那为什么要使用这个anchor 锚点这个词呢？ 采用这个单词和html的发展历史有关，在最初设计html的时候，那时候网络规模还很小，计算机也没那么普及，主要是一些科研文档使用了html, 而这些科研文档又很长，为了能在这个文档内快速跳转到特定的位置，就需要设计一个文档内跳转的标签.

比如我们打开laravel文档中的一个文章 https://laravel.com/docs/12.x/eloquent-relationships，像这样的文章非常长，就非常需要一个能跳转到文章指定位置的功能。

而跳转到文件指定位置和把船抛锚一样的固定在某一个位置很像。所以就采用了anchor锚点这个词。这种文章内部的跳转链接，我们也叫做锚点链接 。像laravel的这篇文章中，右侧这边的链接就是锚点链接。我们点击这里的任何一个链接都是在文章内进行不同位置的跳转。

后期互联网发达了，需要跳转到其它网页了，但是这个anchor的标签名并没有更改， 还是沿用下来了。

现在我们还是回到我们的博客页面，我们使用<a></a>将 MDN Web 文档包裹起来<a>MDN Web 文档</a>，被<a>包裹起来的文字我们叫做链接文本。 这时候我们刷新网页，网页是没有任何变化的。因为<a></a>目前只只能作为超链接的一个占位符，我们还需要给<a> 加上 href 属性，href 的值我们先设置为 #, <a href="#">MDN Web 文档</a>. 此时我们刷新页面可以看到MDN Web 文档这几个字已经变了颜色，并添加了一个下划线，我们点击一下会挑战到网页的顶部。这个#我们叫做占位链接，在开发的时候会经常用到，当我们还不知道当前的链接要具体指向哪里的时候，我们就会先写上#这个占位符。

当然我们也可以把这个# 当作一个特殊的锚点。因为我们点击它的时候，它会默认跳转到网页的顶部。我们来补全一下。我们在#后面随便加个单词， 比如就叫top, <a href="#top">MDN Web 文档</a>. 然后我们给h1标签加上 id="top", <h1 id="top">📖 艺兔的编程博客</h1>. 然后我们刷新页面， 我们点击链接，它就会跳转到页面的顶部。

我们再来尝试一个有趣的事，我们把<h1 id="top">📖 艺兔的编程博客</h1> 中的top删除掉，然后我们刷新网页，点击链接还是会跳转到网页顶部，这是为什么呢？ 这个是不是html5给网页中默认加了top这个锚点呢？ 其实并不是，这也是html发展的历史遗留问题，这个top是现代浏览器自己做的特殊处理，与html5并没有关系。 比如，我们把id="top" 放到网页的最后 <p id="top">希望本文让你有所收获，我们下次见！</p>, 现在我们刷新网页，点击链接，网页就会跳转到最底部的位置。

所以当你在来#后如果写了一个锚点单词，那么你还是要显示的使用id="XXX" 来标名具体锚点的位置，这才是符合标准的写法。

第二类： 在网页中链接到其它网站(外部网站)的页面 ​

我们再来看第二类超链接：在网页中链接到其它网站(外部网站)的页面， 我们来看下我们的博客演示页面。这里的 MDN Web 文档，我们用鼠标点击后，是跳转到MDN web 文档这个外部网站的页面的。 这里顺便说一下，MDN Web 文档 上几乎涵盖了html5,css3 和 js的所有语法点和使用信息，我们在开发的时候会经常需要访问这个站点，所以大家可以先收藏下这个站点。

在浏览器的地址栏中的https://developer.mozilla.org/en-US/docs/Web/HTML 这串英文我们叫做URL, 目前你也可以简单理解为网页地址，虽然网页地址这种叫法严格上来说是不正确的，但是无所谓，学习本身就是不断纠错的过程。

我们回到vscode中，我们只要将href=中的内容换成网页的url地址就可以了。 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web 文档</a>。 我们刷新网页尝试一下。

现在我们打开网页的时候，默认是替换掉我们原有的网页的，这是因为<a>标签还有一个target属性，这个属性指定在何处打开链接文档，它控制浏览器如何处理超链接的跳转行为。这个属性常用的值有两个，一个是_self 在当前标签页打开，这个是默认值，我们不写target="_self"时，也是默认在当前页面打开的。还有一个属性值是_blank, 这个值是代表在新标签页打开页面，我们来尝试下。现在就能在新的标签页打开我们的链接了。

第三类： 在网页中链接到本网站的其它页面 ​

最后还有一类超链接是链接到网站的内部页面，我们回到我们的博客演示页面，在大标题下面还有一些博客其它页面的链接。 我们来编写一下。

首先我们打开vscode 的资源管理器，我们创建一个新的html页面 blog.html. 我们手动输入代码，在学习阶段，一定要多写代码，尽量减少使用编辑器的代码生成功能。

html
<!DOCTYPE html>
<html>
  <head>
    <title>博客页面</title>
  </head>
  <body>
    <h2>博客页面</h2>
  </body>
</html>

然后，我们回到index.html页面中，在<h1>大标题下来创建链接，先写一组<a></a>标签，然后在标签中写上链接文本内容博客。 这时，href的值我们不用去填写完整的url, 我们添加需要跳转的html文件的名称即可。在这里，我们是要跳转到blog.html. 所以这里我们填写href="blog.html". <a href="blog.html" target="_self">博客</a>保存后，刷新网页，页面上已经出现了这个链接，我们点击下，成功的跳转到我们刚才编写的博客页面。

那要回到博客的主页，我们可以点击浏览器的回退按钮，当然我们也可以在blog.html中在创建一个返回主页的链接。 我们回到blog.html中。 大家可以暂停视频先自己尝试编写下这句代码。

我们还是使用<a></a>标签，链接文本内容为 返回主页，href 属性的值等于index.html, target的值等于_self. 在当前标签页打开。 <a href="index.html" target="_self">返回主页</a>, 好了， 现在我们保存网页，刷新下，看下效果。 点击返回首页跳转到了博客主页，点击博客链接跳转到博客页面，完美。

接下来，演示页面上的另外三个链接我们也把它完成吧。这里的href值我们都用#来占位。

好了，本节课就到这里了，下面是本节课后完成的代码

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>构建网页的基础语言：HTML</title>
  </head>

  <body>
    <!--
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>
    -->

    <h1>📖 艺兔的编程博客</h1>
    <a href="blog.html" target="_self">博客</a>
    <a href="#">CSS基础</a>
    <a href="#">弹性布局</a>
    <a href="#">网格布局</a>
    <h2>构建网页的基础语言：HTML</h2>
    <img src="author.png" alt="Deepseek Logo" width="50" height="50" />
    <p>作者：<strong>Deepseek</strong> 本文生成于：2055年2月30日（星期八）。</p>

    <img
      src="post-banner.png"
      alt="电脑屏幕上显示HTML代码"
      width="500"
      height="280"
    />

    <p>
      现代网站和网页应用的<em>核心技术</em>由 HTML、CSS 和 JavaScript
      构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
    </p>

    <p>
      在这篇文章中，
      我们主要讲解HTML。我们将学习什么是HTML以及我们为什么要学习HTML。
    </p>

    <h3>什么是HTML？</h3>
    <p>
      HTML是超文本标记语言，英文全称：<strong>H</strong>yper<strong>T</strong>ext
      <strong>M</strong>arkup
      <strong>L</strong
      >anguage。是开发者用来结构化和描述网页内容的标记语言（注意：并非编程语言）。
    </p>
    <p>
      HTML通过元素定义内容类型：段落、链接、标题、图片、视频等。浏览器能解析HTML代码并将其呈现为可视化网页。
    </p>
    <p>在HTLML中，大多数元素都是由三部分组成:</p>

    <ol>
      <li>开始标签</li>
      <li>结束标签</li>
      <li>元素内容</li>
    </ol>

    <p>
      更多内容可查阅
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
        >MDN Web 文档</a
      >
    </p>

    <h3>我们为什么要学习HTML?</h3>
    <p>掌握这门语言的理由有很多，大致我想到有以下五大原因：</p>

    <ul>
      <li>html是网页开发最基础的语言</li>
      <li>你能够按照自己的想法做出自己想要的页面（告别WordPress）</li>
      <li>为将来开发真正的网页应用程序打下坚实的基础</li>
      <li>可以在朋友面前装X 😃</li>
      <li>作为自己的一个兴趣爱好，享受编程的快乐</li>
    </ul>

    <p>希望本文让你有所收获，我们下次见！</p>
  </body>
</html>