在这篇文章中，描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。

有次和公司大佬闲余时间进行讨论时，说到了一个问题：

今年你很高兴学习或更深入地学习哪些语言/技术？

我的：typescript、next.js、react、graphql、solidity、node

他的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。

但是我确信我已经忘记了一大堆较少使用的属性，并且可能有一大堆我甚至不知道存在的属性。这篇文章是我学习的结果，我希望你会发现其中的一些对你有用，因为大部分初学者在接下来的几个月里正在构建 HTML 页面。

enterkeyhint虚拟键盘 的属性

iOS 13.7+，以及Chrome77+新支持了一个HTML属性enterkeyhint，可以修改软键盘中的enter键，也就是回车键的文案或者UI。

该HTML属性的兼容性如下图所示：

enterkeyhint接受七个可能值之一，这些值将确定用户在他的“输入”键上看到的内容：

只是强调一下，这个属性不接受自定义值；该值需要是上面显示的七个之一。无法识别的值将默认为输入键的设备默认文本。

<link>标签的title属性

这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。通常，此功能显示两个选项：“基本页面样式”和“无样式”，如下图所示。

这使您可以快速测试禁用样式时页面的外观，还允许您使用任何备用样式表查看页面。

备用样式表功能通过两个属性启用：title属性和rel=alternate应用于<link>元素，如下面的代码所示：

<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 的“页面样式”选项选择它们时，备用样式表才会应用。

<blockquote>标签定义及用法

<blockquote>标签定义块引用。

<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

现在我们来看看长文本的引用，还有和p标签的对比，效果如图：

自定义有序列表的属性<ol>

<ol>经常使用使用该元素的有序列表。一些鲜为人知的功能允许您自定义出现在此类列表中的编号行为：

• 属性，以相反的顺序对reversed项目进行编号（从高到低，而不是默认的从低到高）；
• 属性，定义从start哪个数字开始；
• 属性，定义是type使用数字、字母还是罗马数字；
• 属性，用于在value特定列表项上指定自定义编号。

如您所见，使用纯 HTML 的有序列表比您通常习惯的要灵活得多。

该reversed属性是一个有趣的属性，因为它实际上并没有反转列表本身的内容；它只会反转每个列表项旁边的数字。

<ol reversed>
    <li>List item...</li>
    <li>List item...</li>
    <li>List item...</li>
</ol>

上面，我还提到了其他三个属性。让我们将它们合并到列表中，看看如何使用它们：

<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和属性以及单个列表项上的属性。该属性接受表示编号类型的五个单字符值（、、、、 ）之一，效果如图：

<a>标签的download属性

<a href="/example.pdf" download>Download File</a>

如果没有值，该download属性会强制下载链接页面。或者，您可以提供一个值，浏览器将其用作下载资源的建议文件名。

<img>标签的decoding属性

在研究这个标签时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。

<img src="/images/example.png" alt="Example" decoding="async">

此属性类似于async在脚本上使用该属性。加载图像所需的时间不会改变，但其“解码”的方式（因此其内容在视口中变得可见）由decoding属性决定。

值为：

• sync 同步解码图像，一般浏览器都是这样做的。
• async 异步解码图像以避免延迟其他内容的呈现。
• auto 默认允许浏览器使用自己的内置解码方法。

<iframe>标签 的loading属性

您可能已经知道，图像元素现在可以包含一个loading属性，该属性将延迟加载作为一项功能放入浏览器，这是我们多年来使用 JavaScript 解决方案所做的事情。但不要忘记该loading属性也可以用于<iframe>元素：

<iframe src="/page.html" width="300" height="250" loading="lazy">

与图像一样，该loading属性接受eager（默认浏览器行为）或 的值lazy，这会延迟 iframe 内容的加载，直到 iframe 即将进入视口。此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像）。

删除/插入的citeAnddatetime属性

我在处理块引用时已经提到cite过，但是这个属性也可以用于用<del>and<ins>元素标记的删除和插入。此外，两个元素都可以包含一个datetime属性。

<del
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>

<ins          
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>

对于每个元素，这两个属性代表的内容如下：

• cite 指向资源的 URL，该资源解释了删除或插入内容的原因。
• datetime 删除或插入的日期。

HTML <optgroup> 标签

通过 <optgroup> 标签把相关的选项组合在一起：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

用于预加载响应式图像的imagesizes和imagesrcset属性

这是我在研究本文时的另一对新属性，它们在规范中也是相对较新的。

这两个属性都可以与元素一起定义rel=preload，as如下<link>所示：

<link rel="preload"
  as="image"
  imagesrcset="images/example-480.png 480w,
  images/example-800.png 800w,
    images/example.png 2000w"
  imagesizes="(max-width: 600px) 480px,
  (max-width: 1000px) 800px,
    1000px"
  src="images/example.png"
  alt="Example Image">

这里的使用rel=preload通知浏览器我们希望指定的资源优先加载，因此它们不会被脚本和样式表之类的东西阻塞。该as属性指定所请求内容的类型。

您可以使用href属性以及preload和预加载常规图像as。但最重要的是，您可以使用imagesrcsetandimagesizes属性，就像我在上面的代码中所做的那样。

这允许您预加载正确的图像，具体取决于视口的大小或您在imagesizes属性中指定的其他媒体功能。

除了我已经详细描述和演示的属性之外，您可能还想了解其他一些属性，我将在这里简要提及：

• crossorigin可以应用于多个元素的属性，包括<audio>、<img>、<link>、<script>和<video>，为跨域资源共享（CORS）提供支持；
• HTML属性；<dfn><abbr>
• HTML的新disablepictureinpicture属性；<video>
• HTML的integrity属性，帮助浏览器验证资源没有被不当操作；
• HTML的disabled属性<fieldset>，轻松同时禁用多个表单元素；
• 电子邮件和文件输入的multiple属性。

如果您使用过本文中提到的任何属性，或者如果您知道在您的项目中使用过的另一个 HTML 属性，请随时在评论中告诉我。