【学习笔记】不常见的HTML属性

1.inputmode

在移动端，inputmode 值会影响弹出的键盘布局

<!-- 无键盘 -->
<input type="text" inputmode="none">
<!--  默认值，文本 -->
<input type="text" inputmode="text">
<!-- 电话号码 -->
<input type="text" inputmode="tel">
<!-- url地址 -->
<input type="text" inputmode="url">
<!-- 邮箱 -->
<input type="text" inputmode="email">
<!-- 数字 -->
<input type="text" inputmode="numeric">
<!-- 小数 -->
<input type="text" inputmode="decimal">
<!-- 收索 -->
<input type="text" inputmode="search">

2.poster

用于设置视频的预览图（视频封面）

<video src='v.mp4' poster='cover.png'></video>

3.multiple

通常用于文件选择和下拉列表

当用于文件选择时：可选择多个文件

当用于下拉列表时：可选中多个选项

<template>
  <div>
    <input type="file" multiple />
    <select multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</template>

4.accesskey

可以为元素设置快捷键，当按下快捷键后，可以聚焦元素

<!-- 按下键盘Alt + b 可以聚焦元素 -->
<input type="text" accesskey="b">

在不同的操作系统会有不同的访问快捷键方式（以下是来自 [mdn](accesskey - HTML（超文本标记语言） | MDN (mozilla.org)) 的截图）

5.tabindex

使用tab键切换聚焦的元素，默认情况下，切换的顺序和元素顺序一致，通过 tabindex 属性可以进行手动干预

    <input type="text" tabindex="1">
    <input type="text" tabindex="3">
    <input type="text" tabindex="2">

6.download

通常用于超链接中，使用该属性后，打开链接会触发浏览器的下载行为，而不是显示链接内容。

<a href="ceshi.png" download>下载图片</a>
<!-- 还可以更改下载时的默认文件名 -->
<a href="ceshi.png" download="xiugai.png">下载图片并更改图片的名字</a>

7.dir

设置内部文字的排版方向

<p dir="ltr">从左到右排版!</p>
<p dir="rtl">从右到左排版!</p>
<p dir="auto">自动检测排版!</p>

8.spellcheck

该属性可以启用拼写检查，通常用于富文本编辑

<div contenteditable spellcheck="true">how ar you</div>

9.translate

指定某个元素的内容是否应该触发翻译，具体如何翻译取决于浏览器的设置

<!-- 开启翻译 -->
<div translate="yes">how are you</div>
<!-- 关闭翻译 -->
<div translate="no">how are you</div>