前端开发必读！7个HTML属性助你提升用户体验

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home

HTML是一种强大的语言，用于创建网页。虽然大多数开发人员熟悉常用的HTML属性，但还有一些较少人知的属性可以提供额外的功能并增强用户体验。在本文中，我们将探讨7个这样的HTML属性，你可能还不知道。

虚拟键盘的 enterkeyhint 属性

enterkeyhint 是HTML 标签的一个新属性，这个属性会影响虚拟键盘的 enter 键的样式和行为，主要用于移动端和平板电脑等设备上，让用户清楚地知道 enter 键将执行何种动作。这个属性的典型值有 "enter", "done", "go", "next", "previous", "search", 和 "send" 等。

例如，如果你在一个搜索框中使用 enterkeyhint="search" 属性，当用户在移动设备上使用这个搜索框时，enter 键将会变为"搜索"，用户点击这个键就能提交搜索。

在这个例子中，输入框的 enterkeyhint 属性设置为 "search"，这样在移动设备的虚拟键盘上，enter 键的标签就会变为 "搜索"。

enterkeyhint 的可能取值及其含义如下：

"enter"：默认行为，一般表示一个换行的操作。
"done"：表示完成输入的操作，比如填写表单的最后一个字段后，虚拟键盘上的按钮可能会变为“完成”。
"go"：表示要导航到一个新的页面或视图，或开始一个过程。
"next"：表示用户将移动到下一个输入字段，适用于有多个输入字段的表单。
"previous"：表示用户将移动到上一个输入字段，适用于有多个输入字段的表单。
"search"：表示启动搜索操作，适用于搜索框。
"send"：表示将发送消息或其他类型的文本，适用于聊天或邮件应用。

记住，这些键盘提示的具体表现可能会因设备或浏览器的不同而略有差异，因为每个系统或浏览器可能会以自己的方式实现这些提示。

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

在使用有序列表时，我们可以利用一些较少为人知的属性来自定义编号的行为。这些属性包括：

reversed 属性：它允许我们以相反的顺序对列表项进行编号，从高到低，而不是默认的从低到高。
start 属性：它定义了列表应该从哪个数字开始。
type 属性：它指定列表项使用数字、字母还是罗马数字。
value 属性：它允许你为特定的列表项设置自定义编号。


  List item...
  List item...
  List item...



  Typee: A Peep at Polynesian Life (1846)
  Omoo: A Narrative of Adventures in the South Seas (1847)
  Mardi: and aVoyage Thither (1849)
  Redburn: His First Voyage (1849)
  White-Jacket; or, The World in a Man-of-War (1850)
  Moby-Dick; or, The Whale (1851)
  Pierre; or, The Ambiguities (1852)
  Isle of the Cross (1853 unpublished, and now lost)

3. img 的 decoding 属性

decoding 属性是 HTML img 标签的一个属性，用于控制图像解码的过程。这个属性有三个可能的取值：

sync：同步解码图像。这将会阻止页面的绘制，直到图像被完全解码。这种方式可能导致更长的首次绘制时间，但在图像完成解码后，用户将能够立即看到完整的图像，而不是渐进式的加载。
async：异步解码图像。这将在图像下载后的空闲时间进行解码，以避免页面加载或滚动的延迟。用户可能会首先看到部分加载的图像。
auto：默认值。浏览器自行决定使用同步解码还是异步解码。

这是一个具体的例子：

在这个例子中，图像将在空闲时间异步解码，以避免阻塞页面的其他渲染过程。请注意，decoding 属性并非所有的浏览器都支持。

4.iframe 的 loading 属性

loading 是 HTML iframe 标签的一个属性，主要用于优化页面加载性能。它告诉浏览器何时开始加载 iframe 内容，可以有以下三个值：

eager：默认值。立即加载 iframe。即使 iframe 不在当前屏幕视窗（viewport）内，也会立即开始加载。
lazy：只有当 iframe 进入或即将进入视窗时，才开始加载 iframe。这可以显著提高页面加载速度，尤其是对于包含多个 iframe 的页面。
auto：让浏览器决定何时加载 iframe。

下面是一个具体的例子：

在这个例子中，iframe 会延迟加载，直到它进入或即将进入视窗。这可以帮助优化那些包含了很多 iframe 的页面的性能。

请注意，在Firefox浏览器中，目前不支持iframes上的 loading 属性，但在大多数现代浏览器中，该属性适用于图像。

5. 跨域资源共享（CORS）的 crossorigin 属性

在处理像、、、

总结

在本文中，我们探讨了一系列鲜为人知的HTML属性，这些属性可以增强您的网页开发项目。从改善用户交互到优化资源加载，这些属性提供了有价值的功能，可能并不被广泛知晓或利用。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。