HTML 能做到吗？第一部分

欢迎来到我的 HTML 能做什么系列，第 1 部分。

为了与我的GitHub-Can-Do-This系列保持一致，今天我想写一篇关于 HTML 可以做的很酷的事情的文章（而且很多人显然不知道）。

我坚信，越多的人理解 HTML 并充分使用它，网络就会变得越容易访问。

目录

1. 详细信息和摘要 HTML 标签
2. 电子邮件或电话号码链接
3. 具有自动完成功能的列表
4. 文本修改

由于我不知道接下来会有多少部分，因此我将按照字母顺序描述令人敬畏的标签及其背后的 HTML 魔法，以此来开始这个系列。

1. 详细信息和摘要

打开/关闭小部件通常使用 JavaScript 创建。目前，有一个默认的 HTML 标签专门用于实现这一功能。

样式可根据需要调整。默认情况下，该小部件处于关闭状态。赋予<details>该属性open后，它会从头开始显示其内容。

2. 链接到电子邮件地址或电话号码

该<a>标签具有一个href属性，用于指示链接的目标。它可以链接到网页、文件、电子邮件地址、同一页面中的位置，或 URL 可以指向的任何其他内容。

该href属性负责使链接<a>可聚焦并在按下回车键时激活链接。

链接到电子邮件地址

如果您在 的 URL 方案中添加mailto:和预期收件人的电子邮件地址href，则单击时会打开一条新的发送电子邮件消息。

<a href="mailto:nowhere@email.org">Send email to nowhere</a>

您还可以在 URL 中添加更多详细信息，包括 cc、bcc、主题和正文😯。

<a href="mailto:nowhere@email.org?cc=nobody@email.org&subject=This%20is%20the%20subject">Send email with subject to nowhere and nobody</a>

阅读有关链接到电子邮件地址 rfc6068 的更多信息。

链接到电话号码

href您还可以在将其添加到之后时链接到电话号码tel:。

<a href="tel:+18005551239">(800) 555 1239</a>

链接行为可能因设备而异（有关链接到电话号码的 MDN 官方文档）：

• 在移动设备上，号码会自动拨打。
• 大多数操作系统都有可以拨打电话的程序，例如 Skype 或 FaceTime。
• 网站可以使用registerProtocolHandler拨打电话，例如web.skype.com。
• 其他行为包括将号码保存到联系人，或将号码发送到另一台设备。

阅读有关链接到电话号码 rfc3966 的更多信息。

3. 自动完成列表

使用时<datalist>，当用户开始在输入字段中写入时会出现一个下拉菜单，并使他们能够从列表中的可用选项中进行选择。

4. 文本修改

使用特定标签，无需额外的 CSS，即可直接修改文本。非常方便。

谢谢阅读。非常感谢！