我正在参加「掘金·启航计划」
在中文版和英文版的MDN中，分别列出了27个和33个基本全局属性（不包括xml:lang和xml:base、多重aria-*属性和事件处理函数），其中contextmenu属性已被弃用，而dropzone处于实验阶段，在Can i use和官方的浏览器兼容性中都查不到对应的兼容性，并且MDN也没有相应的词条内容，甚至英文版MDN根本没有列出这个属性。
另外，draggable和Popover属性将在未来的Web API专栏中再详细说明。因此本文以英文版为主，只说明剩余的30个全局属性。
class和id
class属性是元素的区分大小写的类名的空格分隔列表。class允许CSS和JavaScript通过类选择器或DOM方法document.getElementsByClassName等函数选择和访问特定元素。
id属性定义一个标识符，该标识符在整个文档中必须是唯一的。目的是在链接（使用片段标识符）、编写脚本或样式（使用CSS）时识别元素。同样，id允许CSS和JavaScript通过类选择器或DOM方法document.getElementsById等函数选择和访问特定元素。
id有个比较少见的特性：可以不通过上面那些函数，直接使用目标元素的id就可以访问到元素。：
<div id='box'>这是一个盒子</div>
<script>
box.onclick = function (e) {
console.log(e.target.innerHTML) // 这是一个盒子
}
</script>
但是不推荐用这种方式访问元素，实际开发还是以先获取元素再访问为主。
注意：
class的类名没有什么限制，但是尽量使用描述内容本质的值，而不是描述期望的内容表示的值。现在也有很多广泛使用的CSS命名规范，比如BEM、OOCSS、SMACSS、ACSS等。根据需求选择合适的CSS命名规范，以减少开发和维护的成本。id值是一个不透明的字符串，它只是一个标识符，没有任何特定的含义。它不应该被用来传递语义信息。这是因为id属性的主要目的是为了在文档中唯一地标识一个元素，以便于在CSS和JavaScript中使用。如果id属性的值包含特定的含义，那么它可能会导致代码的混淆和不必要的复杂性。id的值可以是除了空格以外的任意字符。为避免意外错误，应仅使用ASCII字母、数字、_和-，并且id属性的值应以字母开头。
title
title属性包含表示与其所属元素相关的咨询信息的文本。例如适合于工具提示。在链接上，可以是目标资源的标题或描述；在图像上，可以是图像的名称或图像的描述；在一个段落中，可以是文本的脚注或注释；在引文中，可以是关于来源的进一步信息；在交互式内容上，可以是元素使用的标签或说明等等。
具体的表现就是当鼠标悬停在元素上时，弹出一个带有文本的小框。
注意：
- 在规范中明确表示：目前不鼓励依赖
title属性，因为许多用户代理没有按照本规范的要求以可访问的方式公开该属性（例如，要求像鼠标这样的指向设备来显示工具提示，这排除了只使用键盘的用户和只使用触摸的用户，例如使用现代电话或平板电脑的用户）。- 如果
title值中包含U+000A字符（HTML中为 ），其值将会被分为多行，每个U+000A字符表示一个换行符。<link>、<abbr>和<input>等属性中的title属性具有额外的语义。- MDN中指明了
title对于可访问性存在的问题：
- 仅使用触摸设备的用户。
- 使用键盘导航的人员。
- 使用辅助技术（如屏幕阅读器或放大镜）导航的人员。
- 患有精细运动控制障碍的人。
- 有认知问题的人。 这是由于浏览器支持不一致，再加上浏览器呈现页面的额外辅助技术分析。
style
style属性包含要应用于元素的CSS样式声明。用style属性将样式应用到元素上的方式被称为内联样式，内联样式的优先级要比内部样式和外部样式高，仅次于!important。但是内联样式不能复用样式，并且大量使用会导致HTML部分的代码变得杂乱，难以调试，因此style属性一般用于调试目的、增加样式的权重以及像Vue这类框架中方便绑定动态样式。
注意：
style属性不得用于传达语义信息。即使删除了所有样式，页面也应保持语义正确。样式和语义是两个不同的概念。样式是指元素的外观和布局，而语义是指元素的含义和作用。如果使用style属性来传达语义信息，那么当样式被删除或禁用时，页面的语义信息将丢失，这会影响页面的可访问性。
data-*
data-*是一类被称为自定义数据属性的属性。用于存储自定义数据、状态、注释以及类似的页面或应用程序私有的属性或元素，对于这些属性或元素没有更合适的属性或元素。
在JS中通过element.dataset.data*的方式访问自定义数据属性，自定义数据属性的名称会被自动转化为小驼峰式名称，需要注意，自定义数据属性的名称有几点限制：
- 名称不得以
xml开头（不区分大小写）。 - 名称不得包含任何冒号字符（
:)。 - 名称不得包含任何大写字母。不过最终名称中的大写字母全部会被自动转化成小驼峰名称，这点影响不大。但是可以有多个
-符，如data-foo-bar是合法的。
lang
lang属性指定元素内容和包含文本的元素属性的主要语言。值的格式由用于定义语言的标签 (BCP47) IETF文档定义。
通常lang属性在文档根节点<html>上指定。如果没有指定或者指定了和浏览器首选语言一致lang值，浏览器不会问用户是否翻译。如果和浏览器首选语言不一致，浏览器才会问用户是否翻译。
假设现在有<html lang='en-US'>（浏览器首选语言为简体中文），同时文档中有<div lang='zh-CN'>this is a box</div>，这时浏览器翻译成中文时，浏览器不会管<div>的lang，照样会将this is a box翻译成这是一个盒子。除非同时设置了translate="no"。
在源代码改动一下上面的🌰：<html lang='zh-CN'>（与首选语言一致），有时候即使刷新浏览器，但是浏览器还是会询问要不要翻译，要在新标签页重新输入网址才行。
注意：
- 如果标签的内容是空字符串，语言就设为未知。如果标签内容是无效的，根据BCP47，它就设为无效。
- 有时候我们会遇到像
xml:lang这样的属性，xml:被称为命名空间，用于在XML中声明元素的语言和区域性信息。而在规范中明确说明：任何名称空间中的lang属性都不能用于任何HTML元素。xml:lang的优先级比lang高。
translate
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属性（具体取决于该元素是否被浏览器支持）；在这两种情况下，元素的翻译模式都处于与其父元素相同的状态（如果有的话），或者处于启用翻译的状态（如果元素的父元素为空）。
🌰：
<div translate="no">This is a box</div> // 保持原样，不会被翻译工具翻译
<p translate="yes">This is a paragraph</p> // 这是一个段落
accesskey
accesskey属性提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。
accesskey的值必须是一组有序的、唯一的、由空格分隔的Token，其中任何一个Token都不与其他Token相同，并且每个令牌的长度必须恰好是一个码点（不区分大小写）。
MDN:
注意：在WHATWG规范中，它说您可以指定多个空格分隔的字符，浏览器将使用它支持的第一个字符。但是，这在大多数浏览器中不起作用。IE/Edge使用它支持的第一个命令没有问题，前提是与其他命令没有冲突。
当发生冲突时
accesskey属性无效。
各端和各浏览器激活accesskey的方式
| 浏览器 | Windows | Linux | Mac |
|---|---|---|---|
| chrome | Alt + key | Alt + key | Control + Alt + key |
| Firefox | Alt + Shift + key | Alt + Shift + key | Firefox 57+：Control + Option + key/Control + Alt + keyFirefox14+： Control + Alt + keyFirefox 13+： Control + key |
| IE/Edge | Alt + key | - | - |
| Safari | Alt + key | - | Control + Alt + key |
| Opera 15+ | Alt + key | Alt + key | Ctrl + Alt + key |
| Opera 12 | Shift + Esc打开一个可通过accesskey访问的内容列表，然后，可以通过按键选择一个项目 | 同Windows | 同Windows |
可访问性问题
除了浏览器支持不佳之外，
accesskey属性还存在许多问题：
- 访问键值可能与系统或浏览器键盘快捷
accesskey或辅助技术功能冲突。可能适用于操作系统、辅助技术和浏览器的一种组合的方法可能不适用于其他组合。- 某些键盘上可能不存在某些
accesskey值，尤其是在关注国际化时。因此，适应特定语言可能会导致进一步的问题。- 依赖于数字的
accesskey值可能会让遇到认知问题的个人感到困惑，因为数字与其触发的功能没有逻辑关联。- 通知用户存在
accesskey，以便他们了解该功能。如果系统缺少通知用户此功能的方法，则用户可能会意外激活accesskey。由于这些问题，通常建议不要对大多数通用网站和Web应用程序使用
accesskey。
autocapitalize
autocapitalize属性用于控制在用户输入/编辑文本输入时是否以及如何自动大写。
枚举值
| 关键字 | 说明 |
|---|---|
off/none | 不应用自动大写（所有字母默认为小写）。 |
on/sentences | 每个句子的第一个字母默认为大写字母，所有其他字母默认为小写 |
words | 每个单词的第一个字母默认为大写字母，所有其他字母默认为小写 |
characters | 所有字母应默认为大写。 |
注意：
可以在编辑宿主上使用
autocapitalize属性来控制宿主可编辑区域的自动大写行为，在<input>或<textarea>元素上使用autocapitalize属性来控制在该元素中输入文本的行为，或者在表单元素上使用autocapitalize属性来控制与表单元素关联的所有自动大写继承元素的默认行为。
autocapitalize属性不会影响在物理键盘上打字时的行为。影响的是如移动设备虚拟键盘和语音输入等输入方式。需要注意一点：输入法跟浏览器对英文首字母大写的设置会覆盖
autocapitalize属性的值，比如设置autocapitalize='on'，但是输入法或者浏览器关闭了英文首字母大写，那么这个属性不会生效。不过通过JS访问元素的autocapitalize值时不会受这些设置的影响。关于JS访问
autocapitalize的返回值也需要注意：off和none统一返回none；on和sentences统一返回sentences；剩下两个值返回值不变。这些是autocapitalize的状态。对于
type属性为url、peassword状态之一的<input>元素，autocapitalize属性永远不会导致启用自动大写。
spellcheck（实验性）
spellcheck属性用于定义是否可以检查元素是否存在拼写错误。
spellcheck属性有三种可能的默认值：
true-by-default：如果元素的内容是可编辑的，并且没有通过spellcheck属性显式禁用拼写检查，则将检查元素的拼写和语法。false-by-default：除非通过spellcheck属性显式地启用拼写检查，否则永远不会检查元素的拼写和语法。inherit-by-default：元素的默认行为与其父元素的行为相同。没有父元素的元素不能将此作为其默认行为。
spellcheck属性的值有三种情况：空字符串、true和false（该属性是枚举属性，不是布尔属性，因此值需要显示指定），其中空字符串和true均映射为true状态，表示应尽可能检查元素是否存在拼写错误；而false映射为false状态。另外还有第三种状态，也就是默认状态（注意默认状态与默认值不一样，不要弄混），即缺失值default和无效值default，表明元素将根据默认行为进行操作，可能基于父元素自己的拼写检查状态
注意：
在修改
spellcheck属性的值时（也就是说原本有值），要么设置为true，要么设置为false，不能是空字符串。这个属性仅仅是浏览器上的提示：浏览器并不会强制去检查拼写错误，通常不可编辑的元素是不会去检查拼写错误的，就算它的
spellcheck属性被设置为true而且浏览器支持拼写检查。
spellcheck属性似乎也像autocapitalize属性一样会受到一些设置的影响，如果浏览器没开启拼写检查，则该属性无效，开启了拼写检查的效果就像下面这样（chrome浏览器环境）：
另外，拼写检查不支持一些语言（如中文），甚至浏览器直接不允许你开启拼写检查。
enterkeyhint
enterkeyhint属性是一个枚举属性，它定义了为虚拟键盘上的Enter键呈现的操作标签(或图标)。具体的效果类似微信小程序<input>组件的confirm-type属性。
允许的值
| 关键字 | 描述 |
|---|---|
enter | 通常是插入新行。 |
done | 通常意味着没有其他输入内容，输入法编辑器（IME）将关闭。 |
go | 通常意味着将用户带到他们键入的文本的目标。 |
next | 通常将用户带到下一个将接受文本的字段。 |
previous | 通常将用户带到将接受文本的上一个字段。 |
search | 通常将用户带到搜索他们键入的文本的结果。 |
send | 通常将文本传递到其目标。 |
注意：该属性具体的效果取决于用户代理和用户语言。Can i use中各浏览器对该属性的兼容性如下：
经过测试，QQ浏览器确实是无法使用，如果要查看效果，最好使用手机自带的浏览器或者HTML查看器。我手机里的效果如下，语言不一样的话，效果应该也会不同。
inputmode
inputmode属性提示用户在编辑元素或其内容时可能输入的数据类型。这允许浏览器显示适当的虚拟键盘。值得一提的是，可以在PC端调试这个属性，打开电脑自带的触摸键盘就行了，比如设置inputmode='numeric'，聚焦输入框，触摸键盘就会像下面这样显示:
但是触摸键盘无视
enterkeyhint属性，因此不能用这种方法调试enterkeyhint属性。
允许的值
| 关键字 | 描述 |
|---|---|
none | 没有虚拟键盘。当页面实现自己的键盘输入控件时。 |
text（默认值） | 用户当前区域设置的标准输入键盘。 |
decimal | 包含用户区域设置的数字和小数分隔符的小数数字输入键盘（通常.或,)。设备可能会也可能不会显示减号键-。 |
numeric | 数字输入键盘，但只需要数字 0–9。设备可能会也可能不会显示减号键。 |
tel | 电话键盘输入，包括数字0–9、星号（*），和英镑（#）键。需要电话号码的输入通常应改用<input type="tel">。 |
search | 针对搜索输入优化的虚拟键盘。例如，返回/提交密钥可能标记为搜索，以及可能的其他优化。需要搜索查询的输入通常应改用<input type="search">。 |
email | 针对输入电子邮件地址进行了优化的虚拟键盘。通常包括@字符以及其他优化。需要电子邮件地址的输入通常应改用<input type="email">。 |
url | 针对输入URL进行了优化的键盘。这可能具有/例如，键更突出。增强的功能可能包括历史记录访问等。需要URL的输入通常应改用<input type="url">。 |
autofocus
autofocus属性指示元素是否应该在页面加载时聚焦，或者在显示元素所属的<dialog>时聚焦。
注意：
不能有两个具有相同的最近祖先
autofocus作用域根元素的元素都指定了autofocus属性。如果应用于多个元素，只有第一个元素会获得焦点。自动聚焦表单控件可能会使使用屏幕阅读技术的视障人士和认知障碍人士感到困惑。分配
autofocus后，屏幕阅读器会将其用户传送到表单控件，而不会事先警告他们。应用
autofocus属性时，请仔细考虑辅助功能。自动聚焦在控件上可能会导致页面在加载时滚动。焦点还可能导致动态键盘在某些触摸设备上显示。虽然屏幕阅读器将播报表单控件接收焦点的标签，但屏幕阅读器不会在标签之前播报任何内容，并且小型设备上的视力正常的用户同样会错过前面内容创建的上下文。
contenteditable
contenteditable属性指示用户是否应编辑该元素。如果是这样，浏览器会修改其小部件以允许编辑。
contenteditable属性目前允许的值有true/false、空字符串和plaintext-only。其中，true和空字符串被映射为true状态；而plaintext-only关键字映射为纯文本状态；false被映射到false状态。此外，还有第四种继承状态，它是缺失的缺省值和无效的缺省值。在JS中访问元素的contenteditable属性时，会返回对应的状态。
另外，contenteditable属性还有其他三种关键字值：caret、events和typing。到本文编写的时间，这三个值还处于实现性阶段，在MDN文档和规范中都没有相应的内容。不过多说明。
注意：当元素可编辑时，元素并没有变成
<input>这样的元素，只是在获得焦点时具有了类似的样式（当然可以自己改）和部分功能，同时也能触发输入和获得焦点等事件。另外，元素的tabindex值被自动设置为-1，可以通过Tab键使元素获得焦点（前提是不被夹在其他tabindex大于等于0的元素中间）。
tabindex
tabindex属性允许开发人员使HTML元素可聚焦，允许或阻止它们按顺序聚焦并确定它们对顺序焦点导航的相对顺序。通常在页面上，有两种方式可以聚焦一个元素：通过使用Tab键使元素获得焦点，并且可以按顺序导航到下一个可聚焦元素（使下一个元素获得焦点）；通过鼠标点击/移动设备触屏聚焦元素。
tabindex属性接收一个数字值，有3种情况：
-
值 >
0：表示元素在顺序键盘导航中应可聚焦，其顺序由数字值定义。最大值为32767。 -
值 =
0：表示元素应该在顺序键盘导航中聚焦，但是在任何正tabindex值之后。 -
值 <
0：表示无法通过顺序键盘导航访问该元素。如果一个元素的tabindex值为-1，并且夹在其他tabindex值大于等于0的元素中间，那该元素永远不会被Tab键聚焦。设置为负值时不需要确切的负值，通常为
-1。
注意：
- 如果有多个元素的
tabindex值相等，那么其顺序取决于它们在页面的位置。- 如果包含
tabindex属性时未设置任何值，则元素是否可聚焦由用户代理确定。- 不得在
<dialog>元素上使用tabindex属性。但是可以在其内部的元素上使用。- MDN：建议仅使用
0和-1作为tabindex值。避免使用大于0的tabindex值和可以更改可聚焦HTML元素顺序的CSS属性。这样做会使依赖使用键盘进行导航或辅助技术的人难以导航和操作页面内容。相反，应按逻辑顺序编写包含元素的文档。- 使用非交互式元素创作的交互式组件不会在辅助功能树中列出。这会阻止辅助技术导航到和操作这些组件。内容应改为使用交互式元素（
<a>、<button>、<input>等）进行语义描述。这些元素具有内置的角色和状态，可将状态传达给辅助功能，否则必须由ARIA管理这些辅助功能。
inert
inert属性指示浏览器将忽略该元素。当值为true时，元素的所有平面树后代（例如模态框<dialog>）将被用户代理设置为惰性。还会使浏览器忽略用户发送的输入事件，元素不会响应鼠标相关、拖拽、键盘相关等事件，一句话概括就是“只可远观而不可亵玩焉”。
inert执行以下操作：
- 防止在用户单击元素时触发点击事件。
- 通过阻止元素获得焦点来防止focus事件。
- 通过将元素及其内容从辅助功能树中排除，对辅助技术隐藏元素及其内容。
注意：
- 通常情况下，不要在单个表单控件上使用
inert属性，要禁用表单控件更合适的是disabled属性。如果要禁用整个表单，可以在<form>元素上使用inert属性。- 使用
inert属性时，要考虑可访问性问题，要清楚地指出活动的内容部分和惰性的内容部分。如果惰性部分不是明显惰性，使用屏幕阅读器的用户，小型设备或放大镜的用户，甚至使用特别小的Windows的用户可能无法看到页面的活动部分。- 在规范中表明：作者不应该将元素指定为惰性元素，除非它们所表示的内容在视觉上也以某种方式模糊（比如处于屏幕外）。
对于inert，一个比较直观的应用就是就是禁止用户复制文字，因为元素无法交互，自然无法选中，当然，要是用户知道F12，那inert可就管不着了。
另外是对于对话框的应用，理论上来说，对话框应该不太会用得上inert属性，因为如果是模态对话框，那模态对话框区域之外的元素就跟设置了inert属性差不多了，也是无法响应那些事件。非模态对话框跟用其他元素模拟的对话框那就另说。
dir
dir属性指定元素的文本方向。建议在设置的文本的方向时使用该属性，而不是使用CSSdirection属性，因为用户代理可能会关闭CSS样式。如果打开了CSS样式，那direction和unicode-bidi会覆盖该属性。
允许的值有：
ltr，从左到右，用于从左到右书写的语言（如英语）。rtl，从右到左，用于从右到左书写的语言（如阿拉伯语）。auto，由用户代理决定。它使用基本算法来解析元素内的字符，直到找到具有强方向性的字符，然后将该方向性应用于整个元素。
各值对应着各自的状态。
注意：
dir属性只是改变文本起始边的位置，文本中的文字顺序并不会因此正序/倒序排列，如果要改变文字的正倒序，请改用<bdo>，并在<bdo>元素上使用dir属性。有些元素的dir属性会有额外的语义。
hidden
hidden属性指示不应向用户显示元素的内容。
允许的值有：
- 空字符串/
hidden：将元素设置为隐藏状态。映射为Hidden状态。 until-found：映射为Until found状态。当一个元素的属性处于这阵子状态时，表明该元素像hidden状态一样是隐藏的，但是元素中的内容可以被 页面中查找功能（Ctrl + F） 或 片段导航（如锚点链接） 访问。当这些特性试图滚动到元素子树中的目标时，用户代理将删除该属性，以便在滚动到它之前显示内容。
当一个元素的属性处于隐藏状态时，它表明该元素还没有或不再与页面的当前状态直接相关，或者它被用来声明要由页面的其他部分重用的内容，而不是由用户直接访问。
处于Until found状态Web浏览器将使用content-visibility: hidden而不是display: none，元素会有如下的描述：
在CSS中可以通过一些属性覆盖hidden的值，比如display:block。
另外在这种状态下，直到hidden属性被删除之前，元素可以触发beforematch事件，因为用户已通过在页面中查找功能或通过片段导航找到了内容：
<body>
<a href="#test">go to test box</a>
<div class="a"></div> <!-- 具有一定高度 -->
<div id="test" >test box</div>
<script>
test.addEventListener("beforematch", () => {
console.log('show') // 点击连接后跳转到test box的位置，并打印show。
})
</script>
</body>
注意：
- 单纯的通过滚动找到具有
hidden="until-found"的元素不会触发beforematch事件，它只能响应通过页面中查找功能或通过片段导航的方式找到元素的方式。- 该事件处于实验性阶段，兼容性比较差。
其他注意事项：
- 虽然
hidden是全局属性，但是也有一些情况是尽量不要使用的：
- 在规范中明确说明：不能使用
hidden属性隐藏可以在另一个表示中合法显示的内容。例如，在选项卡对话框中使用hidden来隐藏面板是不正确的，因为选项卡界面仅仅是一种溢出表示——同样可以在一个带有滚动条的大页面中显示所有表单控件。同样，使用此属性仅对一个表示隐藏内容也是不正确的—如果某些内容被标记为隐藏，则对所有表示(例如，包括屏幕阅读器)隐藏。- 隐藏元素不能与非隐藏元素链接（
Until found状态除外）。比如<label>的for属性，<a>的href属性等。如果内容不适用或不相关，则没有理由链接到它。但是，使用ARIA aria-describedby属性来引用本身hidden的描述是可以的。- 浏览器是通过
display: none来实现元素进入Hidden状态；而上面说过浏览器实现Until found状态的方式，在这种情况下，元素在流内容中依然会占位，并且元素的边距、边框、内边距和背景依旧会渲染。hidden="until-found"目前处于实验阶段，使用时要注意兼容性。
nonce
nonce属性是一种用于增强安全性的属性，它可以用于指定一个随机的字符串，用于验证某些资源的来源。在使用nonce属性时，服务器会生成一个随机的字符串，并将其包含在HTTP响应头中的Content-Security-Policy（CSP）指令中。浏览器在加载资源时，会检查该资源的nonce属性是否与CSP指令中的nonce值匹配，如果匹配，则允许加载该资源，否则会阻止加载。
使用nonce属性可以有效地防止跨站点脚本攻击（XSS），因为攻击者无法伪造正确的nonce值。同时，nonce属性也可以用于限制内联脚本的执行，从而进一步增强安全性。在HTML中，可以应用于<script>、<style>和<iframe>等元素。
nonce的值通常由后端生成并使用，以Express.js为例：
const express = require('express');
const crypto = require('crypto');
const app = express();
app.use((req, res, next) => {
// 生成一个随机的base64编码的nonce值
const nonce = crypto.randomBytes(16).toString('base64');
// 将nonce值添加到Content-Security-Policy头中
res.setHeader(
'Content-Security-Policy',
`script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}'`
);
// 将nonce值添加到响应对象中，以便在模板中使用
res.locals.nonce = nonce;
next();
});
app.get('/', (req, res) => {
// 使用nonce值渲染HTML
res.send(`
<!DOCTYPE html>
<html>
<head>
<style nonce="${res.locals.nonce}">
body { background-color: lightblue; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<script nonce="${res.locals.nonce}">
console.log('Hello, World!');
</script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
具体的使用方式取决于自己的项目需求。
MDN：仅在无法避免使用不安全的内联脚本或样式内容的情况下使用
nonce。如果你不需要它，就不要使用它。如果脚本是静态的，也可以使用CSP散列。始终尝试充分利用CSP保护，尽可能避免使用nonce或不安全的内联脚本。
virtualkeyboardpolicy
virtualkeyboardpolicy属性控制平板电脑、移动电话或其他硬件键盘等可能不可用的设备等设备上的屏幕虚拟键盘行为。
virtualkeyboardpolicy属性是一个枚举属性，接受的值有：
auto/空字符串：浏览器会自动根据页面的布局和内容来决定是否显示虚拟键盘。当用户点击输入框或其他可编辑元素时，虚拟键盘会自动弹出。当用户离开输入框或其他可编辑元素时，虚拟键盘会自动隐藏。manual：虚拟键盘只会在用户手动触发时显示。用户必须点击一个特定的按钮或手势才能打开虚拟键盘。这种模式通常用于需要用户输入敏感信息的应用程序，例如银行应用程序或密码管理器。
注意：virtualkeyboardpolicy只在移动设备上有效，PC端的触摸键盘不会响应该属性，在元素失焦时触摸键盘会跟着关闭是它本身就有的，不是受到了该属性影响。
itemscope、itemtype、itemprop、itemid和itemref
这部分属性被称为微数据属性。微观数据（模型）是一种用于在互联网上发布结构化数据的标记语言，也称为嵌入式元数据格式。它是HTML5规范的一部分，允许网站所有者将数据以结构化格式放置在网页上，以方便搜索引擎和其他自动化工具对其内容进行理解和分类。
微数据模型由称为项的名称-值对组组成。每一组被称为一个项。每个项可以具有项类型、一个全局标识符（如果项类型指定的词汇表支持项的全局标识符）和一个名称-值对列表。名称-值对中的每个名称称为一个属性，每个属性有一个或多个值。每个值要么是一个字符串，要么本身是一组名称-值对(一个项)。这些名称彼此之间是无序的，但是如果一个特定的名称有多个值，它们确实有一个相对的顺序。
通过使用微数据模型，我们可以提供更丰富、更详细的信息，从而提高页面在搜索结果中的排名，并提供更好的用户体验。
itemscope属性用于定义当前元素代表一个新的实体，是一个布尔属性。
🌰：
<div itemscope itemtype="http://schema.org/Person">
...
</div>
该🌰定义了一个关于人的新的实体，其中，当前元素所代表的实体类型由itemtype属性定义，通常使用URL作为值，这个URL指向一个表示该实体类型的文档（更多请实体类型请参考）。
注意：
itemtype属性的值必须是一组无序的唯一标记（区分大小写），每个标记都是有效的绝对URL，并且都定义为使用相同的词汇表。属性的值必须至少有一个标记。- 物料类型必须全部为适用规范（如 schema.org）中定义的类型，并且必须全部定义为使用相同的词汇表。
itemtype属性只能在指定了itemscope属性的元素上指定。- 全局标识符的确切含义由词汇表的规范确定。在处理具有相同ID的多个项目的情况时，是否允许存在具有相同全局标识符的多个项目（无论是在同一页面上还是在不同页面上）以及该词汇表的处理规则是什么，由此类规范来定义。
接着为这个实体添加一些描述：
<div itemscope itemtype="http://schema.org/Person">
<h2 itemprop="name">张三</h2>
<span itemprop="age">18</span>
<span itemprop="gender">男</span>
</div>
在这里，<h2>、<span>元素都属于这个实体类型。实体类型的各个属性由itemprop属性指定（如上面的名称、年龄和性别等）。通常itemprop的值是一个字符串，用于描述一个特定的属性名称。
MDN：
名称-值对的属性值与以下列表中的第一个匹配大小写一样：
- 如果元素具有
itemscope属性，该值是由元素创建的项。- 如果元素是
<meta>元素，该值是元素的content属性的值。- 如果元素是
<audio>、<embed>、<iframe>、<img>、<source>、<track>或<video>元素，该值是在设置属性时解析元素的src属性相对于元素的节点文档（微数据DOM API的一部分）的值而产生的URL字符串。- 如果元素是
<a>、<area>或<link>元素，该值是生成的URL字符串，该字符串是在设置属性时分析元素的href属性相对于元素的节点文档的值而产生的URL字符串。- 如果元素是
<object>元素，值是生成的URL字符串，该字符串是在设置属性时分析元素的数据属性相对于元素的节点文档的值而产生的URL字符串。- 如果元素是
<data>素，值是元素的值属性的值。- 如果元素是
<meter>元素，该值是元素的value属性的值。- 如果元素是
<time>元素，该值是元素的datetime值。- 否则，该值是元素的文本内容。 如果属性的值是URL，则必须使用URL属性元素指定该属性。URL属性元素包括
<a>、<area>、<audio>、<embed>、<iframe>、<img>、<link>、<object>、<source>、<track>和<video>元素。
注意：一个实体中的多个
itemprop属性之间是无序的，但是如果有多个itemprop属性的值相同，那这几个值相同的itemprop属性就存在顺序。
根据微数据规范，可以用itemid属性指定一个唯一标识符，以便对该项进行唯一标识和引用。还可以用itemref属性将其他元素的属性与某个具有唯一标识符（如itemid属性）的项相关联，可以在一个文档中引用来自多个来源的不同项目，并将它们组合为一个完整的实体。该属性的值可以是任何字符串或URL，并且应该足够唯一以确保不会与其他项相冲突。
itemid属性通常与其他微数据属性（例如itemprop）一起使用，以指定特定项目的详细信息。它还可以与其他Web资源中的项目相关联，这些资源可能具有不同的域名或运行在不同的Web服务器上。
结核官方🌰：
<div itemscope
itemtype="http://vocab.example.net/book"
itemid="urn:isbn:0-330-34032-8"
itemref='name price publishinghouse'></div>
<p id='name'>西游记</p>
<p id='price'>￥30.00</p>
<p id='publishinghouse'>xxx出版社</p>
注意：
itemid属性只能在同时指定了itemscope属性和itemtype属性的元素上指定。它们只能在具有itemscope属性的元素上指定，该属性的itemtype属性指定不支持项全局标识符的词汇表。- Whatwg.org的定义规定了
itemid必须是URL。但是实际URN也可以使用。这个不一致性可能反映了微规范的不完善性。itemref属性只能在指定了itemscope的元素上指定。并且它不是微数据模型的一部分。它仅仅是个语义结构，用于帮助作者向页面添加注解，其中被注解的数据不遵循便利的树结构。例如，它允许作者标记表格中的数据，以便每一列定义一个单独的条目，同时在表格中保留属性。
slot、is、part（实验性）和exportparts（实验性）
这几个属性与Web Components相关，详细可以查看之前的HTML -- Web组件。这里就不详细说明了。
role
详细请查阅了我的另一篇文章Web无障碍。
