作者：路易斯·拉扎里斯（Louis Lazaris）
原始链接：您从未使用过的那些HTML属性
翻译：Yodonicc
在本文中，路易斯·拉扎里斯（Louis Lazaris）描述并演示了一些有趣的HTML属性。您可能已经听说过它，或者您可能没有听说过，您可能会发现它们非常有用。请尝试在您的项目中开始使用它。
那些您从未使用过的HTML属性 - 前端的创新性
一月份，麦迪逊·查纳（Madison Chana）问她的Twitter粉丝https://twitter.com/imprescementwebs/status/147814524333763076：
您想今年学习哪些语言和技术？
地雷：打字稿，next.js，react，graphql，solidity，node
2022年1月3日
我的答案很简单：html。我根本没有讽刺或嘲笑。当然，我知道在什么情况下使用了哪些标签，以及如何使我的大部分HTML语义和易于使用。
但是我坚信我已经忘记了很多有用的属性，而且我可能没有很多人都不知道它们存在的属性。这篇文章是我的研究结果。希望您在接下来的几个月内构建HTML页面时会找到其中的一些。
此属性是一个全局属性，可以应用于将设置为的表单控件或元素。此属性可以使用虚拟屏幕键盘帮助移动设备上的用户。
接受七个可能的值之一，这些值将确定用户在其“输入”密钥上看到的内容：
您可以看到这些“提示”对用户有用。用户执行一系列操作吗？他们在提交信息吗？他们保存设置吗？根据他们的操作，您可以自定义提示以符合您的需求应用。
您可以通过在移动设备上访问下面的Codepen演示来尝试此操作。
请参阅路易·拉扎里斯（Louis Lazaris）使用Codepen的EnterKeyHint属性。
在我的iOS设备上，Enter键的文本将根据键的颜色而更改，具体取决于值，如下屏幕截图所示。这可能是不同的，具体取决于用户的设备。
它只是强调，此属性不接受自定义值。该值必须是上面显示的七个之一。无法通过使用默认输入密钥默认为设备的设备识别该值。
研究本文时，这对我来说是全新当您选择查看页面时，此功能将显示两个选项：“基本页面样式”和“无样式”，如下图所示我的Windows计算机上的图所示。
（大型地图的预览）
这使您可以在禁用样式时快速测试页面的外观，还可以允许您使用任何备用样式表来查看页面。
备用样式表函数由两个属性启用：元素的属性和应用程序，如以下代码所示：
在这种情况下，我的“默认”样式将自动应用，但是当我使用Firefox的“页面样式”选项选择它们时，将应用备用样式表。您可以通过使用Firefox或其他兼容浏览器来尝试上述示例以下codepen：
请参阅Louis Lazaris的[使用REL标题属性向前的备用样式表。
下面的屏幕截图显示了Firefox中的样式表选项：
（大型地图的预览）
如前所述，此功能在Firefox中有效，但是我不能让它在任何基于浏览器的浏览器中工作。可以执行的扩展。
我敢肯定您经常使用此元素。您可以直接使用它而无需属性，但是您也可以选择使用此属性。这是MDN文章的一个示例，该文章描述了：
由于我在MDN文章中解释了这项工作，因此我将其设置为页面的URL值。
您可以看到它有多么有用，因为它包装并引用了元素中的来源。但是请注意，HTML规格中的进一步说明：
用户代理可以允许用户注意此类参考链接，但主要用于私人使用（例如，通过服务器脚本（Side）脚本收集参考统计信息），而不是读者。
当然，相同的概念也适用于内部参考元素。
经常使用此元素的有序列表。一些鲜为人知的功能使您可以自定义此类列表中出现的数字行为：
如您所见，纯HTML的有序列表比通常习惯的灵活性要灵活得多。
此属性是一个有趣的属性，因为它实际上并没有反转列表本身的内容。它仅反转每个列表项目旁边的数字。
以下Codepen演示添加了一些JavaScript，因此您可以交互方式切换属性。
请参阅路易斯·拉扎里斯（Louis Lazaris）的反向订购列表，并用html分叉。
请注意，列表本身保持不变，但是数字将会更改。如果您正在寻找一种反转内容的方法，请记住这一点。这是可以使用JavaScript，CSS或直接在HTML源代码中的操作。
上面，我还提到了其他三个属性。let的将它们合并到列表中，以查看如何使用它们：
请注意，添加了已添加的属性和单个列表项目上的属性。此属性接受数量类型的五个单个字符值（,,,,,,）的五个单一字符值之一。
尝试使用以下交互式演示：
请参阅Louis Lazaris [启动，类型和值属性，反向有序的列表分叉。
使用“广播”按钮选择属性的五个值之一。
网络上的链接无处不在，拥有一个使链接更强大的属性总是很好。几年前，此属性已添加到规范中，并且它允许您下载它而不是在单击时访问它链接。
如果不值得，该属性将被迫下载链接页面。替代，您可以提供一个值，浏览器将其用作推荐的文件名来下载资源。
作为涉及此属性的另一种技术，您可以将此功能与一些JavaScript相结合，以创建一种下载其为用户创建的下载内容的方法。我以前在本文中介绍了它，您可以使用以下演示进行尝试。
检查Louis Lazaris的下载属性与Data URI + JavaScript相结合，以允许用户下载自定义HTML强制。
在研究本文时，这对我来说是另一篇新文章 - 在规范中似乎很新。添加图像元素的属性可以为浏览器提供图像解码器提示。
此属性类似于使用脚本上的属性。加载图像所需的时间不会更改，但是其“解码”方法（因此，其内容在视口中可见）由属性确定。
值是：
如果您对解码图像的概念感到好奇，那么不难理解该规范具有良好的解释。
您可能已经知道，图像元素现在可以包含一个属性，该属性将延迟加载作为函数放入浏览器中。这是我们使用JavaScript解决方案多年来所做的。但是不要忘记该属性也可以用于元素：
像图像一样，属性接受（默认浏览器行为）或将延迟iframe内容的加载到IFRAME即将输入视口。此属性的唯一缺点是Firefox不支持IFRAME（尽管Firefox diam diam diam diam支持图像）。
在大多数情况下，您将输入和控制元素中的表单。但是，如果您的应用程序或布局需要不同的内容，则可以选择将表单放置在所需的任何地方，并将其与任何元素关联 - 即使不是元素的父元素。
如您所见，表单外部e -mail的属性设置设置为与表单相同的值。文档。
您可以使用此演示页面进行尝试。表单是使用GET请求提交的，因此您可以在URL查询字符串中查看提交的值。在此页面上，“注释”框位于元素之外。
我对此属性的唯一抱怨是，它可以给它一个更独特的名称，例如“ formowner”。不过，如果您的设计或布局需要家庭形式字段，请记住它很有用。
我在处理块引用时已经提到了它，但是此属性也可以用来用和元素标记删除和插入。在添加中，两个元素都可以包含一个属性。
对于每个元素，这两个属性的内容如下：
在我的示例中，我使用了一些文本示例来描述CSS属性，该属性需要Firefox中的供应商前缀。这可能是旧的博客文章。删除前缀，我可以使用这些元素来获取旧文本和新文本。我可以然后使用此属性引用错误报告来解决问题。
最后，最后一首有点像一首古老的歌曲，但是因为它经常使用，也许您甚至都不知道它的存在。这是元素和属性的组合。
如果Drop -Down选项包含一系列项目，则可以使用元素及其关联属性将选项分组为可见类别：
您可以使用以下codepen尝试一个示例：
请参阅Louis Lazaris的使用标签属性，并带有分叉的OptGroup元素。
请注意，每个属性都可以定义每个组的标题 - 但不能选择标题。作为附加提示，您还可以使用属性来禁用Drop -Down菜单的本节中的所有选项。
这是我本文研究的另一个新属性，在规格上它们相对较新。
可以用这些元素来定义这两个属性，如下所示：
使用通知浏览器，我们希望先加载指定的资源，因此不会被诸如脚本和样式表之类的内容所阻止。该属性指定请求内容的类型。
您可以使用属性并预先加载常规图像。但是最重要的是您可以像上面的代码一样使用属性。
这使您可以根据属性中指定的视口或其他媒体功能的大小预先加载正确的图像。
除了我详细描述和演示的属性外，您可能还想知道其他属性，我将在这里简要提及：
如果您使用了本文中提到的任何属性，或者您知道另一个HTML功能，或者您亲自从一个项目中使用它，请随时在评论中告诉我。
注意：特别感谢技术指导Dazhao（Zhao da）回顾了本文的翻译。
原始：https：//juejin.cn/post/7096384064457801758