Skip to content

鲜为人知的 HTML 属性

Published:

inputmode

在移动端,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="video.mp4" poster="thumbnail.png" />

Multiple

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

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

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

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

Accesskey

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

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

Tabindex

用户可以使用 tab 键盘切换聚焦的元素,默认情况下,切换的顺序和元素顺序一致,如果希望不一致,可以通过 tabindex 属性进行手动干预。

<!-- 一个倒序切换的表单 -->
<input type="text" tabindex="3" />
<input type="text" tabindex="2" />
<input type="text" tabindex="1" />

Download

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

<a href="thumbnail.jpg" donwload="thumbnail.jpg">Download thumnbail</a>

Dir

该属性可以用于设置内部文字的排版方向。

<p dir="rtl">从左到右排版</p>
<p dir="ltr">从右到左排版</p>