概念

首先，引用一下 MDN 对 HTML 全局属性（global attribute）的理解。

全局属性是所有 HTML 元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

有了全局属性，当然也会有局部属性，即：有些元素它规定了自己的属性，并不是应用于所有的元素。

下面将着重讲解有哪些全局属性及含义。

accesskey

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

1	<a href="http://www.lqzww.top/" accesskey="a">LqZww's blog</a>

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

浏览器 / 操作系统	Windows	Linux	Mac
Chrome	Alt + key	Alt + key	Control + Alt + key
Opera	Alt + key	Alt + key	Control + Alt + key
Firefox	Alt + Shift + key	Alt + Shift + key	Control + Alt + key
Safari	Alt + key	N/A	Control + Alt + key
Internet Explorer	Alt + key	N/A	N/A

class

它用于规定元素的类名。如果需要定义多个类名，用空格来分隔类名。

1 2	<div class="className">class</div> <div class="className1 className2">class</div>

contenteditable

它表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许编辑。

1 2	<p contenteditable="false">不可编辑的</p> <p contenteditable="true">可以进行编辑</p>

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

data-*

用于存储页面或应用程序的私有定制数据。

data-* 属性由以下两部分组成：

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

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

基本使用方法：

1	<div onclick="divOnClick()" data-type="类型">data-数据</div>

function divOnClick() {
  let div = document.querySelector("div")
  var divData = div.getAttribute("data-type");
  console.log(`${div.innerHTML} and ${divData}`);
}

当我们点击 div 后，会在控制台中打印出 data-数据 and 类型。

dir

用于设置元素中内容的文本方向。

它有以下几个属性值：

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

1
2
3

<div dir="ltr">从左往右</div>
<div dir="rtl">从右往左</div>
<div dir="auto">auto</div>

hidden

它可以对元素进行隐藏。

1 2	<p hidden>隐藏，看不见。</p> <p>可见的。</p>

id

它定义了一个全文档唯一的标识符：id。它可以用作链接锚。

命名规则：

必须以字母 A-Z 或 a-z 开头；
其后的字符：字母(A-Z、a-z)、数字(0-9)、连字符(“-“)、下划线(“_”)、冒号(“:”)以及点号(“.”)；
值对大小写敏感。

lang

它规定元素内容的语言代码。

1
2
3

<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>

语言代码参考手册

style

用于规定元素的行内样式。如果右一个或多个由分号分隔的 CSS 属性和值。

1 2	<h1 style="color:red;">定义行内样式</h1> <h1 style="color:red;text-align:center">定义行内样式</h1>

title

规定元素的额外信息，作为提示信息展示给用户。这些信息通常会在鼠标移到元素上时显示一段工具提示文本。

1	<p title="LqZww's blog">this is my blog</p>

tabindex

它可以设置元素的 Tab 键控制次序（1 是第一）。

1
2
3

<a href="http://www.lqzww.top/" tabindex="2">http://www.lqzww.top/</a><br />
<a href="http://www.lqzww.top/" tabindex="1">my blog</a><br />
<a href="http://www.lqzww.top/" tabindex="3">hhhhhh</a>