《30分钟重学HTML》之基础-超连接与URI（四）

⚡️ 预警，前方高能：

在本文中，若出现如下 emoji 表情包请特别留意:

• 白色书签：🔖，表明一级标题；
• 橙色大四边形：🔶，表明二级标题；
• 蓝色小四边形：🔹，表明三级标题；
• 黄色闪电：⚡️，表明强调；

🔖 1、超连接

🔶 1.1 什么是超连接

超连接是互联网提供的最使人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网成为互联的网络。 ⚡️ 超连接使咱们可以将咱们的文档连接到任何其余文档（或其余资源），也能够连接到文档的指定部分， 咱们能够在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其余东西相比）。 几乎任何网络内容均可以转换为连接，点击（或激活）超连接将使网络浏览器转到另外一个网址（URL）。

注意：URL 能够指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及能够在网络上保存的任何其余内容。 若是浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（须要选择合适的本地应用来打开或处理文件）或下载文件（之后处理它）。

举个 🌰 子：

腾讯网首页，蓝色背景导航栏每一个元素即为超连接，提供了导航功能。

🔶 1.2 超连接分类

🔹 1.2.1 基本连接

使用<a>元素建立基本连接，在 href (Hypertext Reference)属性中，包含你但愿指向的 URL 或 URL 片断。

举个 🌰 子：

<a href="https://juejin.im/user/5eb4366ee51d4528dd23bfad">个人掘金主页</a>.
复制代码

结果以下所示： 个人掘金主页

URL 片断是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。

URL 不限于基于 Web（HTTP）的文档，也可使用浏览器支持的任何协议。 例如，在大多数浏览器中正常工做的 file:、ftp:和 mailto：。

⚡ 注意: 可使用 href="#top" 或者 href="#" 连接返回到页面顶部。这种行为是 HTML5 的特性。

🔹 1.2.2 块级连接

除了文字，你能够将一部份内容转换为连接，甚至是块级元素。 如你想要将一个图像转换为连接，只需把图像元素放到<a></a>标签中间。

举个 🌰 子：

<a href="https://juejin.im/user/5eb4366ee51d4528dd23bfad">
  <img src="https://cdn.jsdelivr.net/gh/jolin27144/blog@master/images/html/1-intruduction/4-creating-hyperlinks/qq.jpeg" alt="块级连接">
</a>
复制代码

🔖 2、URI、URL、URN

⚡️ 统一资源标识符（英语：Uniform Resource Identifier，缩写：URI）是一个用于标识某一互联网资源的字符串。

🔶 2.1 URI 和 URL、URN 的关系

先看看它们的发展历史(不感兴趣可略过)：

如文章开头提到，正是超连接的诞生，提供了互联网进行“互联”的一种方式。

与此同时，URL 也做为一个”超连接的目标资源的短字符串"而被引入。

日后几年的发展中，为了区别：⚡️ "提供资源访问" ⚡️ "资源标记" 这两种字符串。

两个专业术语也所以诞生：“统一资源定位符”和“统一资源名称”。

也就是咱们今天所说的 URL 和 URN。

后来，在人们意识到二者事实上基于同一个基础的“资源标识”的概念。所以RFC 3986提出: URL 和 URN 是 URI 的子集。

同时提出，将来的规格和相关文件应使用通用术语“ URI”，而不是限制性更强的术语“ URL”和“ URN”。

⚡️ 归纳：

• URL 和 URN 是 URI 的子集。

• URL 除了识别资源外，还提供了一种经过描述资源的主要访问机制来定位资源。

• URN 则用一个独一无可、不可改变的名称标识资源，不管资源是否不存在或不可用

上图表示 URI 和 URL、URN 的关系。

🔶 2.2 URI 的格式

1. scheme：表示资源应该使用哪一种协议来访问。 如 HTTP、HTTPS 协议。此外还有其余不是很常见的 scheme，例如 ftp、ldap、file、news 等。

2. scheme 和 authority 之间，必须是三个特定的字符 ⚡️ “://” ，它把 scheme 和后面的部分分离开。注意: URN 则只有":"。

3. authority：表示资源所在的主机名，一般的形式是“host:port”，即主机名加端口号。主机名能够是 IP 地址或者域名的形式，必需要有，不然浏览器就会找不到服务器。但端口号有时能够省略

4. path：以"/"开头。采用了相似文件系统“目录”“路径”的表示方式，由于早期互联网上的计算机可能是 UNIX 系统，因此采用了 UNIX 的“/”风格。其实也比较好理解，它与 scheme 后面的“://”是一致的。

5. query：附加一些额外的修饰参数。

6. fragment：它是 URI 所定位的资源内部的一个“锚点”或者说是“标签”，浏览器能够在获取资源后直接跳转到它指示的位置。但片断标识符仅能由浏览器这样的客户端使用，服务器是看不到的。也就是说，浏览器永远不会把带“#fragment”的 URI 发送给服务器，服务器也永远不会用这种方式去处理资源的片断。

🔶 2.3 绝对 URL 和相对 URL

⚡️ 绝对 URL ： 指向由其在 Web 上的绝对位置定义的位置。 包括协议+域名。

举个 🌰 子：

1. 若是 index.html 页面在 projects 这一目录 。

2. projects 目录位于 web 服务站点的根目录。

3. web 站点的域名为http://www.example.com。

4. 那么这个页面就能够经过http://www.example.com/projects/index.html访问。

   ( 或者经过http://www.example.com/projects/来访问, 由于在没有指定特定的 URL 的状况下，大多数 web 服务会默认访问加载 index.html 这类页面)

http://www.example.com/projects/index.html即为绝对 URL。

⚡️ 相对 URL： 指向与您连接的文件相关的位置。

举个 🌰 子：

1. 若是咱们访问了http://www.example.com/projects/index.html这个文件。

2. 想转到和index.html相同目录下的一个 PDF 文件, 那个能够直接将该文件名做为 URL。例如 project-brief.pdf。

3. 若是 PDF 文件在 projects 的子目录 pdfs 中。 那么相对路径就是 pdfs/project-brief.pdf。 (对应的绝对 URL 就是 www.example.com/projects/pd…

pdfs/project-brief.pdf即为相对 URL。

🔖 3、路径

⚡️ URL 使用路径查找文件。

🔶 3.1 URL 中使用的路径

此目录结构的根目录称为 resume。当在网站上工做时， 你会有一个包含整个网站的目录。

在根目录，咱们有一个 resume.html，做为主页

咱们的根目录还有两个目录—— dist 和 images，它们分别包含一个 index.html 文件和一个 img.png 文件。

• ⚡️ 指向当前目录 ：若是 resume.html 想要包含 style.css。由于它与当前文件是在同一个目录的。能够用"./"表示当前目录，或者直接省略。

  URL 为：style.css或./style.css

• ⚡️ 指向子目录 ：若是 resume.html 想要包含 images 目录下的 img.png。

  URL 为：images/img.png

• ⚡️ 指向上级目录 ： 若是想在 dist/index.html 中包含一个指向 images/img.png 的超连接，你必须先返回上级目录，而后再回到 images 目录。返回上一个目录级使用两个英文点号表示 ".."。

  URL 为: ../imgaes/img.png

🔖 总结

• ✔️ 理解 HTML 超连接
• ✔️ 理解 URI 和 URL、URN
• ✔️ 理解 URL 中使用的路径

🔖 参考资料

• Creating hyperlinks, developer.mozilla.org/en-US/docs/…
• <a>: The Anchor element, developer.mozilla.org/zh-CN/docs/…
• 什么是 URL？, developer.mozilla.org/zh-CN/docs/…
• 统一资源标志符(URI), zh.wikipedia.org/wiki/统一资源标志…
• 统一资源定位符(URL), zh.wikipedia.org/wiki/统一资源定位…
• 统一资源标志符(URN), zh.wikipedia.org/wiki/统一资源名称…
• URL 中“#” “？” &“”号的做用, www.cnblogs.com/kaituorensh…
• RFC 3986,tools.ietf.org/html/rfc398…