基础-有用的HTML属性

属性知道吗？就是html属性，不常见但是很有用的那种。有没有遇到过，在使用小程序，让你输入身份证号或者电话号码时，键盘的样子和平常的不一样，有没有🤓🤓，嗯这就是html的某一个属性。

• inputmode

  在移动端，这个属性可是会影响弹出的键盘布局的。

   <!-- 默认值，普通任意文本 -->
    <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" />

有没有学到！！ 看下一个

• poster

  嘿嘿嘿，这个就有意思了，大家都看过一些视频😍，因为封面是精彩的内容，才点进去看的吧，可别说没有啊。这个属性，就是设置封面的！

    <video src="明日老师.mp4" poster="poster.png"></video>

• multiple

  这个大家都懂了吧，通常用于文件选择和下拉列表的。

  当用于与文件选择时：可选多个文件。 当用于下拉列表时，可选中多个选项。

 <input type="file" multiple/>
    <select multiple>
      <option>...</option>
      ...
    </select>

• accesskey

  emmm 这个是快捷键，怎么说呢，就是设置快捷键的，当按下快捷键后，就可以聚焦到元素。

 <!-- 按下 Alt + a 可聚焦元素 -->
 <input type="text" accesskey="a">

不过啊，不同的操作系统呢，快捷键也不一样，上面这个是 window 系统的。具体的差别，自己慢慢摸了。

• tabindex

  这个功能大家都用过，不过应该不是由这个属性设置的，就是一般在填写表单的时候，按下 tab 键就会聚焦到下一个文本框。一般下，聚焦顺序是和元素的顺序一致的，那不想一致的话，这个属性就派上用场了。

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

• translate

  这个会影响到浏览器的行为。使用 translate可以指定某个元素的内容是否应该触发翻译。

    <div translate="yes">i love you</div>