前端面试题——常见的HTML全局属性(global attribute)有哪些?

前言

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

常见全局属性列表

accesskey

accesskey:可以为当前元素设置一个快捷键提示，该属性的值必须是单字符（一个字母或一个数字）,例如：

<a href="https://www.minato.com/html/" accesskey="h">HTML</a><br>

autocapitalize

autocapitalize:控制用户的文本输入是否和如何自动大写，该属性必须采用以下值之一：

• off或none ：不应用自动大写（所有字母默认为小写）
• on或sentences ：每句首字母默认大写；所有其他字母默认为小写
• words：每个单词首字母默认大写；所有其他字母默认为小写
• characters ：所有字母应默认为大写

class

class属性是html中最常用的属性之一，该属性可以为指定元素命名，以用于css和Javascript对该元素的修改和控制。

contenteditable

contenteditable用于规定元素内容是否可编辑。例如：

<p contenteditable="true">这是一个可编辑的段落。</p>

contextmenu

contextmenu规定 <div> 元素的上下文菜单。上下文菜单会在用户右键点击元素时出现：

<div contextmenu="mymenu">
<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>
</div>

autofocus

表示一个元素将在页面加载时自动聚焦，或者在其所属的 <dialog> 显示时被聚焦。该属性是一个布尔值，初始化为 false。

id

id属性用于标识元素，作用与class类似，区别在于class一般用于表示某一类的元素（不止一个），而id则是为了表示某一特定元素。

style

style属性在开发中也十分常见，可以为元素提供内联样式。

data-*

data-*属性用于存储页面或应用程序的私有自定义数据。其由两部分组成：

• 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
• 属性值可以是任意字符串

例如：

<ul>
  <li data-food-type="水果">苹果</li>
  <li data-food-type="蔬菜">土豆</li>
  <li data-food-type="饮料">奶茶</li>
</ul>

dir 

dir属性用于规定文本方向，例如：

<p dir="rtl">Write this text right-to-left!</p>

draggable 

draggable用于规定元素是否可被拖动，例如：

<p draggable="true">这是一段可拖动的段落。</p>

hidden 

hidden属性用于隐藏指定元素，效果类似于css中的visibility: hidden，例如：

<p hidden>这个段落应该被隐藏。</p>

lang

lang属性用于规定元素内容的语言，例如：

<p lang="fr">Ceci est un paragraphe.</p>

translate 

该属性用于规定是否应该翻译元素内容，例如：

<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>

spellcheck 

spellcheck属性用于规定是否对元素进行拼写和语法检查，可对以下内容进行拼写检查：

• input框中的内容
• 可编辑元素中的文本

例如：

<p contenteditable="true" spellcheck="true">这是一个段落。</p>

inert 

insert属性会禁用一个元素以及其内部的所有元素。在有点击事件的情况下很有用。使用了该属性的这些元素仍然可见，但是它们没有任何功能：按钮和链接不能被点击，输入字段被禁用等等，而且它们会被屏幕阅读器忽略，例如：

<div inert>
  <button onclick="alert(42)">
  <input type="text">
  <a href="https://cn.bing.com/">go to a web</a>
</div>