11个有用的HTML技巧

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

十年的桥西网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整桥西建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“桥西网站设计”,“桥西网站推广”以来，每个客户项目都认真落实执行。

在本文中，我们将探讨您可能不知道的 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:
    

  

  
Click me
  
Content of the accordion panel.

  This text can be edited by the user.

This is an example highlighted text.