前言

有一些html属性，你也许从不使用，甚至都没有听说过它们，但是它们可能非常有用，并且可以在您的项目中派上用场。

如果问我今年想要学习或更深入的语言/技术，给我几个选项：typescript、nodeJs、webpack、vue、react、echarts、小程序的话，这几个我会选择哪个呢？

都不是，我的答案很简单：HTML！

而且我一点也没有讽刺，当能够熟练使用语义化标签及其属性，对日常的画页面工作非常有用。且对于前端来说，在大部分场景中遇到的问题，能用html解决的不用css，能用css解决的不用js。

这篇文章是我研究的结果，梳理了所有关于html标签的全局属性(但不包含事件处理器属性)及它们的一些使用场景，关于属性的继承性和兼容性并不在讨论之内。

希望其中一些对你构建HTML页面有用！

正文

html中的所有标签都具有的属性称为全局属性，即使该属性可能对某些元素不起作用。

全局属性大致上可以分成普通的html全局属性和事件处理器属性，这篇文章只整理普通的html全局属性。这些属性有：

accesskey、autocapitalize、autofocus、class、contenteditable、data-、dir、draggable、enterkeyhint、part、exportparts(实验性)、hidden、id、inert、inputmode、is、itemid、itemprop、itemref、itemscope、itemtype、lang、nonce、popover、slot、spellcheck、style、tabindex、title、translate、virtualkeyboardpolicy(实验性)。*

属性的简单含义

accesskey：设置访问元素的键盘快捷键。
autocapitalize：控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。
autofocus：用于指定页面加载时自动聚焦到该元素，即自动将光标放置在该元素上，可以应用于任何表单元素（如input、textarea等）,注意：只能应用于一个表单元素，如果同时应用于多个元素，则只有第一个元素会自动聚焦。
class：规定元素的类名。
contenteditable：规定是否可编辑元素的内容。
data-*：用于存储页面的自定义数据。
dir：设置元素中内容的文本方向。
draggable：指定某个元素是否可以拖动。
enterkeyhint：用于指定用户按下回车键时的预期行为。它可以应用于任何具有文本输入功能的元素，例如input、textarea和button。
part：用于标识元素的特定部分或角色。
exportparts(实验性)：用于指定哪些部件应该被导出。
hidden：规定对元素进行隐藏。
id：定义全文档唯一的标识符（ID），用于在链接、脚本和样式中辨识元素。
inert：用于将一个元素设置为“惰性”状态，禁用元素及其子元素的用户交互。
inputmode：用户在编辑元素或其内容时可能输入的数据类型的提示，可以帮助移动设备上的用户更轻松地输入特定类型的数据。
is：允许你指定标准 HTML 元素(可以是任何 HTML 标签)像定义的内置元素一样工作，这意味着只有在文档中成功定义了指定的自定义元素名称时才能使用该属性。
itemscope：定义一组名值对，称为项。
itemtype：微数据定义的类型。
itemid：元素的唯一的全局标识符，只能为同时拥有itemscope和itemtype的元素指定。
itemprop：添加一个数据项属性。
itemref：允许微数据项通过指向特定ID（含有需要属性的元素）包含非后代属性。
lang：设置元素中内容的语言代码，表示该元素内部使用的文字是哪一种自然语言书写而成。该属性在浏览器安装有某种插件时，可以触发浏览器的翻译行为、语音阅读等。
nonce：用于指定一个用于验证脚本来源的随机字符串(通过哈希值保证内容和字符串对应)，它可以用于防止跨站点脚本攻击（XSS）。当一个脚本被加载时，浏览器会检查该脚本的 nonce 属性是否与页面中的nonce值匹配。如果不匹配，浏览器将不会执行该脚本。这样可以确保只有来自同一源的脚本才能被执行，从而防止恶意脚本的注入。在 HTML 中，可以通过在script标签中添加nonce属性来指定一个随机字符串。
popover：用来指定一个元素为弹出式元素。
slot：用于定义一个插槽，可以在父组件中插入子组件。它通常与slot标签一起使用，用于在父组件中定义一个占位符，以便子组件可以在该位置插入内容。
spellcheck：检测元素是否拼写错误。
style：规定元素的行内样式。
tabindex：设置元素的 Tab 键控制次序。
title：规定元素的额外信息。
translate：指定是否一个元素的值在页面载入时是否需要翻译。谷歌翻译等自动翻译系统会遵守这个属性，人类翻译者使用的工具也会遵守这个属性，web 作者使用这个属性来标记不应该被翻译的内容是很重要的。
virtualkeyboardpolicy(实验性)：用于控制虚拟键盘的显示和隐藏。

属性含义详解及使用场景

1. itemscope、itemtype、itemid、itemprop、itemref

这五个属性是用来定义网页微数据的。

什么是微数据？

微数据这玩意，在开发时写法复杂，挺让人头疼的，看上去鸟用都没有。

但是，它有一个优点，那就是方便机器去识别页面中的数据。

实际上，微数据的本质就是JSON数据，它使用特定的规范、特有的格式定义了具有json格式的数据。如果把页面上的微数据都抽离出来的话，再组装起来就是一个json格式的数据。

2. data-*

HTML 具有扩展性，data-* 数据属性允许我们在标准、语义化的 HTML 元素中存储额外的信息，并且可以使用js的dataset或者css的属性选择器访问。

3. part

它用于标识元素的特定部分或角色。

它通常用于与CSS样式和JavaScript交互配合使用，以便更好地控制和操作元素。

part属性的值可以是任何字符串，通常是一个描述性的名称，用于标识元素的特定部分。例如，一个按钮元素可以使用part属性来标识其不同的部分，如按钮的文本、图标、背景等。

使用part属性的一种常见方式是通过CSS选择器来选择具有特定part属性值的元素，并为其应用样式。例如，可以使用以下CSS规则来选择具有part属性值为"button-text"的按钮元素：button[part="button-text"] {}。通过这种方式，您可以更精确地控制和定制元素的不同部分的样式。

另外，通过JavaScript，您可以使用part属性来选择和操作具有特定part属性值的元素。例如，可以使用以下代码选择具有part属性值为"button-text"的按钮元素，并对其进行操作：const button = document.querySelector('[part="button-text"]')。

4. hidden和display:none

它们都可以隐藏元素，hidden提供了更好的语义。

hidden可用于需要在网页中隐藏但提供信息的元素，比如网站版本号；或者要提交一个表单，但又不希望表单显示在页面上；或者当想让浏览器自动解码某些字符串时，也可以定义一个隐藏的元素。

我在做项目时遇到的使用hidden的实例截图：

网站版本号
隐藏的表单
隐藏的dom元素

5. inert

这个属性有这么一些用法：

当使用弹出框时，往往会使用遮罩层阻止用户交互行为，有此属性可以不用遮罩层也能阻止用户交互行为了。
当禁用表单时，以前只能通过disabled禁用表单每一项，现在直接在form元素上使用该属性即可禁用整个表单了。
当禁用用户复制粘贴时，以前只能用user-select: none，现在可以使用该元素替代了。

6. is

使用is属性的前提是自定义元素。注册自定义元素可以使用Window 对象上的customElements属性。

自定义元素并使用is属性的例子：

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1 style="color:green">Geeksforgeeks</h1>
        <strong>HTML is Attribute</strong>
    </header>
    <article contenteditable="">
        <h2>Introduction of HTML</h2>
        <p>
            HTML stands for HyperText Markup Language.
            It is used to design web pages using a markup
            language. HTML is the combination of Hypertext
            and Markup language. Hypertext defines the link
            between the web pages. A markup language is used
            to define the text document within tag which defines
            the structure of web pages. This language is used to
            annotate (make notes for the computer) text so that
            a machine can understand it and manipulate text accordingly.
            Most markup languages (e.g. HTML) are human-readable.
            The language uses tags to define what manipulation has
            to be done on the text.
        </p>
        <p is="word-count"></p>
    </article>
    <script>
        class WordCount extends HTMLParagraphElement {
            constructor() {
                super();
                const wcParent = this.parentNode;
                function countWords(node) {
                    const text = node.innerText || node.textContent;
                    return text.split(/\s+/g).length;
                }
                const count = `Words:${countWords(wcParent)}`;
                const shadow = this.attachShadow({ mode:'open' });
                const text = document.createElement('span');
                text.textContent = count;
                shadow.appendChild(text);
                setInterval(function () {
                    const count = `Words:${countWords(wcParent)}`;
                    text.textContent = count;
                }, 200);
            }
        }
        // customElements 是 Window 对象上的一个只读属性，接口返回一个 CustomElementRegistry 对象的引用，可用于注册新的 custom element，或者获取之前定义过的自定义元素的信息
        customElements.define('word-count',
            WordCount, { extends:'p' });
    </script>
</body>
</html>

7. popover

当项目中未使用第三方样式库中的弹出组件时，用这个属性做弹出框是最好的选择。

使用popover属性的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button popovertarget="my-popover">打开 Popover</button>
    <div popover id="my-popover">大家好！欢迎你们！</div>
</body>
</html>

属性的值详解

autocapitalize属性有以下几个可能的值：
- off or none: 所有字母都默认为小写字母
- on or sentences: 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母
- words: 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母
- characters: 所有的字母都默认为大写
dir属性有以下几个可能的值：
- ltr：指从左到右，用于那种从左向右书写的语言（比如英语）
- rtl：指从右到左，用于那种从右向左书写的语言（比如阿拉伯语）
- auto：指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素
enterkeyhint属性有以下几个可能的值：
- enter：表示用户按下回车键时预期提交表单或执行默认操作
- done：表示用户按下回车键时预期完成输入，例如在输入框中输入完整的文本后
- go：表示用户按下回车键时预期导航到另一个页面或执行与导航相关的操作
- next：表示用户按下回车键时预期将焦点移动到下一个可输入的元素
- previous：表示用户按下回车键时预期将焦点移动到上一个可输入的元素
- search：表示用户按下回车键时预期执行搜索操作
- send：表示用户按下回车键时预期发送数据
inputmode属性有以下几个可能的值：
- none：无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用
- text：使用用户本地区域设置的标准文本输入键盘
- decimal：小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键
- numeric：数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键
- tel：电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键
- search：为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化
- email：为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化
- url：为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等
tabindex属性有以下几个可能的值：
- 负值 (通常是-1)：表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用
- 0：表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的
- 正值：表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定
translate属性有以下几个可能的值：
- 空字符串或yes：网页在进行本地化的时候，对应内容要被翻译
- no：对应的内容无需做任何翻译
virtualkeyboardpolicy属性有以下几个可能的值：
- default：默认值，表示浏览器将自动决定何时显示虚拟键盘
- manual：表示虚拟键盘需要手动触发才会显示
- show：表示虚拟键盘将始终显示，即使输入框没有获得焦点
- hide：表示虚拟键盘将始终隐藏，即使输入框获得焦点

更多html知识，收录在专栏《HTML》中。

html中标签的全局属性

前言

正文