网页开发入门｜02 超文本与超链接

上节课说到，W3C 发布的「超文本标记语言HTML」成为了如今最流行的网页标准。我们也已经了解什么是「标记语言」，本节课我们再聊一下「超文本」。

什么是超文本？

简单来说，超文本（Hyper Text）就是有超链接（Hyper Link）的文本。

那什么又是超链接呢？

当我们围观网络直播带货的时候，主播经常会说到「上链接」，然后就在屏幕的下方出现一个可以点击的小区域，点击之后就会跳转到商品页面或者抽奖页面。主播在这里说的链接其实就是「超链接」。

当我们使用搜索引擎的时候，用鼠标点击搜索结果就可以快速跳转到对应的页面。这也是「超链接」。

当我们在阅读网页上的文章时，文章里面的关键词被标记为了蓝色，点击后会跳转到其他相关页面。这还是「超链接」。

不需要用户输入网址，而是通过点击屏幕上的内容，就可以跳转到页面，这个技术就是超链接。

通过超链接，便可以让用户在阅读到页面的任何位置时，都能快速的打开另一个页面。

这使得多个文档（页面）可以立体组织在一起，更加符合人类的直觉。

网址URL

综合上节课学习的内容可以想到，超链接也是一种标记，允许开发者将网址信息隐藏在超链接对象上。

我们通常所说的网址，学名叫统一资源定位符 URL（Uniform Resource Locator），通常长的类似于这样：

http://demo.xianwu.show/intro-to-webpage/hello.html?who=world&repeat=3

在它的最左侧:之前的部分，称作协议Protocol，协议约定了进行网络通信的双方将以什么方式进行收发数据。

常见的协议有：

• http超文本传输协议（HyperText Transfer Protocol），专门用于传输超文本，也是网址中最常见的协议
• https 基于安全通道的超文本传输协议（Hyper Text Transfer Protocol over SecureSocket Layer），传输者在传输数据时，需要先使用身份证（SSL证书）启动一条专用通道，接受者就可以相信数据是身份证（SSL证书）本人发来的，所以安全性更好！
• file本地文件，指向用户当前所使用的电脑上一个文件，而并非网络上的文件
• 还有一些特殊的协议，可以要求手机或电脑用其他的APP打开页面，如sms可以启动短信，thunder会启动迅雷下载， mqq可以跳转到qq，wx可以跳转到微信等等

在//之后到下一个/中间这一部分，称作域名Domain，可以理解为一个公司或者组织在网络上的名字。

大部分域名需要购买，域名的拥有者可以要求网络服务商，将访问该域名的请求，先解析为IP地址，进而转发到IP地址对应的服务器上。

关于IP地址已经涉及到了计算机网络原理的内容，我们会在未来的课程中展开讲解。

在域名后面的/之后，?之前的部分，称作路径Path，即我们要请求的网页在服务器上的位置。就如同我们电脑上的每一个文件都有一个位置，在服务器上的每一个网页也会有一个专属的位置。

在最后，?之后的部分，称作参数Parameter，服务器可以根据参数对页面要显示的内容进行调整。如果服务器不需要调整内容，参数部分也可能被省略​。

相对URL

完整的URL也称作绝对URL，全网唯一；另外还有一种相对URL的省略写法。

所谓相对，指的是相对于用户当前所在的页面而言，另外一个页面的URL中的一部分与当前页面完全一致，便可以按照下文的写法省略掉这一部分。

比如用户当前在下面这个网页

http://demo.xianwu.show/intro-to-webpage/hello.html

现在需要去往另一个网页

http://demo.xianwu.show/intro-to-webpage/world.html

发现这两个URL有相同的协议，所以可以省略为

//demo.xianwu.show/intro-to-webpage/world.html

还有相同的域名，可以进一步省略为：

/intro-to-webpage/world.html

发现两个页面的路径也只有文件名不一样，最终可以省略为：

world.html

HTML中支持相对 URL的写法，但浏览器的地址栏不支持相对URL噢！

在开发阶段，因为页面都还没部署到服务器上，未来的协议、域名、路径都无法完全确定，所以通常在代码中只能使用相对URL，保证在本地和未来的服务器上都可以生效。

在网页中添加超链接

在HTML中，实现超链接的标签是a标签，取自anchor（锚点）的首字母。

就像在上节课学到的那样，首先在workspace中新建一个名为hyper-link.html的新文件。

然后参考下方的示例代码，使用a标签把需要变成超链接的文字包围起来：

点击<a>此处</a>访问我的首页

在浏览器里打开一下看看，会发现被包围的文字没有什么特别的。

这是因为我们虽然使用了a标签来标记「此处」二字是超链接，但是并没有指明超链接应该跳转到何处。如果浏览器进行了渲染，那用户点击这个超链接后，浏览器将不知道该如何是好。浏览器表示这锅我不背，于是忽略了这个a标签。

为了标记出超链接应该跳转的位置，我们要学习一个新的语法，标签的属性Attribute。

当仅仅通过标签名不足以说明其效果时，或者当需要修改标签的默认效果时，就需要使用属性，扩展对标签的描述。

属性写在标签的开始部分，使用空格与标签名分隔，然后使用属性="属性值"的结构去指明属性和属性值。就像这样：

在a标签中描述超链接的跳转位置的属性是href，是hypertext reference 超文本引用的缩写，字面意思即为要在此处引用另外一个超文本。

href属性值即为要跳转的位置，就是URL，支持相对URL的写法。

现在让我们把上面网页中的「此处」二字链接到我们上节课所创建的「你好世界」的页面hello.html

最终的代码类似这样：

点击<a href="hello.html">此处</a>访问我的首页

在使用VSCode写代码时，可能会看到如下图所示的一个提示框，会提示你此处可用的属性以及它们的作用，你可以通过鼠标点选，或使用上下键和回车，选中其中的某一个，编辑器将替你自动补全代码。

完成代码之后，记得保存！

刷新页面，可以看到「此处」二字变成了超链接的经典样式，蓝色，下划线，鼠标放上去会变成小手。点一下试试吧！

a标签除了有href属性以外，还有一些别的属性和功能，比如说要求浏览器在新窗口中打开网页，跳转到页面的同时也自动滚到指定位置等等，推荐大家去查阅更详细的官方文档。

延伸阅读： 纯文本与富文本

与超文本相对的是纯文本（Plain Text），是一种没有任何格式的文本类型。

.txt就是一种典型的纯文本文档，无法存储任何格式信息，所以.txt文件在打开后显示为什么样，完全由打开的软件决定。

小实验：你可以尝试用记事本把一个.txt文档的字体给改了，然后把它发给另外一台电脑再打开，看看修改的字体是否生效了。

当我们在VSCode中编写代码时，其实在写的就是纯文本。也正因为纯文本不带任何格式，就可以把格式问题交给编辑器处理，让开发者专注在代码本身。

可以这样理解，同样是.html文件，使用浏览器打开时，我们看到的就是渲染后的超文本网页；使用VSCode打开时，我们看到就是渲染前的纯文本源码。

还有一个相关的概念，富文本（Rich Text）。

富文本中可以存储字号、颜色、缩进等字体信息，Word就是一种典型的富文本。如上节课所说，富文本在底层，也是使用基于标记语言的纯文本来实现的。

渲染后的网页既是超文本，也是富文本。

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。