HTML属性HTML 全局属性（Global Attribute）有哪些？accesskey、autocapitaliz

HTML 全局属性（Global Attribute）有哪些？

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

我们可以在所有的 HTML 元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是 html5 兼容的。例如，虽然<foo>不是一个有效的 HTML 元素，但是 html5 兼容的浏览器隐藏了标记为<foo hidden>...<foo>的内容。

全局属性包括基本属性和事件处理程序属性（如:oninput\onblur\onchange\onfocus\onclick\ondblclick等等）

下面列举一些常用的全局基本属性

accesskey

提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。

<a href="https://developer.mozilla.org/zh-CN/" accesskey="m">MDN Web Docs</a>
<br>
<strong>请输入内容：</strong>
<input type="text" accesskey="i">

代码实现效果：快捷键m可以激活a标签跳转至链接文档，快捷键i可以激活输入框，输入框focus

注：所有主流浏览器都支持 accesskey 属性，但是在不同操作系统的不同浏览器中访问快捷键的方式不同：

Browser	Windows	Linux	Mac
Internet Explorer	[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

在 HTML5 中, accesskey 属性可用于任何 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。

在 HTML 4.01 中, accesskey 属性可使用于: <a>, <area>, <button>, <input>, <label>, <legend>, 和 <textarea>。

autocapitalize

控制用户的文本输入是否和如何自动大写，它可以有以下的值：

-   `off` or `none`，没有应用自动大写（所有字母都默认为小写字母）。
-   `on` or `sentences`，每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
-   `words`，每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
-   `characters`，所有的字母都应该默认为大写。

注：该属性值对使用物理键盘输入的内容无效，主要针对语音输入之类的虚拟键盘的输入进行限制

HTML标准文档

The autocapitalize attribute, as typically implemented, does not affect behavior when typing on a physical keyboard. (For this reason, as well as the ability for users to override the autocapitalization behavior in some cases or edit the text after initial input, the attribute must not be relied on for any sort of input validation.)

通常实现的autocapitalize属性，并不影响在物理键盘输入时的行为。（因为这个原因，以及用户在某些情况下可以覆盖自动大写行为或者在输入初始化后编辑文本的能力，任何类型的输入验证严禁依赖autocapitalize的属性）

class

一个以空格分隔的元素的类名（classes）列表

contenteditable

一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会调整元素的部件（widget）以允许编辑。contenteditable实际上是浏览器厂商提供的一个富文本编辑器的实现方案，通过设置contenteditable属性使得DOM可以编辑。

-   `true` 或者空字符串，表明元素是可被编辑的；
-   `false`，表明元素不能被编辑。

data-*

一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本 (一般指 JavaScript) 与HTML之间进行专有数据的交换。所有这些自定义数据属性都可以通过所属元素的 HTMLElement 接口来访问。 HTMLElement.dataset 属性可以访问它们。

<body>
  <img src="#" alt="图片" data-src="https://developer.mozilla.org/zh-CN/" >Demo</img>
</body>
<script>
  window.onload = function () {
    let imgElement = document.getElementsByTagName('img')[0];
    console.log(imgElement.dataset.src);// 使用dataset访问自定义数据属性
    console.log(imgElement.getAttribute('data-src')); // 通过属性访问自定义数据属性
  }
</script>

在 HTML属性名以 data- 开头。它只能包含字母、数字、破折号（-）、句号（.）、冒号（:）和下划线（_）。任意的 ASCII 大写字母（A 到 Z）都会转换为小写。

在 JavaScript，自定义 data 属性的属性名与没有 data- 前缀的 HTML 属性相同，并且在移除单个破折号（-）后，大写之后的字母以获得属性的“驼峰”命名。

dir

一个指示元素中文本方向的枚举属性。它的取值如下：

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

draggable

一种枚举属性，指示是否可以使用 Drag and Drop API (en-US) 拖动元素。它可以有以下的值：

-   `true`, 这表明元素可能被拖动
-   `false`, 这表明元素可能不会被拖动

hidden

-布尔属性表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容

   -   空字符串 ,隐藏元素
   -   hidden  ，隐藏元素
   -   until-found ，元素不可见，但在网页上搜索时可以搜索

hidden是使用CSS样式来实现的，在设置值为hidden或者空字符串时，使用 display: none;来隐藏元素，设置值为until-found时，使用content-visibility: hidden;实现效果。

id

定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。

title 属性和 alt 属性分别有什么作用？

title属性也是一个HTML全局属性，作用：包含表示与其所属元素相关信息的文本，属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本。简单说就是给元素创建工具提示。

alt属性是img元素特有的一个必需属性，它规定了图像无法显示时的替代文本。

在 HTML5 中, title 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。

在 HTML 4.01中, title 属性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。

所以对于一个img标签可以设置title和alt两个属性，只是两个属性内容的显示时机是不同的，当鼠标移动到图片上时显示title属性的内容，当图片无法显示时使用alt属性的内容替代。