超链接怎么做

题图来自Unsplash，基于CC0协议

导读

链接是互联网体验的核心部分，让你能在网页之间、网页内部的不同位置，甚至同一网站服务器上的不同资源间自由跳转。从HTML精华到Word文档，再到文件系统探索，再到CSS样式的美化，了解超链接的制作至关重要。下面将分别介绍这些方向：

基础HTML超链接

HTML中创建超链接最核心的元素是<a>（锚点）标签。最基本的形式是： <a href="超链接地址">显示给用户的文本</a> 这里的href（统一资源定位符）属性必须指定链接的目标地址。这个地址可以是：

• 一个绝对URL：https://www.example.com/ （指向外部网站）
• 一个相对URL：page.html （指向同一网站的当前目录下的文件，或folder/subpage.htm指向子目录下的文件）
• 一个URL加上协议，例如：http://www.example.com或 ftp://files.example.com/file.txt 链接文本通常指“显示给用户的文本”部分，它是用户点击以进行跳转的部分。为了帮助搜索引擎理解链接内容，最好提供描述性的链接文本（更具体比泛泛而谈如“点击这里”更好）。

在Word中插入超链接

即使你不是开发者，使用Word处理文档时，也会遇到许多向文件添加链接的需求。

1. 插入网页链接：选中你希望变成超链接的文字，然后右键点击，选择“超链接”（或“插入超链接”）。在弹出的对话框中输入Link地址，并可以添加标题和提示信息（Link提示是在悬停时显示的辅助说明）。单击“输入”按钮完成。
2. 插入工作簿链接：在Word中链接到另一个Excel工作簿，或链接到当前Word文档内的特定图表、表格或图片。
3. 链接到文档内的位置（锚链接）：在长文档中非常有用。选中你希望作为目标地址的文字或图形（必须首先选中才能插入锚链接），然后右键 -> “超链接” -> “现有文件或网页” -> 选择“此文档中的位置”。在右下角的导航窗格，你可以直接点击目标位置或者单击“链接”按钮来锚定到那个位置。插入锚链接后，默认链接将指向文档的起始部分，不过你可以自行拖动链接文本至目标处。

target属性控制链接打开方式

在<a>标签中，可以使用target属性来指定用户点击链接后在何处打开目标文档。

• _self (默认值)：链接在同一个浏览器窗口或标签页内打开。
• _blank：链接在一个新浏览器标签页或窗口中打开。需谨慎使用，因为它可能会打断当前用户的浏览流。
• _parent：如果当前页面是框架内的一个子框架，_parent表示链接在父框架集合中打开。若不在框架中，则等同于_self。
• _top：与_parent类似，但会重置所有被覆盖的框架，直接在完整的主窗口显示内容。

相对路径超链接 vs. 绝对路径超链接

理解相对路径和绝对路径的区别对于大型网站或Web应用的维护至关重要。

• 绝对路径：指定了目标资源在互联网上的完整地址，包括协议 (http: 或 https:) 和域名。例如：https://en.wikipedia.org/wiki/Web_browsing。

  • 优点：链接始终有效，即使网站域名更改或暂时关闭。
  • 缺点：复制含绝对链接的文档后若不进行本地调整，则链接会失效。

• 相对路径：只指定了相对于当前网页文件位置的资源路径。

  • page.html：与当前文件在同一目录下，链接到名为page.html的页面。
  • folder/page.html：指向当前目录下的folder子目录中的page.html。
  • ../page.html (../代表上一级目录)
  • ./page.html (./指代当前目录，通常省略)
  • #section1：链接到当前页面内的锚点（例如，在HTML文档中是<a id="section1">章节一</a>）。
  • 优点：更易于管理，尤其适用于网站内部链接，部署到不同服务器或域名时通常只需要调整基础路径即可。链接更本地化，不依赖外部域名。

CSS控制超链接样式

超链接通常带有一个下划线和特定的颜色。这些样式可以通过CSS进行自定义，以匹配整体设计，例如：

• 移除下划线：

  a {
      text-decoration: none;
  }

  或者只针对某些状态（如已访问、悬停）：

  a:visited {
      text-decoration: none;
  }
  
  a:hover {
      text-decoration: none; /* 鼠标悬停时也去下划线 */
  }

• 改变颜色和字体大小：

  a {
      color: #ff0000; /* 链接颜色 */
      font-weight: bold; /* 指定加粗 */
      text-decoration: underline; /* 明确保留下划线，与前面的规则不冲突 */
      font-size: 16px; /* 字体大小 */
  }

• 去除跳转动画，安全导入：

  a:focus {
      text-decoration: underline; /* 或选择其他的视觉反馈 */
      outline: none; /* 去除聚焦时浏览器默认的轮廓 */
      box-shadow: 0 0 5px #333; /* 自定义焦点效果 */
  }

  必须保留某种可视反馈，例如带CSS的text-decoration: underline，因为这是可访问性的重要方面。可以使用text-decoration-skip-inks来尝试控制光标形状，但非必需。

你可以将这些CSS规则应用于ID、类或锚点选择器，以便对链接进行精细控制。

通过熟悉这些HTML、MS Word、协议、路径和CSS方面，你就能掌握创建高效、可访问且技巧性强的超链接的能力了。无论是构建网站的基础，还是编辑文档，这都是一份实用的指南。