没有 http(s) 前缀的 Href

Question

我刚刚创建了原始 html 页面。这是：example 这是它的标记：

<a href="www.google.com">www.google.com</a>
<br/>
<a href="http://www.google.com">http://www.google.com</a>

如您所见，它包含两个 link。第一个的 href 没有 'http' 前缀，当我单击此 link 时，浏览器将我重定向到不存在的页面 https://fiddle.jshell.net/_display/www.google.com。第二个 href 有这个前缀，浏览器生成正确的 url http://www.google.com/。是否可以使用没有 http(s) 前缀的 href，例如 www.something.com？

Answer 1

您可以在路径前使用// 来省略协议。这是一个例子：

<a href="//www.google.com">Google</a>

通过使用 //，您可以告诉浏览器这实际上是一个新的（完整的）link，而不是相对的（相对于您当前的 link）。

Answer 2

这是可能的，而且您现在确实正在这样做。它只是没有按照您的想法去做。

考虑一下当您 link 这样做时浏览器会做什么：

href="index.html"

你link到这个时候它会做什么?:

href="index.com"

或者这个?:

href="www.html"

或者?:

href="www.index.com.html"

浏览器不知道你的意思，它只知道你告诉它的。如果没有前缀，它将遵循当前 HTTP 地址的标准。前缀告诉它它需要完全从一个新的根地址开始。

请注意，您 不需要 http: 部分，您可以这样做：

href="//www.google.com"

浏览器将使用当前协议（http、https 等），但 // 告诉它这是一个新的根地址。

Answer 3

通过仅在路径前面使用 // 来省略协议在 SEO 方面是一个非常糟糕的主意。好的，大多数现代浏览器都可以正常工作。另一方面，大多数机器人会在扫描您的网站时遇到麻烦。 Majestic 不会计算来自这些链接的流量。 SEMrush 等审核工具将无法执行其工作

Answer 4

我在 React 项目中创建了一个小函数，可以帮助您：

const getClickableLink = link => {
    return link.startsWith("http://") || link.startsWith("https://") ?
      link
      : `http://${link}`;
  };

你可以这样实现：

const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>

没有 http(s) 前缀的 Href

Href without http(s) prefix

html

href