那些你从不使用的 HTML 属性，背后竟然大有文章，赶快了来了解下
那些你从不使用的 HTML 属性
快速总结 ? 在这篇文章中，Louis Lazaris 描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。
一月份，麦迪逊卡纳[问她的推特粉丝
> 今年你想要学习或更深入地学习哪些语言/技术？
>
> typescript、next.js、react、graphql、solidity、node，这几个是哪个呢
>
> \- 麦迪逊卡纳 (@Madisonkanna)
>
> 2022 年 1 月 3 日
但是我的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。
但是我确信我已经忘记了一大堆较少使用的属性，并且可能有一大堆我什至不知道存在的属性。这篇文章是我研究的结果，我希望你会发现其中的一些对你有用，因为你在接下来的几个月里构建 HTML 页面。
enterkeyhint`虚拟键盘 的属性
该enterkeyhint属性是一个全局属性，可应用于已contenteditable设置为的表单控件或元素true。此属性可帮助使用虚拟屏幕键盘的移动设备上的用户。
html
enterkeyhint接受七个可能值之一，这些值将确定用户在他的“输入”键上看到的内容：
- `enter`,
- `done`,
- `go`,
- `next`,
- `previous`,
- `search`,
- `send`.
您可以看到这些“提示”如何对用户有用。用户是否正在执行一系列操作？他们在提交信息吗？他们在保存设置吗？根据他们正在做什么，您可以自定义提示以匹配您的应用程序的需求。
您可以通过在移动设备上访问下面的 CodePen 演示来尝试这个。
html
Using the enterkeyhint Attribute
View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.
body {
font-family: Arial, sans-serif;
font-size: 20px;
padding: 0 20px;
}
main {
text-align: center;
margin: 0 auto;
max-width: 800px;
}
p {
text-align: left;
padding: 0 20px;
}
code {
color: firebrick;
}
在我的 iOS 设备上，回车键的文本会随着键的颜色而变化，具体取决于值，如下面的屏幕截图所示。这可能会有所不同，具体取决于用户的设备。
只是强调一下，这个属性不接受自定义值；该值需要是上面显示的七个之一。无法识别的值将默认为输入键的设备默认文本。
样式表上的title属性
在为本文进行研究时，这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。通常，此功能显示两个选项：“基本页面样式”和“无样式”，如下图所示在我的 Windows 机器上。
这使您可以快速测试禁用样式时页面的外观，还允许您使用任何备用样式表查看页面。
备用样式表功能通过两个属性启用：title属性和rel=alternate应用于元素，如下面的代码所示：
html
在这种情况下，我的“默认”样式将自动应用，但仅当我使用 Firefox 的“页面样式”选项选择它们时，备用样式表才会应用。您可以通过使用 Firefox 或其他兼容浏览器访问以下 CodePen 来尝试上述示例：
下面的屏幕截图显示了 Firefox 中的样式表选项：
如前所述，此功能在 Firefox 中有效，但我无法让它在任何基于 Chromium 的浏览器中工作。MDN关于备用样式表的文章说它可以在其他浏览器中使用扩展启用，但我找不到可以执行此操作的活动扩展。
和元素 的cite属性
我敢肯定你经常使用这个元素。您可以在没有属性的情况下直接使用它，但您也可以选择使用该cite属性。这是一个引用描述使用citeon的 MDN 文章的示例：
A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.
由于我上面的块引用来自解释了什么是 MDN 文章cite，因此我将指向页面的 URL 设置为cite值。
您可以看到这是多么有用，因为它将引用和引用的来源包装在一个元素中。但请注意HTML 规范中的进一步解释：
用户代理可能允许用户关注此类引用链接，但它们主要用于私人用途（例如，通过服务器端脚本收集有关站点使用引用的统计信息），而不是供读者使用。
当然，相同的概念也适用于用于内联引用cite的元素上。
自定义序列列表的属性
- 属性，以相反的顺序对
reversed项目进行编号（从高到低，而不是默认的从低到高）； - 属性，定义从
start哪个数字开始； - 属性，定义是
type使用数字、字母还是数字； - 属性，用于在
value特定列表项上指定自定义编号。
如您所见，使用纯 HTML 的有序列表比您通常习惯的要灵活得多。
该reversed属性是一个有趣的属性，因为它实际上并没有反转列表本身的内容；它只会反转每个列表项旁边的数字。
- List item...
- List item...
- List item...
下面的 CodePen 演示添加了一些 JavaScript，因此您可以交互地切换reversed属性。
请注意，列表本身保持不变，但数字会发生变化。如果您正在寻找一种反转内容的方法，请记住这一点。这是您可以使用 JavaScript、CSS 或直接在 HTML 源代码中执行的操作。
上面，我还提到了其他三个属性。让我们将它们合并到列表中，看看如何使用它们：
- Typee: A Peep at Polynesian Life (1846)
- Omoo: A Narrative of Adventures in the South Seas (1847)
- Mardi: and a Voyage Thither (1849)
- Redburn: His First Voyage (1849)
- White-Jacket; or, The World in a Man-of-War (1850)
- Moby-Dick; or, The Whale (1851)
- Pierre; or, The Ambiguities (1852)
- Isle of the Cross (1853 unpublished, and now lost)
请注意，已添加的type和属性以及单个列表项上的属性。该属性接受表示编号类型的五个单字符值（、、、、 ）之一。start``value``type``a``A``i``I``1
使用以下交互式演示进行尝试：
使用单选按钮选择该type属性的五个值之一。然后尝试使用Toggle Reversed按钮反转列表。如您所见，除了有序列表的默认行为之外，还有很多可能性！
元素 的download属性
就像网络上无处不在的链接一样，拥有一个使链接更加强大的属性总是很好的。该download属性是几年前添加到规范中的，它允许您指定单击链接时应该下载而不是访问该链接。
Download File
如果没有值，该download属性会强制下载链接页面。或者，您可以提供一个值，浏览器将其用作下载资源的建议文件名。
Download File
作为涉及此属性的额外技巧，您可以将此功能与一些 JavaScript 结合起来，为用户创建一种下载他们自己创建的内容的方式。
元素 的decoding属性
在研究这篇文章时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。
此属性类似于async在脚本上使用该属性。加载图像所需的时间不会改变，但其“解码”的方式（因此其内容在视口中变得可见）由decoding属性决定。
值为：
sync
同步解码图像，一般浏览器都是这样做的。async
异步解码图像以避免延迟其他内容的呈现。auto
默认允许浏览器使用自己的内置解码方法。
如果您对解码图像的概念感到好奇，该规范有[一个很好的解释]，并不难理解。
元素 的loading属性
您可能已经知道，图像元素现在可以包含一个loading属性，将延迟加载作为一项功能放入浏览器中，这是我们多年来使用 JavaScript 解决方案所做的事情。但不要忘记该loading属性也可以用于