在 HTML 中创建电话号码链接

使用带有 tel: URI 的 HTML 锚点，让网页上的电话号码可以被访问者点击。访问者选择该链接后，设备可能会打开拨号器或其他可用的通话处理程序；链接本身不会拨出电话。在联系页面上使用这种方式，可以方便访问者通过电话联系商家。

电话号码链接的工作方式

电话号码链接是一个锚点元素，其 href 属性以 tel: 开头，并包含要拨打的号码。锚点标签之间的文字是可见且可选择的链接标签。目标值和显示文字可以不同：前者提供拨号号码，后者帮助访问者识别链接。

创建可点击的电话号码链接

例如，下面这段内嵌 HTML 会创建一个标签为“联系客户支持”的链接：<a href="tel:+1234567890">联系客户支持</a>。将 +1234567890 替换为符合拨号格式的商家电话号码，并选择能说明访问者将联系谁或联系什么的链接文字。

下面这段独立的 JavaScript 会将相同的锚点标记存储为字符串。如果应用需要在代码中拼接 HTML 值，这种写法会很有用；普通网页则可以直接使用锚点。

const phoneLink = '<a href="tel:+1234567890">Call customer support</a>';
console.log(phoneLink);

<a href="tel:+1234567890">Call customer support</a>

设置号码格式，便于阅读和国际拨号

根据预期的来电者和适用的号码格式，设置 href 中的号码。对于国际来电者，如果需要通过国家/地区呼叫代码才能明确目标号码，就应将其包含在内。但是否需要国家/地区代码，取决于受众和号码使用场景，并非一概而论。

可在可见标签中使用常见的空格、括号或连字符，让号码更易阅读。例如，链接可以显示为 (234) 567-8901，而 href 值使用 tel:+12345678901。分隔符有助于读者快速辨认号码，但可见文字中并非必须包含这些符号。请确保可拨打的号码值和面向读者的显示形式清楚且一致。

访问者启用链接后会发生什么

访问者启用 tel: 链接时，设备或浏览器可能会打开拨号器或其他已配置的通话处理程序，并填入可供使用的号码。通常由访问者决定是否拨出电话。在台式电脑上，如果配置了通话应用，它可能会处理该链接；否则，实际行为取决于浏览器和可用软件。不要假设所有设备都会打开相同的界面。

无障碍与测试建议

如果链接目标需要上下文说明，请使用“联系客户支持”这类描述性文字，而不要只用“拨打”之类含义模糊的标签。这有助于使用辅助技术浏览链接的人，以及看不到周围文字的访问者理解链接用途。确保链接可以通过键盘访问，并且视觉样式能让人辨认出它是链接。

请在受众常用的设备、浏览器和通话应用上检查链接。确认显示的号码易于阅读、href 中包含预期号码，并且启用链接后会提供预期的处理程序。这些检查有助于在访问者依赖联系页面之前，发现格式错误和设备行为差异。

电话号码链接常见问题

显示的号码可以包含括号或连字符吗？

可以。如果常见的分隔符能让号码更易阅读，就可以在可见文字中使用。请确保 tel: 目标值适合拨号；不要依赖可见文字来设置链接目标。

电话号码链接在桌面浏览器中能用吗？

如果浏览器或操作系统配置了通话处理程序，就可能可以使用。如果没有，桌面设备可能无法提供有用的操作，因此请在访问者使用的环境中进行检查。

如果链接无法使用，我应该检查什么？

检查锚点标签的拼写、tel: 前缀以及 href 中的号码。然后在相关设备上启用链接，并确认是否有拨号器或通话应用可用。设备设置和软件不同，实际行为也可能不同。

每个电话号码链接都应该包含国家/地区呼叫代码吗？

当目标来电者和号码使用场景需要时，请包含国家/地区呼叫代码，尤其是在访问者可能从其他国家拨打电话的情况下。各地的本地拨号惯例有所不同，因此应选择能清楚指向预期号码的格式。