HTML 是一种用于创建网页的强大语言,虽然大多数开发人员都熟悉常用的 HTML 属性,但还有一些鲜为人知的属性可以提供附加功能并增强用户体验经验。
在为移动设备设计 Web 表单时,考虑用户与之交互的虚拟键盘非常重要。 Enterkeyhint 属性是一个全局属性,可应用于将 contenteditable 属性设置为 true 的表单控件或元素。它通过向虚拟键盘提供有关与“Enter”键相关的预期操作的提示来帮助用户。此属性接受诸如 Enter、done、go、next、previous、search 和 send 等值,允许您根据应用程序的特定上下文自定义提示。
<input type="text" enterkeyhint="done">
在使用有序列表
反转属性:它允许您以相反的顺序对列表项进行编号,从高到低,而不是默认的从低到高。
start 属性:它定义列表应从哪个数字开始。
type 属性:指定列表项是使用数字、字母还是罗马数字。
value 属性:它使您能够为特定列表项设置自定义数字。
<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 aVoyage 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>
解码属性允许您向浏览器提供有关如何解码图像的提示。该属性可以添加到 中。元素并接受三个值:sync、async 和 auto。
sync:同步解码图像,这是默认行为。
async:异步解码图像,以避免延迟其他内容的呈现。
auto:让浏览器使用默认的解码方式。
<img src="/images/example.png" alt="esser-已知的 HTML 属性可增强用户体验" decoding="async">
通过指定适当的解码行为,您可以优化网页上图像的加载和渲染。
与延迟加载图片类似,loading属性可以应用于
<iframe src="/page.html" width="300" height="250" loading="lazy"></iframe>
使用 、
<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="esser-已知的 HTML 属性可增强用户体验 Image">
该属性接受两个值:匿名和使用凭证。将其设置为匿名表示应在不包含用户凭据的情况下获取资源,而 use-credentials 表示应包含用户凭据。
disablepictureinpicture 属性可以应用于
<video src="example.mp4" disablepictureinpicture controls></video>
为了确保外部脚本不被篡改,您可以使用完整性属性。此属性允许您提供一个加密哈希值,浏览器可以使用该值在执行脚本文件之前验证脚本文件的完整性。
<script src="script.js" integrity="sha256-Kx70Z9jzvYF0Eex8oO7w08=" crossorigin="anonymous"></script>
通过包含具有适当哈希值的完整性属性,您可以添加额外的安全层以确保脚本的真实性。
在本文中,我们探索了一系列鲜为人知的 HTML 属性,它们可以增强您的 Web 开发项目。从改善用户交互到优化资源加载,这些属性提供了可能未被广泛了解或利用的有价值的功能。
如果您觉得这有帮助,请考虑订阅_以获取更多有关 Web 开发的有用文章和工具。感谢您的阅读!
以上是esser-已知的 HTML 属性可增强用户体验的详细内容。更多信息请关注PHP中文网其他相关文章!