你不知道的宝藏 HTML 属性

简介:Louis Lazaris 在本文中介绍了一些不错的 HTML 属性,你可能没听说过,但是说不定你的项目正好需要哦~

今年一月,Madison Kanna 发推文跟粉丝互动 :

今年你们最想入门或者深入学习的语言/技术是什么呀?

我今年想学的是:typescript、next.js、react、graphql、solidity 和 node

— Madison Kanna (@Madisonkanna) 2022年1月3日

我的回答是:HTML。我不是在开玩笑,我知道标签的用法,也知道如何保持大部分的 HTML 语义化且可访问。

但是,因为长期不用,很多属性已处于遗忘边缘, 另外还有很多我压根儿就不知道的属性,所以我觉得很有必要学习 HTML 属性,这篇文章是我的学习成果,希望对大家搭建 HTML 页面有用。

虚拟键盘的 enterkeyhint 属性

enterkeyhint 属性是一个全局属性,可用于把 contenteditable 设置为 true 的表单控件和元素。这个属性对在移动设备上使用虚拟屏幕键盘的用户很有用。

<input type="text" enterkeyhint="done">

enterkeyhint 支持 7 个值,这些值决定用户的‘enter’键是什么:

  • enter
  • done
  • go
  • next
  • previous
  • search
  • send

这些“hint”对用户很重要。用户是否正打算进入下一步?是否正在提交信息?是否正在保存设置?我们可以根据用户的行为来为应用程序定制合适的 hint。

大家可以在移动设备上访问下面的 CodePen demo 进行测试。

1651219124(1)

在我的 iOS 设备上,enter 键的文本会随着 enter 键颜色的改变而改变,enter 键的颜色取决于值(参照下方截图),当然,不同设备上的显示会略有不同。

需要注意的是,这个属性不接受自定义值,如果使用上述 7 个值之外的值,该属性会默认使用设备上 enter 键的默认文本。

样式的 title 属性

我是头一次接触 title 属性,但我觉得它可能是本文最有趣的属性。我先补充一点背景知识,火狐浏览器上有一个选择页面显示样式的选项,用户可以从:"基本页面样式 "和 "无样式"中进行选择(下图是我的 windowns 系统电脑的页面显示) 。

55

我们可以点击查看无样式及有样式(有多种样式可供选择)的页面效果。

其实,我们是通过应用于 <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">

我的示例自动应用了“默认”样式,如果想使用其他样式,需要点击火狐浏览器的 “页面样式”选项并选择其他样式。大家可以用火狐浏览器或其他兼容的浏览器用下面的 CodePen 试一下:

66

下面的截图显示了火狐浏览器的样式选项:

我们可以在火狐浏览器中使用这个功能,但不能在基于 Chromium 的浏览器上使用这个功能。MDN 的文章说可以通过使用扩展在其他浏览器中添加这个功能,但目前我还没有找到这种扩展。

<blockquote><q> 元素的 cite 属性

我想大家一定经常使用 <blockquote> 元素。我们可以使用不带任何属性的 <blockquote> 元素,也可以使用带 cite 属性的 <blockquote> 元素。我引用了 MDN 文章中对在 <blockquote> 上使用 cite 属性的描述:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite">
      一个为引用信息标注来源的 URL。这个属性的主要功能是提供上下文或参考来源等信息。 
</blockquote>

上面是来自 MDN 的文章的块引用,该文介绍了 cite 的功能,我把该链接该文章的 URL 设置为 cite 值。

这个属性把引文和源文件封装在一个元素里,我们可以在多种环境下使用这个属性,不过大家注意参照 HTML 规范 中的详细解释:

有的用户代理允许用户查看引用链接,但是一般来说,引用链接有特定用途(例如,帮助服务器端脚本收集网站引用数据),读者不能使用引用链接。

<q> 元素上使用 cite 属性也是同样的理念,主要用于内联引用。

自定义有序列表的属性

大家通常用的是使用 <ol> 元素的有序列表,我们可以通过下列功能对列表进行自定义编号:

  • reversed 属性,对项目进行反序编号(从高到低,与默认的从低到高排序相反);
  • start 属性,决定从哪个数字开始;
  • type 属性,决定使用数字、字母还是罗马数字;
  • value 属性,在特定列表里指定一个自定义数字。

所以,原生 HTML 的有序列表其实非常灵活。

需要注意的是,reversed 属性并不会将列表的内容反序排列,只将编号反序排列。

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

下面的 CodePen demo 添加了 JavaScript,你可以用这个 demo 试着切换 reversed 属性。

77

注意:列表内容保持不变,只有编号发生了变化!你可以使用 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 这 5 个单字符值之一作为编号类型。大家可以用下面的互动 demo 进行测试:

88

使用单选按钮选择 5 个值之一作为 type 属性,然后点击 Toggle 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 结合起来,用来下载自己的创建内容,具体操作可以查看我的这篇文章,另外,你可以用下面的 demo 进行测试。

<img> 元素的 decoding 属性

我在写这篇文章前并不知道 decoding 属性,它在规范中也是一枚新星。我们在图像元素中添加 decoding 属性,它可以给浏览器发送图像解码提示。

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

这个属性类似于在脚本上使用 async 属性,如果在图片中添加 decoding 属性,图片的加载时间不会改变,但是图片的“解码”的方式(使图片显示在视口中)由 decoding 属性决定。

decoding 属性的值有:

sync

同步解码图像——浏览器的通常做法。

async

对图像进行异步解码,避免其他内容的延迟显示。

auto

默认使用浏览器内置的解码方法。

如果你想了解更多关于解码图像的理念,可以查看此规范

<iframe> 元素的 loading 属性

大家应该都知道,图像元素可以包含 loading 属性,用来给浏览器中添加延迟加载功能,我们多年来一直用 JavaScript 这样操作,但其实 loading 属性也可以用在 <iframe> 元素上。

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

与在图像中一样,loading 属性可以接受 eager(浏览器的默认行为)或 lazy 值,lazy 值将 iframe 的内容延迟到 iframe 即将进入视口时加载。这个属性的唯一槽点是,火狐浏览器支持在图像上使用 loading 属性,但不支持在 iframe 上使用这个属性。

表单字段的 form 属性

大多数情况下,我们会把表单输入和控件嵌套在 <form> 元素中,但如果应用或布局发生变化,我们就可以把表单输入放置在任何地方,只要把它与任一 <form> 元素相关联(不是父元素也可以)。

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

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

如上所述,表单外的电子邮件 <input>form 属性被设置为 myForm,与表单的 id 的值相同。我们可以使用这个属性和这个表单的 id 把表单控件(包括 submit 按钮) 与文档中的任一表单关联起来。

你可以用这个 demo 网页进行测试。该表单使用 GET 请求提交,所以我们可以在 URL 的查询字符串中看到提交的值。该页面的“评论”框在 <form> 元素的外面。

个人认为这个属性的唯一缺点是名字太平庸,其实可以给它一个独特的称谓,例如“formowner”。但是它确实很好用,如果大家的设计或布局需要一个无父级的表单字段,可以使用这个属性。

用于删除/插入的 citedatetime 属性

我在处理块引用时已经提到了 cite,但其实 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

删除或插入的日期。

我使用了一篇早期的文章中的示例,该文的主要内容是,想在火狐浏览器中使用 CSS 属性需要添加浏览器引擎前缀。如果浏览器引擎前缀被删除,我就可以 delete 旧文本,并使用 <del><ins> 元素 insert 新文本,然后使用 cite 属性引用 bug 已解决的报告。

<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> 都有 label 属性,label 属性通过标题给每个类别定义,但标题不能被选中。你也可以使用 <optgroup> 上的 disabled 属性来禁用 <select> 下拉框的所有选项。

用于预装响应式图像的 imagesizesimagesrcset 属性

我对这两个比较新的属性也完全不了解。

这两个属性和 <link> 元素上的 asrel=preload 功能类似,如下所示:

<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 预加载一般图片,也可以使用 imagesrcsetimagesizes 属性,正如我上面的代码。

我们可以根据 imagesizes 属性中指定的视口大小或其他媒体功能,预先加载正确的图像。

其他属性

除了上述属性外,下面的属性你可能也会感兴趣:

  • crossorigin 属性适用于多个元素,包括 <audio><img><link><script><video>,为跨域资源共享(CORS)提供支持。
  • <dfn><abbr>title 属性。
  • <video> 元素新增的 disablepictureinpicture 属性。
  • 脚本的 integrity 属性,可以协助浏览器进行安全验证,防止资源丢失或被恶意修改。
  • <fieldset> 元素的 disabled 属性,可以同时禁用多个表单元素。
  • 电子邮件和文件输入的 multiple 属性

如果你使用过本文提到的属性,或在个人项目中用到过好用的 HTML 功能,欢迎在评论中告诉我哟~~

原文作者:Louis Lazaris
Louis 是一位来自加拿大多伦多的前端开发人员兼作者,创建了 Web Tools Weekly 和 Tech Productivity ,还在 Impressive Webs 上发布前端代码类的文章。
原文链接:Those HTML Attributes You Never Use — Smashing Magazine

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
191
相关专栏
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。