[译] 你从来没用过的HTML标签
原文地址： https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/
译文首发于：https://www.zhuwenlong.com/blog/article/6246842127c1e98149b5fff6
在本文中，Louis Lazaris描述并演示了一些有趣的HTML属性，这些属性您可能听说过，也可能没有听说过。如果觉得它们非常有用，可以在您的项目中亲自使用。
今年1月，麦迪逊·坎娜(Madison Kanna)在推特上问她的粉丝:
今年你最想学习或更深入地学习哪些语言/技术?
我的是: typescript, next.js, react, graphql, solid, node
-- Madison Kanna (@Madisonkanna) 2022年1月3日
我的答案很简单: HTML。我并不是在讽刺或嘲笑你。当然，我非常清楚在哪些实例中使用哪些标记，以及如何保持HTML的语义性和可访问性。
但还有一大堆很少使用的属性我确信我已经忘记了，可能还有一些我甚至都不知道它的存在。这篇文章是我研究的结果，我希望在接下来的几个月里，当你构建HTML页面时，你会发现其中一些对你有用。
????????虚拟键盘的 enterkeyhint 属性
enterkeyhint 属性是一个全局属性，可以应用于将contenteditable设置为true的表单控件或元素。此属性帮助使用虚拟屏幕键盘的移动设备上的用户更好的明确确认键的提示文本。
javascript
<input type="text" enterkeyhint="done">
Enterkeyhint接受七种可能的值之一，这些值将决定用户在“enter”键上看到的内容:
enter通常表示插入新行，中文状态下显示换行。done通常意味着没有更多的输入，输入法编辑器(IME)将被关闭。中文状态下显示完成。go通常指把用户带到他们输入的文本的目标位置。中文状态下显示前往。next通常将用户带到下一个将接受文本的字段。中文状态下显示下一项。previous通常将用户带到接受文本的前一个字段。中文状态下显示上一项。search通常把用户带到他们输入的文本的搜索结果。中文状态下显示搜索。send通常将文本发送给它的目标。中文状态下显示发送。
您可以看到这些“提示”对用户是如何有用的: 用户是否完成了一系列操作？他们是否提交信息？它们是否在保存设置？根据它们在做什么，你可以定制提示来匹配你的应用程序的需要。
你可以在移动设备上访问下面的Demo来尝试这个方法。
在我的iOS设备上，输入键的文本会随着键的颜色而改变，这取决于值，如下面的截图所示。这取决于用户的设备。
强调一下，这个属性不接受自定义值;该值需要是上面所示的7个值之一。一个无法识别的值将被默认为设备的输入键的默认文本。
???????? 样式表的 title 属性
当我为这篇文章做研究时，这对我来说是全新的，可能是这个列表中最有趣的一个。作为一点背景知识，如果您不知道，Firefox有一个选项，让您选择查看页面时想要使用的样式表。通常，这个功能会显示两个选项:“基本页面样式”和“无样式”，如下图在我的Windows电脑上所示。
这使您能够快速测试禁用样式时页面的外观，并且还允许您使用任何备用样式表查看页面。
备用样式表特性通过两个属性启用:应用于<link>元素的title属性和rel=alternate，如下代码所示:
<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">在这种情况下，我的“默认”样式将自动应用，但备用样式表将只应用于我使用Firefox的“页面样式”选项。你可以使用Firefox或其他兼容的浏览器访问使用它，下面的截图显示了Firefox中的样式表选项:
正如前面提到的，这个功能在Firefox中可以使用，但我无法让它在任何基于chrome的浏览器中运行。MDN关于备用样式表的文章说，它可以在其他浏览器中使用扩展来启用，但我找不到一个可用的扩展可以做到这一点。
???????? <blockquote> 和 <q> 元素的 cite 属性
我敢肯定你经常使用 <blockquote>元素。您可以在没有属性的情况下直接使用它，但是您也可以选择使用cite属性。这里有一个例子，引用MDN文章，描述使用引用<blockquote>:
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite">
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.
</blockquote>因为我上面的blockquote来自MDN文章，解释了cite的作用，我设置了指向页面的URL作为cite值。
您可以看到这是多么有用，因为它将引号和引号的源包在一个元素中。但请注意HTML规范中的进一步解释:
用户代理可能允许用户跟踪这样的引用链接，但它们主要是用于私人用途(例如，通过服务器端脚本收集关于网站引用的统计信息)，而不是面向读者。
当然，同样的概念也适用于 <q> 元素上的 cite 的使用，它用于内联引用。
???????? 自定义有序列表的属性
使用 <ol> 元素的有序列表经常被使用。一些鲜为人知的特性允许你定制出现在这样一个列表中的编号行为:
reverse属性，以逆序编号项目(从高到低，而不是默认的从低到高)start属性，用来定义从哪个数字开始type属性，定义是使用数字、字母还是罗马数字value属性来指定特定列表项上的自定义数字
正如您所看到的，有序列表在纯HTML中比您通常所习惯的要灵活得多。
reverse 属性是一个有趣的属性，因为它实际上并不反转列表本身的内容；它只反转每个列表项旁边的数字。
<ol reversed>
<li>List item...</li>
<li>List item...</li>
<li>List item...</li>
</ol>下面的codeen演示添加了一些JavaScript，因此您可以交互式地切换反向属性。
注意，列表本身保持不变，但是数字改变了。如果您正在寻找一种方法来反转内容，请记住这一点。这是你可以用JavaScript、CSS或直接在HTML源代码中做的事情。
上面，我还提到了其他三个属性。让我们把它们合并到列表中，看看它们是如何使用的：
<ol reversed start="20" type="1">
<li>Typee: A Peep at Polynesian Life (1846)</li>
<li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
<li>Mardi: and a Voyage Thither (1849)</li>
<li>Redburn: His First Voyage (1849)</li>
<li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
<li>Moby-Dick; or, The Whale (1851)</li>
<li>Pierre; or, The Ambiguities (1852)</li>
<li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>注意，已添加的 type 和 start 属性以及单个列表项上的 value 属性。type 属性接受表示编号类型的五个单字符值(a, A, i, I, 1)中的一个。
尝试使用以下交互式演示:
使用单选按钮选择 type 属性的五个值之一。然后尝试使用“Reversed”按钮反转列表。正如你所看到的，除了有序列表的默认行为外，还有很多其他的可能!
???????? <a>元素的 download 属性
由于链接在网络上无处不在，所以有一个属性让链接更加强大总是件好事。download属性是几年前添加到规范中的，它允许您指定当单击链接时，应该下载而不是访问它。
<a href="/example.pdf" download>Download File</a>如果没有值，则download属性将强制下载链接的页面。或者，您可以提供一个值，浏览器使用该值作为下载资源的建议文件名。
<a href="/example.pdf" download="my-download.pdf">Download File</a>作为这个属性的额外技巧，您可以将这个特性与一些JavaScript结合起来，为用户创建一种方式来下载他们自己创建的内容。你可以用下面的演示来尝试一下。
???????? <img> 元素的 decoding 属性
这是我在研究本文时遇到的另一个全新的方法——在规范中似乎也是相当新的。向图像元素添加decoding属性可以向浏览器提供图像解码提示。
<img src="/images/example.png" alt="Example" decoding="async">这个属性类似于在脚本上使用async属性。加载图像所需的时间不会改变，但其“解码”的方式(因此其内容在视口可见)是由解码属性决定的。
可用的值为：
sync同步解码图像，这通常是浏览器做的。async异步解码图像以避免延迟其他内容的呈现。。sync默认值，允许浏览器使用自己内置的解码方法。
如果您对解码图像的概念感到好奇，规范中有一个很好的解释，不难理解。
???????? <iframe> 元素的 loading 属性
你可能已经知道，图像元素现在可以包含一个加载属性，将延迟加载作为一个特性放到浏览器中，这是我们多年来在JavaScript解决方案中一直在做的事情。但是不要忘记 load 属性也可以用于 <iframe> 元素:
<iframe src="/page.html" width="300" height="250" loading="lazy">和图片一样，loading属性接受一个值为 eager(浏览器的默认行为)或 lazy (延迟加载iframe的内容，直到iframe即将进入视口)。这个属性唯一的缺点是Firefox不支持它在iframes上的使用(尽管Firefox支持加载图片)。
???????? 表单字段的 form 属性
在大多数情况下，您将把表单输入和控件嵌套在
