常用HTML全局属性学习记录

accesskey

指定访问当前元素的快捷键。（此时并没有深入去研究这个属性，但是当一个产品用户体量很大的情况下就需要去做快捷键和无障碍访问部分。）

autocapitalize

autocapitalize属性用来控制文本在用户输入/编辑时的大小写，这个属性更适合英文场景，中文场景无效。

contenteditable

可以让元素处于内容可编辑状态。

其中属性值true和false是所有浏览器都支持的，而plaintext-only等属性值火狐浏览器并不支持。

data-* 

指开发人员自己设置的各种自定义属性，方便开发的时候获取。

<div data-test="test">div>

除了使用 HTMLElement.getAttribute() 方法，还可以使用 HTMLElement.dataset 访问这些自定义属性值，详细看这篇文章

dir

dir属性是可以改变文档流的水平流动方向，设计的初衷是用在多语言处理中。因为有的语言是从右至左的。

• ltr，指从左到右，用于那种从左向右书写的语言（比如英语）；
• rtl，指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）；
• auto，指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。

在聊天界面的布局中可以得到应用

draggable

draggable属性在拖拽交互中非常有用。

draggable 可以有如下取值：

• true：表示元素可以被拖动
• false：表示元素不可以被拖动

浏览器默认行为是内容可以拖拽，布局不能。

但是，有时候我们希望某些内容不能拖拽，但是布局可以拖拽，则就需要用到draggable属性，（详细看这个文章）

hidden

hidden属性可以让元素隐藏，表现为display:none，相比类名或者style设置display:none的优点在于优先级极低，可以轻松reset。

inputmode

inputmode的作用是告知虚拟键盘应该显示何种类型的键盘，例如是显示数字键盘呢，还是显示网址键盘还是显示邮箱键盘？

对于元素，这个属性是个鸡肋，请使用原生的兼容性更好的type属性，例如：

<input type="number">
<input type="tel">
<input type="url">
<input type="email">

inputmode属性适合设置了contenteditable的普通元素，例如：

<div typemode="numeric" contenteditable="plaintext-only">div>

tabindex

tabindex可以用来设置元素是否能够被Tab键索。

• 如果属性值是负值，表示当前元素可以被focus，但是不能使用键盘访问到。
• 如果属性值是0，表示可以被focus，按照DOM先后位置顺序被键盘访问。
• 如果属性值是正值，则表示可以被focus，同时有优先的键盘访问属性。

title

title表示元素的标题，在PC端浏览器中，鼠标hover会显示相关的提示。

translate

translate属性表示是否允许浏览器对当前元素进行翻译。

该属性可以有以下值：

• 空字符串或 yes，意味着网页在进行本地化的时候，对应内容要被翻译。
• no，意味着对应的内容无需做任何翻译。