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

最新推荐文章于 2023-09-19 00:15:00 发布

Cipher_Y

最新推荐文章于 2023-09-19 00:15:00 发布

阅读量240

点赞数 1

文章标签： html ux 前端

本文链接：https://blog.csdn.net/Cipher_Y/article/details/131980087

版权

虚拟键盘的 enterkeyhint 属性

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

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

ini复制代码<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 属性：它允许你为特定的列表项设置自定义编号。

less复制代码<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：默认值。浏览器自行决定使用同步解码还是异步解码。

这是一个具体的例子：

ini复制代码<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。

下面是一个具体的例子：

ini复制代码<iframe src="demo.html" loading="lazy"></iframe>

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

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

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

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

ini复制代码<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 属性被设置（无论值是什么），则该视频将不能进入 "画中画"模式。

css复制代码<video src="video.mp4" controls disablePictureInPicture></video>

在这个例子中，video 标签有一个 disablePictureInPicture 属性，这意味着用户不能将这个视频切换到 "画中画"模式。

但是需要注意的是，并非所有的浏览器都支持 "画中画"模式，所以 disablePictureInPicture 属性在某些浏览器中可能无效。同时，即使浏览器支持 "画中画"模式，也有可能因为用户的个人设置或其他因素导致 "画中画"模式不能被启用。

7. script 中的 integrity 属性

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

这是一个具体的例子：

ini复制代码<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>