[译] 你从来没用过的HTML标签

avatar
Mofei Zhu

原文地址: 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 属性

MDN 链接

enterkeyhint 属性是一个全局属性,可以应用于将contenteditable设置为true的表单控件或元素。此属性帮助使用虚拟屏幕键盘的移动设备上的用户更好的明确确认键的提示文本。 javascript <input type="text" enterkeyhint="done">

Enterkeyhint接受七种可能的值之一,这些值将决定用户在“enter”键上看到的内容:

  • enter 通常表示插入新行,中文状态下显示换行
  • done 通常意味着没有更多的输入,输入法编辑器(IME)将被关闭。中文状态下显示完成
  • go 通常指把用户带到他们输入的文本的目标位置。中文状态下显示前往
  • next 通常将用户带到下一个将接受文本的字段。中文状态下显示下一项
  • previous 通常将用户带到接受文本的前一个字段。中文状态下显示上一项
  • search 通常把用户带到他们输入的文本的搜索结果。中文状态下显示搜索
  • send 通常将文本发送给它的目标。中文状态下显示发送

您可以看到这些“提示”对用户是如何有用的: 用户是否完成了一系列操作?他们是否提交信息?它们是否在保存设置?根据它们在做什么,你可以定制提示来匹配你的应用程序的需要。

你可以在移动设备上访问下面的Demo来尝试这个方法。

查看原始 CodePen by Mofei

在我的iOS设备上,输入键的文本会随着键的颜色而改变,这取决于值,如下面的截图所示。这取决于用户的设备。

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

next go

👨‍🎨 样式表的 title 属性

MDN 链接

当我为这篇文章做研究时,这对我来说是全新的,可能是这个列表中最有趣的一个。作为一点背景知识,如果您不知道,Firefox有一个选项,让您选择查看页面时想要使用的样式表。通常,这个功能会显示两个选项:“基本页面样式”和“无样式”,如下图在我的Windows电脑上所示。

img

这使您能够快速测试禁用样式时页面的外观,并且还允许您使用任何备用样式表查看页面。

备用样式表特性通过两个属性启用:应用于<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中的样式表选项:

img

正如前面提到的,这个功能在Firefox中可以使用,但我无法让它在任何基于chrome的浏览器中运行。MDN关于备用样式表的文章说,它可以在其他浏览器中使用扩展来启用,但我找不到一个可用的扩展可以做到这一点。

👨‍🎨 <blockquote><q> 元素的 cite 属性

MDN 链接

我敢肯定你经常使用 <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>

注意,已添加的 typestart 属性以及单个列表项上的 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 属性

在大多数情况下,您将把表单输入和控件嵌套在

元素中。但如果你的应用程序或布局需要一些不同的东西,你可以选择把一个表单输入放在任何你想要的地方,并将它与任何元素关联-即使不是元素的父元素。

<form id="myForm" action="/form.php">
  <input id="name">
  <button type="submit">
</form>

<input type="email" form="myForm">

正如您在上面看到的,表单外部的 email <input>form 属性设置为myForm,该属性设置为与表单id相同的值。通过使用这个属性和表单的id,可以将表单控件(包括提交按钮)与文档中的任何表单关联起来。

您可以使用这个演示页面进行尝试。表单使用GET请求提交,因此您可以在URL的查询字符串中看到提交的值。在该页面上,“comments”框位于元素之外。

我对这个属性唯一的不满是,它可能应该被赋予一个更独特的名称,比如“formowner”。尽管如此,如果您的设计或布局需要父级表单字段,它是一个值得记住的有用的字段。

👨‍🎨 <del><ins>citedatetime 属性

我已经在处理 blockquotes 时提到过 cite,但是这个属性也可以用于标记为 <del><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:删除或插入的日期。

在我的例子中,我使用了一些文本示例,描述了一个需要在Firefox中使用供应商前缀的CSS属性。这可能是一篇旧博客文章。一旦前缀被删除,我可以使用 <del><ins> 元素去delete 旧的文本和 insert 新文本。然后,我可以使用 cite 属性引用问题被解决的错误报告。

👨‍🎨 <optgroup> 元素的label 属性

最后,这最后一个是经典的属性,但因为它不经常被使用,也许你甚至不知道它的存在。这是一个元素和一个属性的组合。

如果你在 <select> 下拉菜单的选项中包含了一个很长的项目列表,你可以使用 <optgroup> 元素及其相关的 label 属性将选项分组到可见的类别中:

<select>
  <option>--Your Favourite Animal--</option>
  <optgroup label="Birds">
    <option>Blue Jay</option>
    <option>Cardinal</option>
    <option>Hummingbird</option>
  </optgroup>
  <optgroup label="Sea Creatures">
    <option>Shark</option>
    <option>Clownfish</option>
    <option>Whale</option>
  </optgroup>
  <optgroup label="Mammals">
    <option>Lion</option>
    <option>Squirrel</option>
    <option>Quokka</option>
  </optgroup>
</select>

你可以使用下面的CodePen来尝试一个例子:

注意,每个 <optgroup> 都有一个标签属性,该属性为每个组定义了一个标题—但是不能选择标题。作为额外的技巧,您还可以使用 <optgroup> 上的 disabled 属性来禁用 <select> 下拉菜单中该部分中的所有选项。

👨‍🎨 预加载响应图像的imagessize和imagesrcset属性

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

这两个属性都可以与 rel=preload<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 属性和 preloadas 来预加载常规图像。但在此之上,你可以使用 imagesrcsetimagesize 属性,就像我在上面的代码中做的那样。

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

👨‍🎨 额外奖励

除了我已经详细描述和演示的属性之外,还有一些你可能想要了解的属性,我将在这里简要介绍一下:

  • crosssororigin 属性,可以应用于多个元素,包括 <audio><img><link><script>,和 <video> 提供跨源资源共享(CORS)的支持
  • <dfn><abbr>title 属性
  • <video> 元素添加新的 disablepictureinpicture 属性
  • scripts 的 integrity 属性,它帮助浏览器验证资源没有被不当操作
  • <fieldset> 元素的 disabled 属性,可以轻松地同时禁用多个表单元素
  • 属性为 emailfile<input>multiple 属性。

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