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

1、虚拟键盘的 enterkeyhint 属性

enterkeyhint 是HTML <input> 标签的一个新属性，这个属性会影响虚拟键盘的 enter 键的样式和行为，主要用于移动端和平板电脑等设备上，让用户清楚地知道 enter 键将执行何种动作。这个属性的典型值有 “enter”, “done”, “go”, “next”, “previous”, “search”, 和 “send” 等。
例如，如果在一个搜索框中使用 enterkeyhint="search" 属性，当用户在移动设备上使用这个搜索框时，enter 键将会变为”搜索”，用户点击这个键就能提交搜索。

  1. <form action="/search">
  2.   <input type="text" enterkeyhint="search" name="q">
  3.   <input type="submit" value="Search">
  4. </form>

在这个例子中，输入框的 enterkeyhint 属性设置为 “search”，这样在移动设备的虚拟键盘上，enter 键的标签就会变为 “搜索”。
enterkeyhint 的可能取值及其含义如下：

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

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

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

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

  • reversed 属性：它允许开发者以相反的顺序对列表项进行编号，从高到低，而不是默认的从低到高。
  • start 属性：它定义了列表应该从哪个数字开始。
  • type 属性：它指定列表项使用数字、字母还是罗马数字。
  • value 属性：它允许为特定的列表项设置自定义编号。 ```html
    1. List item…
    2. List item…
    3. List item…

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

  1. <a name="c019N"></a>
  2. ## 3、img 的  decoding 属性
  3. decoding 属性是 HTML img 标签的一个属性，用于控制图像解码的过程。这个属性有三个可能的取值：
  5. - `sync`：同步解码图像。这将会阻止页面的绘制，直到图像被完全解码。这种方式可能导致更长的首次绘制时间，但在图像完成解码后，用户将能够立即看到完整的图像，而不是渐进式的加载。
  6. - `async`：异步解码图像。这将在图像下载后的空闲时间进行解码，以避免页面加载或滚动的延迟。用户可能会首先看到部分加载的图像。
  7. - `auto`：默认值。浏览器自行决定使用同步解码还是异步解码。
  9. 这是一个具体的例子：
  10. ```html
  11. <img src="image.jpg" decoding="async" alt="example image">

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

4、iframe 的 loading 属性

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

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

下面是一个具体的例子：

  1. <iframe src="demo.html" loading="lazy"></iframe>

在这个例子中，iframe 会延迟加载，直到它进入或即将进入视窗。这可以帮助优化那些包含了很多 iframe 的页面的性能。
请注意，在Firefox浏览器中，目前不支持iframes上的 loading 属性，但在大多数现代浏览器中，该属性适用于图像。

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

在处理像 <img> 、 <audio> 、 <video> 、 <script> 和 <link> 这样的元素时，可能会遇到跨域资源共享（CORS）的需求。 crossorigin 属性允许指定资源在CORS方面的获取方式。

  1. <img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Example Image">

该属性接受两个值： anonymous 和 use-credentials 。将其设置为 anonymous 表示应该在获取资源时不包括用户凭据，而 use-credentials 表示应该包括用户凭据。

6、video 的 disablepictureinpicture 属性

disablePictureInPicture 是 HTML video 标签的一个属性，用于控制是否禁止 “画中画”（Picture-in-Picture）模式。
画中画”模式是一种特殊的播放模式，允许用户在浏览其他网页或应用时继续观看视频。在这种模式下，视频会在一个小窗口中播放，这个小窗口可以浮动在屏幕的任何位置。
如果 disablePictureInPicture 属性被设置（无论值是什么），则该视频将不能进入 “画中画”模式。

  1. <video src="video.mp4" controls disablePictureInPicture></video>

在这个例子中，video 标签有一个 disablePictureInPicture 属性，这意味着用户不能将这个视频切换到 “画中画”模式。
但是需要注意的是，并非所有的浏览器都支持 “画中画”模式，所以 disablePictureInPicture 属性在某些浏览器中可能无效。同时，即使浏览器支持 “画中画”模式，也有可能因为用户的个人设置或其他因素导致 “画中画”模式不能被启用。

7、script 中的 integrity 属性

integrity 是 HTML script 标签的一个属性，用于确保加载的脚本没有被篡改。这个属性的值是脚本内容的 cryptographic hash，通常采用 SRI (Subresource Integrity) hash。如果实际加载的脚本内容的 hash 值与 integrity 属性值不匹配，浏览器就不会执行这个脚本。
这是一个具体的例子：

  1. <script src="https://example.com/example-framework.js"
  2.   integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  3.   crossorigin="anonymous"></script>

总结

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