在中文版和英文版的MDN中,分别列出了27个和33个基本全局属性(不包括xml:lang和xml:base、多重aria-*属性和事件处理函数),其中contextmenu属性已被弃用,而dropzone处于实验阶段,在Caniuse和官方的浏览器兼容性中都查不到对应的兼容性,并且MDN也没有相应的词条内容,甚至英文版MDN根本没有列出这个属性。
另外,draggable和Popover属性将在未来的WebAPI专栏中再详细说明。因此本文以英文版为主,只说明剩余的30个全局属性。
class属性是元素的区分大小写的类名的空格分隔列表。class允许CSS和JavaScript通过类选择器或DOM方法document.getElementsByClassName等函数选择和访问特定元素。
id属性定义一个标识符,该标识符在整个文档中必须是唯一的。目的是在链接(使用片段标识符)、编写脚本或样式(使用CSS)时识别元素。同样,id允许CSS和JavaScript通过类选择器或DOM方法document.getElementsById等函数选择和访问特定元素。
id有个比较少见的特性:可以不通过上面那些函数,直接使用目标元素的id就可以访问到元素。:
注意:
具体的表现就是当鼠标悬停在元素上时,弹出一个带有文本的小框。
注意:style属性不得用于传达语义信息。即使删除了所有样式,页面也应保持语义正确。样式和语义是两个不同的概念。样式是指元素的外观和布局,而语义是指元素的含义和作用。如果使用style属性来传达语义信息,那么当样式被删除或禁用时,页面的语义信息将丢失,这会影响页面的可访问性。
data-*是一类被称为自定义数据属性的属性。用于存储自定义数据、状态、注释以及类似的页面或应用程序私有的属性或元素,对于这些属性或元素没有更合适的属性或元素。
在JS中通过element.dataset.data*的方式访问自定义数据属性,自定义数据属性的名称会被自动转化为小驼峰式名称,需要注意,自定义数据属性的名称有几点限制:
translate属性用于指定在页面本地化时是翻译元素的属性值及其Text节点子节点的值,还是保持不变。
translate属性是一个枚举属性,接受字符串yes、no或者空字符串。同样地,空字符串和true映射为true状态;no映射为no状态;另外还有一个继承状态,它是缺失的默认值和无效的默认值。
当元素处于启用翻译状态时,元素的可翻译属性及其Text节点子节点的值将在页面本地化时进行翻译。当一个元素处于no状态,页面被本地化时,元素的属性值及其Text节点子节点的值将保持原样。
规范:每个元素(甚至是非HTML元素,例如XML元素和SVG元素)都有一个翻译模式,处于启用翻译状态或不翻译状态。如果一个HTML元素的translate属性处于yes状态,那么该元素的翻译模式将处于启用翻译的状态;如果元素的translate属性处于no状态,则元素的翻译模式处于no-translate状态。否则,要么该元素的translate属性处于inherit状态,要么该元素不是HTML元素,因此没有translate属性(具体取决于该元素是否被浏览器支持);在这两种情况下,元素的翻译模式都处于与其父元素相同的状态(如果有的话),或者处于启用翻译的状态(如果元素的父元素为空)。
:
accesskey的值必须是一组有序的、唯一的、由空格分隔的Token,其中任何一个Token都不与其他Token相同,并且每个令牌的长度必须恰好是一个码点(不区分大小写)。
MDN:
注意:在WHATWG规范中,它说您可以指定多个空格分隔的字符,浏览器将使用它支持的第一个字符。但是,这在大多数浏览器中不起作用。IE/Edge使用它支持的第一个命令没有问题,前提是与其他命令没有冲突。
当发生冲突时accesskey属性无效。
除了浏览器支持不佳之外,accesskey属性还存在许多问题:
由于这些问题,通常建议不要对大多数通用网站和Web应用程序使用accesskey。
autocapitalize属性用于控制在用户输入/编辑文本输入时是否以及如何自动大写。
spellcheck属性用于定义是否可以检查元素是否存在拼写错误。
spellcheck属性有三种可能的默认值:
spellcheck属性的值有三种情况:空字符串、true和false(该属性是枚举属性,不是布尔属性,因此值需要显示指定),其中空字符串和true均映射为true状态,表示应尽可能检查元素是否存在拼写错误;而false映射为false状态。另外还有第三种状态,也就是默认状态(注意默认状态与默认值不一样,不要弄混),即缺失值default和无效值default,表明元素将根据默认行为进行操作,可能基于父元素自己的拼写检查状态
contenteditable属性指示用户是否应编辑该元素。如果是这样,浏览器会修改其小部件以允许编辑。
contenteditable属性目前允许的值有true/false、空字符串和plaintext-only。其中,true和空字符串被映射为true状态;而plaintext-only关键字映射为纯文本状态;false被映射到false状态。此外,还有第四种继承状态,它是缺失的缺省值和无效的缺省值。在JS中访问元素的contenteditable属性时,会返回对应的状态。
tabindex属性允许开发人员使HTML元素可聚焦,允许或阻止它们按顺序聚焦并确定它们对顺序焦点导航的相对顺序。通常在页面上,有两种方式可以聚焦一个元素:通过使用Tab键使元素获得焦点,并且可以按顺序导航到下一个可聚焦元素(使下一个元素获得焦点);通过鼠标点击/移动设备触屏聚焦元素。
tabindex属性接收一个数字值,有3种情况:
inert执行以下操作:
对于inert,一个比较直观的应用就是就是禁止用户复制文字,因为元素无法交互,自然无法选中,当然,要是用户知道F12,那inert可就管不着了。
另外是对于对话框的应用,理论上来说,对话框应该不太会用得上inert属性,因为如果是模态对话框,那模态对话框区域之外的元素就跟设置了inert属性差不多了,也是无法响应那些事件。非模态对话框跟用其他元素模拟的对话框那就另说。
dir属性指定元素的文本方向。建议在设置的文本的方向时使用该属性,而不是使用CSSdirection属性,因为用户代理可能会关闭CSS样式。如果打开了CSS样式,那direction和unicode-bidi会覆盖该属性。
允许的值有:
各值对应着各自的状态。
hidden属性指示不应向用户显示元素的内容。
处于Untilfound状态Web浏览器将使用content-visibility:hidden而不是display:none,元素会有如下的描述:
在CSS中可以通过一些属性覆盖hidden的值,比如display:block。
另外在这种状态下,直到hidden属性被删除之前,元素可以触发beforematch事件,因为用户已通过在页面中查找功能或通过片段导航找到了内容:
其他注意事项:
nonce的值通常由后端生成并使用,以Express.js为例:
MDN:仅在无法避免使用不安全的内联脚本或样式内容的情况下使用nonce。如果你不需要它,就不要使用它。如果脚本是静态的,也可以使用CSP散列。始终尝试充分利用CSP保护,尽可能避免使用nonce或不安全的内联脚本。
virtualkeyboardpolicy属性是一个枚举属性,接受的值有:
注意:virtualkeyboardpolicy只在移动设备上有效,PC端的触摸键盘不会响应该属性,在元素失焦时触摸键盘会跟着关闭是它本身就有的,不是受到了该属性影响。
这部分属性被称为微数据属性。微观数据(模型)是一种用于在互联网上发布结构化数据的标记语言,也称为嵌入式元数据格式。它是HTML5规范的一部分,允许网站所有者将数据以结构化格式放置在网页上,以方便搜索引擎和其他自动化工具对其内容进行理解和分类。
微数据模型由称为项的名称-值对组组成。每一组被称为一个项。每个项可以具有项类型、一个全局标识符(如果项类型指定的词汇表支持项的全局标识符)和一个名称-值对列表。名称-值对中的每个名称称为一个属性,每个属性有一个或多个值。每个值要么是一个字符串,要么本身是一组名称-值对(一个项)。这些名称彼此之间是无序的,但是如果一个特定的名称有多个值,它们确实有一个相对的顺序。
通过使用微数据模型,我们可以提供更丰富、更详细的信息,从而提高页面在搜索结果中的排名,并提供更好的用户体验。
itemscope属性用于定义当前元素代表一个新的实体,是一个布尔属性。
接着为这个实体添加一些描述:
MDN:
名称-值对的属性值与以下列表中的第一个匹配大小写一样:
注意:一个实体中的多个itemprop属性之间是无序的,但是如果有多个itemprop属性的值相同,那这几个值相同的itemprop属性就存在顺序。