首页 > web前端 > js教程 > 正文

esser-已知的 HTML 属性可增强用户体验

王林
发布: 2024-09-11 14:37:57
转载
323人浏览过

esser-已知的 html 属性可增强用户体验

html 是一种用于创建网页的强大语言,虽然大多数开发人员都熟悉常用的 html 属性,但还有一些鲜为人知的属性可以提供附加功能并增强用户体验。

1. 虚拟键盘的enterkeyhint属性

在为移动设备设计 web 表单时,考虑用户与之交互的虚拟键盘非常重要。 enterkeyhint 属性是一个全局属性,可应用于将 contenteditable 属性设置为 true 的表单控件或元素。它通过向虚拟键盘提供有关与“enter”键相关的预期操作的提示来帮助用户。此属性接受诸如 enter、done、go、next、previous、search 和 send 等值,允许您根据应用程序的特定上下文自定义提示。

<input type="text" enterkeyhint="done">
登录后复制

2. 自定义有序列表的属性

在使用有序列表

    时,您可以利用几个鲜为人知的属性来自定义编号的行为。这些属性包括:
  • 反转属性:它允许您以相反的顺序对列表项进行编号,从高到低,而不是默认的从低到高。

  • 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>
登录后复制

3. esser-已知的 HTML 属性可增强用户体验 元素的解码属性

解码属性允许您向浏览器提供有关如何解码图像的提示。该属性可以添加到 esser-已知的 HTML 属性可增强用户体验 元素并接受三个值:sync、async 和 auto。

  • sync:同步解码​​图像,这是默认行为。

  • async:异步解码图像,以避免延迟其他内容的呈现。

  • auto:让浏览器使用默认的解码方式。

@@##@@
登录后复制
登录后复制

通过指定适当的解码行为,您可以优化网页上图像的加载和渲染。

4.

延迟加载图像类似,loading 属性可以应用于

<iframe src="/page.html" width="300" height="250" loading="lazy"></iframe>
登录后复制

5.跨域资源共享(cors)的crossorigin属性

在使用 example

@@##@@
登录后复制
登录后复制

该属性接受两个值:匿名和使用凭证。将其设置为匿名表示应在不包含用户凭据的情况下获取资源,而 use-credentials 表示应包含用户凭据。

6.

disablepictureinpicture 属性可以应用于

<video src="example.mp4" disablepictureinpicture controls></video>
登录后复制

7. 脚本的完整性属性

为了确保外部脚本不被篡改,您可以使用完整性属性。此属性允许您提供一个加密哈希值,浏览器可以使用该值在执行脚本文件之前验证脚本文件的完整性。

<script src="script.js" integrity="sha256-Kx70Z9jzvYF0Eex8oO7w08=" crossorigin="anonymous"></script>
登录后复制

通过包含具有适当哈希值的完整性属性,您可以添加额外的安全层以确保脚本的真实性。

结论

在本文中,我们探索了一系列鲜为人知的 html 属性,它们可以增强您的 web 开发项目。从改善用户交互到优化资源加载,这些属性提供了可能未被广泛了解或利用的有价值的功能。

如果您觉得这有帮助,请考虑订阅_以获取更多有关 web 开发的有用文章和工具。感谢您的阅读!

esser-已知的 HTML 属性可增强用户体验example image

以上就是esser-已知的 HTML 属性可增强用户体验的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号