你不知道的HTML属性，让你的网页更加响应式

前言

当我们谈论 HTML 时，通常会想到一些常见的属性，如 class、id、href 等等。但是，HTML 还有许多你可能从未听说过的属性，这些属性可以让你的网页更加丰富多彩。在本文中，我将介绍一些你可能不知道的 HTML 属性，让你的网页更加出色。

---

1. inputmode 属性

在移动端中，inputmode 值会影响弹出的键盘布局。它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。

1.1 inputmode="none" 无键盘

不使用虚拟键盘，这个时候页面需要使用自定义的键盘代替。在应用程序或者站点需要实现自己的键盘输入控件时很有用。

<input type="text" inputmode="none">

---

1.2 inputmode="text" 默认值，文本

使用用户本地区域设置的标准文本输入键盘。

<input type="text" inputmode="text">

---

1.3 inputmode="tel" 电话

电话输入键盘，包含 0 到 9 的数字、星号和井号键。多用于输入电话号码。

<input type="text" inputmode="tel">

---

1.4 inputmode="url" 地址

键盘必须显示 / 符号键，也会更加明显，更有助于用户输入 URL 地址。

<input type="text" inputmode="url">

---

1.5 inputmode="email" 邮箱

键盘必须显示 @ 符号键，更方便用户输入电子邮件。

<input type="text" inputmode="email">

---

1.6 inputmode="numeric" 数字

显示数字键盘，展示的就是 0 到 9 的数字，根据设备不同也可能显示减号键。

<input type="text" inputmode="numeric">

---

1.7 inputmode="decimal" 小数

小数输入键盘，包含数字和分隔符（通常是小数点或者千分符逗号），根据设备不同也可能显示减号键。

<input type="text" inputmode="decimal">

---

1.8 inputmode="search" 搜素

为搜索输入优化的键盘，例如，返回键可能被重新标记为 『前往』，或任何搜索图标或类似图标的 Enter 键。

<input type="text" inputmode="search">

---

2. video 标签

<video> 标签定义视频，比如电影片段或其他视频流。<video> 元素支持三种视频格式：MP4、WebM、Ogg。

注意： Internet Explorer 8 以及更早的版本不支持 <video> 标签。

属性	值	描述
autoplay	autoplay	设置该属性后，视频在就绪后马上播放。
controls	controls	设置该属性后，则向用户显示控件，比如播放按钮。
height	pixels	视频播放器的高度。
width	pixels	视频播放器的宽度。
loop	loop	设置该属性后，则当媒介文件完成播放后再次开始播放。
muted	muted	设置该属性后，视频的音频输出为静音。
poster	url	poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。
preload	auto、metadata、none	设置该属性后，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。

以 poster 为例：

<template>
  <div>
    <video width="320" height="240" src="../assets/1.mp4" poster="../assets/mn.png" controls></video>
  </div>
</template>

效果展示

---

3. multiple 属性

multiple 属性是一个布尔属性。规定可同时选择多个选项。通常用于文件选择和下拉列表，当用于文件选择时，可选择多个文件；当用于下拉列表时，可选中多个选项。

<template>
  <div>
    <input type="file" multiple />
    <select multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
</template>

效果展示

---

4. accesskey 属性

accesskey 属性规定激活（使元素获得焦点）元素的快捷键。

注意： 在不同操作系统中不同的浏览器中访问快捷键的方式不同：

浏览器	Windows	Linux	Mac
IE	[Alt] + accesskey	N/A
Chrome	[Alt] + accesskey	[Alt] + accesskey	[Control] [Alt] + accesskey
Firefox	[Alt] [Shift] + accesskey	[Alt] [Shift] + accesskey	[Control] [Alt] + accesskey
Safari	[Alt] + accesskey	N/A	[Control] [Alt] + accesskey
Opera	Opera 15 or newer: [Alt] + accesskey、Opera 12.1 or older: [Shift] [Esc] + accesskey

以下例子是当我同时按下 Alt+z 时：

<template>
  <div>
    <input type="text" accesskey="z">
  </div>
</template>

效果展示

---

5. tabindex 属性

tabindex 属性规定当使用 “tab” 键进行导航时元素的顺序。

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

当我按下 Tab 键时：

---

6. download 属性

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

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

---

7. dir 属性

dir 属性规定元素内容的文本方向。

值	描述
ltr	默认。从左向右的文本方向。
rtl	从右向左的文本方向。
auto	让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。

以 rtl 为例：

<template>
  <div>
    <bdo dir="rtl">文本方向从右到左!</bdo>
  </div>
</template>

效果展示

---

8. spellcheck 属性

spellcheck 属性规定是否对元素内容进行拼写检查。true 规定应当对元素的文本进行拼写检查，false 规定不应对元素的文本进行拼写检查。

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

效果展示

---

9. translate 属性

translate 属性规定元素内容是否要翻译。yes 规定元素内容需要翻译，no 规定元素内容不需要翻译。

<template>
  <div>
    <p translate="no">hello</p>
    <p>hello</p>
  </div>
</template>

效果展示

---

10. title 属性

title 属性提供了元素的额外信息，浏览器通常用这些东西显示工具条提示，通常在展示不全的文本标题使用。

<template>
  <div>
    <p title="我是描述文本">hello</p>
  </div>
</template>

效果展示

---

11. contenteditable 属性

contenteditable 属性指定元素内容是否可编辑。true 指定元素是可编辑的，false 指定元素是不可编辑的。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

<template>
  <div>
    <p contenteditable>点击我可编辑</p>
  </div>
</template>

效果展示

---

12. draggable 属性

draggable 属性是 HTML5 支持拖放操作的方式之一，用来表示元素是否可被拖放。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style type="text/css">
  #div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
</style>

<body>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
<script type="text/javascript">
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</script>

</html>

效果展示

---

13. dropzone 属性

dropzone 属性规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接。

<div dropzone="copy"></div>

值	描述
copy	拖动数据会导致被拖数据产生副本。
move	拖动数据会导致被拖数据移动到新位置。
link	拖动数据会生成指向原始数据的链接。

---

14. hidden 属性

hidden 属性规定对元素进行隐藏。

<template>
  <div>
    <p hidden>这是一段文字</p>
    <p>这是一段文字</p>
  </div>
</template>

效果展示

---

15. lang 属性

lang 属性规定元素内容的语言。语言代码参考手册

<template>
  <div>
    <p lang='fr'>这是一段文字</p>
  </div>
</template>

---

16. data-* 属性

data-* 属性用于存储私有页面后应用的自定义数据。可以在所有的 HTML 元素中嵌入数据。

由以下两部分组成：

• 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
• 该属性可以是任何字符串。

注意： 自定义属性前缀 data- 会被客户端忽略。

<template>
  <div>
    <ul @click="dotOn">
      <li data-type="bird">第一</li>
      <li data-type="fish">第二</li>
      <li data-type="spider">第三</li>
    </ul>
  </div>
</template>
<script>
export default {
  methods: {
    dotOn(e) {
      console.log(e.target.dataset.type);
    },
  },
};
</script>

效果展示

---

17. input - type 属性

type 属性规定要显示的 <input> 元素的类型。默认类型是：text。

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区）。

input 的 tpye 类型：

<template>
  <div>
    <p>
      <span>1.当 type 为 button 时：</span>
      <input type="button" value="点我">
    </p>
    <p>
      <span>2.当 type 为 checkbox 时：</span>
      <input type="checkbox">
    </p>
    <p>
      <span>3.当 type 为 color 时：</span>
      <input type="color">
    </p>
    <p>
      <span>4.当 type 为 date 时：</span>
      <input type="date">
    </p>
    <p>
      <span>5.当 type 为 datetime-local 时：</span>
      <input type="datetime-local">
    </p>
    <p>
      <span>6.当 type 为 email 时：</span>
      <input type="email">
    </p>
    <p>
      <span>7.当 type 为 file 时：</span>
      <input type="file">
    </p>
    <p>
      <span>8.当 type 为 hidden 时：</span>
      <input type="hidden">
    </p>
    <p>
      <span>9.当 type 为 image 时：</span>
      <input type="image" src="1.png" width="16" height="16">
    </p>
    <p>
      <span>10.当 type 为 month 时：</span>
      <input type="month">
    </p>
    <p>
      <span>11.当 type 为 number 时：</span>
      <input type="number" min="1" max="5">
    </p>
    <p>
      <span>12.当 type 为 password 时：</span>
      <input type="password">
    </p>
    <p>
      <span>13.当 type 为 radio 时：</span>
      <input type="radio">
    </p>
    <p>
      <span>14.当 type 为 range 时：</span>
      <input type="range" min="1" max="10">
    </p>
    <p>
      <span>15.当 type 为 reset 时：</span>
      <input type="reset">
    </p>
    <p>
      <span>16.当 type 为 search 时：</span>
      <input type="search">
    </p>
    <p>
      <span>17.当 type 为 submit 时：</span>
      <input type="submit">
    </p>
    <p>
      <span>18.当 type 为 tel 时：</span>
      <input type="tel">
    </p>
    <p>
      <span>19.当 type 为 text 时：</span>
      <input type="text">
    </p>
    <p>
      <span>20.当 type 为 time 时：</span>
      <input type="time">
    </p>
    <p>
      <span>21.当 type 为 url 时：</span>
      <input type="url">
    </p>
    <p>
      <span>22.当 type 为 week 时：</span>
      <input type="week">
    </p>
  </div>
</template>

效果展示