HTML（超文本标记语言）是网页最基础的结构，也是网页的主要构成元素。 虽然许多开发人员都熟悉 HTML 的基础知识，但还有许多鲜为人知的技巧和技术可以提高您的 HTML 编码技能。
在本文中，我们将探讨您可能不知道的 10 个 HTML 技巧。
1. 使用 <base> 元素在新标签页中打开链接
如果您希望文档中的所有链接默认在新选项卡中打开，您可以使用 <base> 元素。 在 HTML 的 <head> 部分添加以下代码：
现在，无论何时单击链接，除非另有说明，否则它将在新选项卡中打开。
2.使用download属性下载文件
您可以提示用户直接下载文件，而不是在单击链接时导航到文件。 这可以通过将下载属性添加到您的链接来实现。 这是一个例子：
单击链接时，文件将由用户下载，而不是在浏览器中打开。
3.直接联系链接
改善您网站上用户交互的一个好方法是为电子邮件、电话和 SMS 提供直接链接。 这可以通过在 href 属性中使用具有特定协议的 <a> 锚标记来实现。
这些协议是 mailto:、tel: 和 sms: 分别用于电子邮件、电话和 SMS。
以下是如何实现它的示例：
当用户点击这些链接时，他们的设备将打开默认的电子邮件客户端、拨号器或消息应用程序，其中包含所提供的信息。
4. 使用 rel="noopener" 增强安全性
使用 target="_blank" 在新选项卡中打开链接时，新打开的页面可以访问原始页面的 window.opener 属性。
这可能是一个安全风险，为防止这种情况，您可以将 rel="noopener" 属性添加到您的链接，如下所示：
这样可以确保新打开的页面无法访问 window.opener 属性，从而提高安全性。
5. 输入给定的 Datalist 元素
HTML 中的 <datalist> 元素提供了一个预定义选项列表，以在用户将数据输入到 <input> 元素时向用户提出建议。 这对于用户在键入时可以从快速建议中受益的字段尤其有用，例如搜索字段或电子邮件输入。
下面是如何使用它：
在此示例中，当用户开始在输入字段中键入内容时，他们将看到与其输入相匹配的建议选项。
6.计算结果的输出元素
<output> 元素是一个容器元素，网站或应用程序可以将计算结果或用户操作的结果注入其中。 这是一个例子：
在此示例中，当用户更改输入字段的值时，添加的结果将显示在输出字段中。
7. 使用 <fieldset> 元素对控件进行分组
使用 Web 表单时，您可以使用 <fieldset> 元素对相关控件和标签进行分组。 这有助于组织和构建表单。
这是一个例子：
8.使用海报属性显示视频缩略图
在您的网页上嵌入视频时，您可以指定在加载视频时或在用户单击播放按钮之前显示的缩略图。 使用 poster 属性定义缩略图图像 URL。 这是一个例子：
指定的 thumbnail.jpg 将一直显示，直到视频加载或开始播放。
9. 使用 <details> 元素构建手风琴菜单
要在不依赖 JavaScript 的情况下创建手风琴菜单，您可以使用 <details> 和 <summary> 元素。 <details> 元素充当容器，而 <summary> 元素代表可点击的标题。 这是一个例子：
这允许用户展开和折叠手风琴菜单中的内容。
10. 使用 contenteditable 属性执行内联编辑
如果您想直接在浏览器中启用内容的内联编辑，您可以使用 contenteditable 属性。 通过将 contenteditable="true" 添加到 HTML 元素，例如 <div> 或 <p>，用户可以编辑其中的文本。 这是一个例子：
用户可以点击文字，直接在网页内进行修改。
11. 使用 <mark> 标记突出显示文本
要以视觉方式突出显示 HTML 文档中文本的特定部分，您可以使用 <mark> 标记。 只需用 <mark> 标签包裹要突出显示的文本。 这是一个例子：
结论
请继续探索学习，保持好奇，并继续扩展您的 HTML 知识。
另外，本文中提供的示例已为演示目的进行了简化。 在您自己的项目中实施这些技术时，始终确保正确的 HTML 语法并遵循最佳实践。
