简介: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 进行测试。
在我的 iOS 设备上,enter 键的文本会随着 enter 键颜色的改变而改变,enter 键的颜色取决于值(参照下方截图),当然,不同设备上的显示会略有不同。
需要注意的是,这个属性不接受自定义值,如果使用上述 7 个值之外的值,该属性会默认使用设备上 enter 键的默认文本。
样式的 <video>
属性
我是头一次接触 title
属性,但我觉得它可能是本文最有趣的属性。我先补充一点背景知识,火狐浏览器上有一个选择页面显示样式的选项,用户可以从:"基本页面样式 "和 "无样式"中进行选择(下图是我的 windowns 系统电脑的页面显示) 。
我们可以点击查看无样式及有样式(有多种样式可供选择)的页面效果。
其实,我们是通过应用于 <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 试一下:
下面的截图显示了火狐浏览器的样式选项:
我们可以在火狐浏览器中使用这个功能,但不能在基于 Chromium 的浏览器上使用这个功能。MDN 的文章说可以通过使用扩展在其他浏览器中添加这个功能,但目前我还没有找到这种扩展。
<blockquote>
和 <q>
元素的 <del>
属性
我想大家一定经常使用 <blockquote>
元素。我们可以使用不带任何属性的 <blockquote>
元素,也可以使用带 <optgroup>
属性的 <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
属性。
注意:列表内容保持不变,只有编号发生了变化!你可以使用 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 进行测试:
使用单选按钮选择 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 进行测试。
<iframe id="cp_embed_abEOQyQ" src="https://codepen.io/smashingmag/embed/preview/abEOQyQ?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=abEOQyQ" title="The download Attribute Combined with a Data URI + JavaScript to Let the User Download Custom HTML" scrolling="no" frameborder="0" height="260" class="cp_embed_iframe" width="695" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>
<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”。但是它确实很好用,如果大家的设计或布局需要一个无父级的表单字段,可以使用这个属性。
用于删除/插入的 cite
和 datetime
属性
我在处理块引用时已经提到了 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>
property, so you can only use it prefixed.</del> <ins cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467" datetime="2020-07-23" >Thecite
property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>
下列两个属性对于元素的意义:
• cite
一个源文件 URL,解释内容被删除或插入的原因。
• datetime
删除或插入的日期。
我使用了一篇早期的文章中的示例,该文的主要内容是,想在火狐浏览器中使用 CSS 属性需要添加浏览器引擎前缀。如果浏览器引擎前缀被删除,我就可以 delete
旧文本,并使用 <ins>
和 cite
元素 insert
新文本,然后使用 cite
属性引用 bug 已解决的报告。
<select>
元素的 <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>
属性
最后这个属性虽是一个元老级属性,但是因为不常用,很多人甚至不知道它的存在。这个属性是一个元素和一个属性的组合。
如果你的 <optgroup>
下拉选项里有一长串项目,可以使用 <optgroup>
元素及其关联的 label
属性将选项分组,然后归属至不同类别。
<optgroup>
可以使用下面的 CodePen 来试一下:
<iframe id="cp_embed_xxpGQjB" src="https://codepen.io/smashingmag/embed/preview/xxpGQjB?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=xxpGQjB" title="Using the label Attribute with optgroup Elements" scrolling="no" frameborder="0" height="260" class="cp_embed_iframe" width="695" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>
注意:每个 label
都有 label
属性,label
属性通过标题给每个类别定义,但标题不能被选中。你也可以使用 <select>
上的 undefined 属性来禁用 <link>
下拉框的所有选项。
用于预装响应式图像的 <audio>
和 imagesizes
属性
我对这两个比较新的属性也完全不了解。
这两个属性和 <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">
元素上的 imagesrcset
和 as
功能类似,如下所示:
rel=preload
我们使用 rel=preload
通知浏览器优先加载指定的资源,避免他们被脚本和样式表等延迟。as
属性会指定请求内容的类型。
大家可以使用 href
属性以及 preload
和 as
预加载一般图片,也可以使用 imagesrcset
和 imagesizes
属性,正如我上面的代码。
我们可以根据 imagesizes
属性中指定的视口大小或其他媒体功能,预先加载正确的图像。
其他属性
除了上述属性外,下面的属性你可能也会感兴趣:
-
crossorigin
属性适用于多个元素,包括<img>
、<link>
、<script>
、<video>
和<dfn>
,为跨域资源共享(CORS)提供支持。 -
<abbr>
和title
的title
属性。 -
<fieldset>
元素新增的disablepictureinpicture
属性。 - 脚本的
integrity
属性,可以协助浏览器进行安全验证,防止资源丢失或被恶意修改。 -
disabled
元素的disabled
属性,可以同时禁用多个表单元素。 - 电子邮件和文件输入的
multiple
属性
如果你使用过本文提到的属性,或在个人项目中用到过好用的 HTML 功能,欢迎在评论中告诉我哟~~
原文作者:Louis Lazaris
Louis 是一位来自加拿大多伦多的前端开发人员兼作者,创建了 Web Tools Weekly 和 Tech Productivity ,还在 Impressive Webs 上发布前端代码类的文章。
原文链接:Those HTML Attributes You Never Use — Smashing Magazine