微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器，ChatGPT4 已上线 cube.waixingyun.cn/home
HTML是一种强大的语言，用于创建网页。虽然大多数开发人员熟悉常用的HTML属性，但还有一些较少人知的属性可以提供额外的功能并增强用户体验。在本文中，我们将探讨7个这样的HTML属性，你可能还不知道。
虚拟键盘的 enterkeyhint 属性
enterkeyhint 是HTML <input> 标签的一个新属性，这个属性会影响虚拟键盘的 enter 键的样式和行为，主要用于移动端和平板电脑等设备上，让用户清楚地知道 enter 键将执行何种动作。这个属性的典型值有 “enter”, “done”, “go”, “next”, “previous”, “search”, 和 “send” 等。
例如，如果你在一个搜索框中使用 enterkeyhint="search" 属性，当用户在移动设备上使用这个搜索框时，enter 键将会变为”搜索”，用户点击这个键就能提交搜索。
<form action="/search">
<input type="text" enterkeyhint="search" name="q">
<input type="submit" value="Search">
</form>
在这个例子中，输入框的 enterkeyhint 属性设置为 “search”，这样在移动设备的虚拟键盘上，enter 键的标签就会变为 “搜索”。
enterkeyhint 的可能取值及其含义如下：
- “enter”：默认行为，一般表示一个换行的操作。
- “done”：表示完成输入的操作，比如填写表单的最后一个字段后，虚拟键盘上的按钮可能会变为“完成”。
- “go”：表示要导航到一个新的页面或视图，或开始一个过程。
- “next”：表示用户将移动到下一个输入字段，适用于有多个输入字段的表单。
- “previous”：表示用户将移动到上一个输入字段，适用于有多个输入字段的表单。
- “search”：表示启动搜索操作，适用于搜索框。
- “send”：表示将发送消息或其他类型的文本，适用于聊天或邮件应用。
记住，这些键盘提示的具体表现可能会因设备或浏览器的不同而略有差异，因为每个系统或浏览器可能会以自己的方式实现这些提示。
2. 自定义有序列表的属性
在使用有序列表时，我们可以利用一些较少为人知的属性来自定义编号的行为。这些属性包括：
-
reversed 属性：它允许我们以相反的顺序对列表项进行编号，从高到低，而不是默认的从低到高。 -
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. img 的 decoding 属性
decoding 属性是 HTML img 标签的一个属性，用于控制图像解码的过程。这个属性有三个可能的取值：
sync：同步解码图像。这将会阻止页面的绘制，直到图像被完全解码。这种方式可能导致更长的首次绘制时间，但在图像完成解码后，用户将能够立即看到完整的图像，而不是渐进式的加载。async：异步解码图像。这将在图像下载后的空闲时间进行解码，以避免页面加载或滚动的延迟。用户可能会首先看到部分加载的图像。auto：默认值。浏览器自行决定使用同步解码还是异步解码。
这是一个具体的例子：
<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。
下面是一个具体的例子：
<iframe src="demo.html" loading="lazy"></iframe>
在这个例子中，iframe 会延迟加载，直到它进入或即将进入视窗。这可以帮助优化那些包含了很多 iframe 的页面的性能。
请注意，在Firefox浏览器中，目前不支持iframes上的 loading 属性，但在大多数现代浏览器中，该属性适用于图像。
5. 跨域资源共享（CORS）的 crossorigin 属性
在处理像 <img> 、 <audio> 、 <video> 、 <script> 和 <link> 这样的元素时，可能会遇到跨域资源共享（CORS）的需求。 crossorigin 属性允许我们指定资源在CORS方面的获取方式。
<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 属性被设置（无论值是什么），则该视频将不能进入 “画中画”模式。
<video src="video.mp4" controls disablePictureInPicture></video>
在这个例子中，video 标签有一个 disablePictureInPicture 属性，这意味着用户不能将这个视频切换到 “画中画”模式。
但是需要注意的是，并非所有的浏览器都支持 “画中画”模式，所以 disablePictureInPicture 属性在某些浏览器中可能无效。同时，即使浏览器支持 “画中画”模式，也有可能因为用户的个人设置或其他因素导致 “画中画”模式不能被启用。
7. script 中的 integrity 属性
integrity 是 HTML script 标签的一个属性，用于确保加载的脚本没有被篡改。这个属性的值是脚本内容的 cryptographic hash，通常采用 SRI (Subresource Integrity) hash。如果实际加载的脚本内容的 hash 值与 integrity 属性值不匹配，浏览器就不会执行这个脚本。
这是一个具体的例子：
<script src="https://example.com/example-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous"></script>
总结
在本文中，我们探讨了一系列鲜为人知的HTML属性，这些属性可以增强您的网页开发项目。从改善用户交互到优化资源加载，这些属性提供了有价值的功能，可能并不被广泛知晓或利用。
原文链接：https://juejin.cn/post/7260509905726308409 作者：王大冶
