11 个有用的 HTML 技巧

您所在的位置:网站首页 window10视频不显示缩略图 11 个有用的 HTML 技巧

11 个有用的 HTML 技巧

2023-05-19 09:28| 来源: 网络整理| 查看: 265

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 Name: Email: 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 语法并遵循最佳实践。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3