你可能没有用过的HTML属性

HTML作为前端三大基础之一，应该没有前端工程师没用过吧。HTML的属性有很多，全部记住也不现实，主要是没必要。但是常见的一些属性还是要时刻记得的，本文就来总结一些可能不常见还是有点意思的HTML属性。

enterKeyHint

enterKeyHint是虚拟键盘上回车键呈现的操作标签，这是一个枚举属性，目前只能使用内置的一些值，如果传入其他值或者不是内置的值，将会识别为空字符串，键盘中的回车键将会是默认的文本：

• enter
• done
• go
• next
• previous
• search
• send

enterKeyHint只能用于可编辑元素上，例如输入框以及contenteditable为true的元素。

<input type="text" enterkeyhint="next">
<div contenteditable></div>

运行效果：

• 如果是PC端，使用键盘的话将没有什么效果
• 如果是移动端，使用的是虚拟屏幕键盘，那么可以看到键盘的回车键的文本内容将变成我们设置的。

enterkeyhint兼容性

reversed

我们经常使用ol来表示有序的列表，特别是需要显示出编号的情况。ol的编号默认是由低到高，也就是顺序排序，如果我们要想实现编号由高到低排序，则可使用reversed属性

<ol reversed>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

实现效果：

如果不使用reversed属性，也可以通过列表的index来计算得到，但是显然这种方式比较麻烦。细心的朋友可能还发现了，虽然列表的编号倒序排序了，但是其内容本身并没有发生变化。

兼容性：

既然说到了ol的reversed属性，那就再来看看其他有意思的属性：

• start：整数值编号，表示列表的起始值，注意只能为数字。虽然可以指定type为字母、罗马数字等，但是start只能是数字

• type：设置编号的类型，默认是数字。可选值范围有：

  • 1：表示数字
  • i：表示小写罗马数字
  • I：表示大写罗马数字
  • a：表示小写英文字母
  • A：表示大写英文字母

举个例子：

 <ol reversed start="10" type="1">
     <li>第一项</li>
     <li>第二项</li>
     <li value="20">第三项</li>
     <li>第四项</li>
 </ol>

运行结果：

在这里，我们还额外使用到了value属性，可以用来在特定列表项上指定自定义编号。

disablepictureinpicture

什么是画中画？画中画简单点来说就是视频可以脱离页面播放。实现画中画可以操作video，也可以使用canvas，还可以是新增的requestPictureInPicture()方法，本次提到的disablepictureinpicture是HTML的一个新属性，主要用于video标签，可禁止画中画。

<video src="" disablepictureinpicture>

兼容性：

download

在实际开发中，遇到需要处理文件下载时，我们经常会采用a标签的方式。但是遇到文本、JSON等内容时，浏览器默认会直接显示而不是下载。如果我们想点击a链接的时候下载文件，那么可以指定download属性，表示下载文件的名称。

如果该名称不是有效的文件名，浏览器会对其进行调整。注意该属性对IE不兼容。

<a href="" download="file" >文件下载</a>

总结

本文简单总结了几个有意思的HTML属性，说不定以后在项目中还能用到。