Web前端开发技术

Appearance

超链接 ​

元信息 ​

  • 目标：理解 <a> 超链接是 Web 成为"网"的根本机制，掌握 href/title/target 属性、站内外链接、相对与绝对路径、# 页内锚与 base 全局改写
  • 关键概念：超链接、href、站内链接、站外链接、相对路径、绝对路径、锚（#）、base标记、链接状态
  • 关联阶段：cp1
  • 常见误区：站内链接也写全限定域名（爬虫会误判为站外，影响收录效果）；分不清 /、.、.. 路径基准（/ 是站点根、./ 是当前目录）；以为链接颜色是页面设定的（蓝/紫/黑是浏览器按访问历史给出的默认状态样式）

什么是超链接？ ​

  • 页面使用url作为唯一标识
  • 网站是多个页面的集合，使用域名作为标识
  • 万维网是多个网站的集合
  • 超链接用于标记页面或网站之间的链接关系

超链接 <a>标记是WEB世界中最重要的标记，没有链接标记，网页就不能称之为超文本，就不能成长为万维网，更不会有搜索引擎

超链接示例 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
  • href: 链接指向的地址
  • title: 鼠标或键盘焦点指向链接时的提示信息
  • target: 该链接在哪一个窗口(或标签tab窗口)打开，默认为在本窗口打开，本例为在新窗口打开

要理解target属性的各个值，需要理解文档与窗口的关系

站内链接与站外链接 ​

  • 站外链接: <a href="http://x.com/bbs/news.html" >link</a> 必须采用全限定域名与文件路径的url格式
  • 站内链接: <a href="news.html" >link</a> 可以仅采用相对文件路径或绝对文件路径的格式，但最终生成的url需要取决于当前站点的域名或链接所在页面的地址

如果链接目标都属于当前站点，我们推荐站内链接形式，因为如果采用站外链接格式，搜索引擎等爬虫可能误以为是站外链接，从而影响搜索效果。

相对文件路径与绝对文件路径 ​

  • 绝对路径: <a href="/news.html" >link</a> 如当前域名为http://x.com,则浏览器生成的最终地址为http://x.com/news.html
  • 相对路径： <a href="news.html" >link</a> 如该标记当前所在页面为http://x.com/bbs/index.html,则浏览器生成的最终地址为http://x.com/bbs/news.html

浏览器或搜索引擎等都能很聪明的将文件路径转换为完整的url，但是，要记住并不是所有的Web客户端都一定具有这种智能

文件路径的种种变形 ​

以下几种方式表示同一个路径(当前页面为http://x.com/bbs/index.html)

  1. <a href="/bbs/news.html" >link</a>
  2. <a href="news.html" >link</a>
  3. <a href="./news.html" >link</a>
  4. <a href="../bbs/news.html" >link</a>

其中:

  • / 代表根目录，即http://x.com站点的起点
  • . 代表目前所在的目录
  • .. 表示上一层目录

如果熟悉Linux系统命令行的同学，对上述路径格式一定不会陌生

元标记 <base> 全局性改变链接的行为 ​

如果你想改变当前文档中多个<a>标记的相对基地址及行为，则使用<base> 标记，譬如以下示例，两个链接最终生成相同的地址

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

锚：页内链接 ​

以上都是页面之间的链接为，如果希望想在文档内部进行跳转，可以使用#锚定位符。以下表示跳转到文档的底部或头部：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

链接的状态 ​

当我们浏览互联网时，经常会发现，当我们重复访问一些网页时(譬如：https://www.sina.com.cn/ )， 有一些链接是蓝色的，有一些又是灰色的。换言之，这些链接基于用户访问行为的不同，呈现出不同的状态，譬如：

  • 一个从未被当前用户访问过的链接，显示为蓝色字体并带有下划线
  • 曾经被当前用户访问过的链接，显示为紫色且不带下划线
  • 当用户鼠标悬浮或划过链接时，显示为黑色
  • 当链接被用户点击时，链接显示为红色并带有下划线

浏览器的默认显示设置是可以被改变的，请参看后面的css 伪类相关章节

深入阅读 ​