首页>国内 > 正文

11 个有用的 HTML 技巧

2023-05-18 18:18:26来源：web前端开发

HTML（超文本标记语言）是网页最基础的结构，也是网页的主要构成元素。 虽然许多开发人员都熟悉 HTML 的基础知识，但还有许多鲜为人知的技巧和技术可以提高您的 HTML 编码技能。


(相关资料图)

在本文中，我们将探讨您可能不知道的 10个 HTML 技巧。

1. 使用 元素在新标签页中打开链接

如果您希望文档中的所有链接默认在新选项卡中打开，您可以使用 元素。 在 HTML 的 部分添加以下代码：

现在，无论何时单击链接，除非另有说明，否则它将在新选项卡中打开。

2.使用download属性下载文件

您可以提示用户直接下载文件，而不是在单击链接时导航到文件。 这可以通过将下载属性添加到您的链接来实现。 这是一个例子：

Download

单击链接时，文件将由用户下载，而不是在浏览器中打开。

3.直接联系链接

改善您网站上用户交互的一个好方法是为电子邮件、电话和 SMS 提供直接链接。 这可以通过在 href 属性中使用具有特定协议的 锚标记来实现。

这些协议是 mailto:、tel: 和 sms: 分别用于电子邮件、电话和 SMS。

以下是如何实现它的示例：

  Send an email  Make a call  Send a text

当用户点击这些链接时，他们的设备将打开默认的电子邮件客户端、拨号器或消息应用程序，其中包含所提供的信息。

4. 使用 rel="noopener" 增强安全性

使用 target="_blank" 在新选项卡中打开链接时，新打开的页面可以访问原始页面的 window.opener 属性。

这可能是一个安全风险，为防止这种情况，您可以将 rel="noopener" 属性添加到您的链接，如下所示：

Link

这样可以确保新打开的页面无法访问 window.opener 属性，从而提高安全性。

5. 输入给定的 Datalist 元素

HTML 中的 元素提供了一个预定义选项列表，以在用户将数据输入到 元素时向用户提出建议。 这对于用户在键入时可以从快速建议中受益的字段尤其有用，例如搜索字段或电子邮件输入。

下面是如何使用它：

在此示例中，当用户开始在输入字段中键入内容时，他们将看到与其输入相匹配的建议选项。

6.计算结果的输出元素

元素是一个容器元素，网站或应用程序可以将计算结果或用户操作的结果注入其中。 这是一个例子：

   +   =  75

在此示例中，当用户更改输入字段的值时，添加的结果将显示在输出字段中。

7. 使用
元素对控件进行分组

使用 Web 表单时，您可以使用

元素对相关控件和标签进行分组。 这有助于组织和构建表单。

这是一个例子：

  
    Personal Information
8.使用海报属性显示视频缩略图

在您的网页上嵌入视频时，您可以指定在加载视频时或在用户单击播放按钮之前显示的缩略图。 使用 poster 属性定义缩略图图像 URL。 这是一个例子：

指定的 thumbnail.jpg 将一直显示，直到视频加载或开始播放。

9. 使用
元素构建手风琴菜单

要在不依赖 JavaScript 的情况下创建手风琴菜单，您可以使用

和 元素。
元素充当容器，而 元素代表可点击的标题。 这是一个例子：

  Click me  
Content of the accordion panel.

这允许用户展开和折叠手风琴菜单中的内容。

10. 使用 contenteditable 属性执行内联编辑

如果您想直接在浏览器中启用内容的内联编辑，您可以使用 contenteditable 属性。 通过将 contenteditable="true" 添加到 HTML 元素，例如

或

，用户可以编辑其中的文本。 这是一个例子：

  This text can be edited by the user.

用户可以点击文字，直接在网页内进行修改。

11. 使用 标记突出显示文本

要以视觉方式突出显示 HTML 文档中文本的特定部分，您可以使用 标记。 只需用 标签包裹要突出显示的文本。 这是一个例子：

This is an example highlighted text.
结论

请继续探索学习，保持好奇，并继续扩展您的 HTML 知识。

另外，本文中提供的示例已为演示目的进行了简化。 在您自己的项目中实施这些技术时，始终确保正确的 HTML 语法并遵循最佳实践。

关键词：

相关新闻

聚焦

IT

科技

Copyright 2015-2020   三好网  版权所有 联系邮箱：435 22 640@qq.com  备案号： 京ICP备2022022245号-21