HTML全局属性完全指南：28个通用钥匙让你的页面更强大
在HTML里，全局属性就像一把通用钥匙。不管你是用div、p、button还是自己定义的元素，这些属性都能给它们加上额外功能。从最简单的id和class，到现代网页用的popover和inert，全局属性让你不用写复杂JS就能做出丰富的交互效果。
这篇文章会带你把所有标准全局属性过一遍，配上例子和常用写法，帮你写出更干净、更稳的代码。
什么是全局属性
全局属性就是所有HTML元素都能用的属性。它们不看元素类型是什么，提供通用功能，比如给元素起名字、加样式、设置快捷键、控制内容能不能编辑等等。
注意：虽然理论上所有元素都支持，但有些属性对特定元素没效果。比如给meta标签加上contenteditable，并不会真的让meta变成可编辑区域。
一、基础标识和样式属性
这几个是最常用的全局属性，负责给元素起名字、标语言、定方向。
| 属性 | 作用 | 例子 |
|---|---|---|
| class | 给元素分个类，CSS或JS用的钩子 | |
| id | 页面里唯一的身份证 | id="header" |
| style | 直接写在标签上的样式 | |
| title | 附带说明，通常鼠标悬浮会显示 | title="详细说明" |
| lang | 声明元素内容用的是哪种语言 | lang="zh-CN" |
| dir | 文字方向，从左到右或从右到左 | dir="rtl" |
| translate | 控制翻译工具翻不翻这段内容 | translate="no" |
1. class - 样式和脚本的桥梁
<div class="card shadow rounded">内容</div>多个类名用空格隔开。建议用有含义的类名比如user-card，别用red-text这种跟样式绑死的名字。
2. id - 页面里的身份证
<section id="contact-form"></section>
<label for="username">用户名：</label>
<input id="username">整个页面里id必须唯一。可以用在锚点链接比如#contact-form，也可以给label的for属性用，还能用JS快速找到元素。
3. style - 内联样式
<p style="font-size: 1.2rem; color: #2c3e50;">紧急通知</p>优先用外部或者内部样式表，内联样式不好维护，只适合动态样式或者优先级很高的覆盖。
4. title - 鼠标悬停提示
<abbr title="HyperText Markup Language">HTML</abbr>屏幕阅读器也能读出附加信息，但别用这个传递重要内容，手机端没法悬浮。
5. lang - 语言声明
<html lang="zh-CN">
<p lang="en">Hello World</p>搜索引擎、翻译工具、屏幕阅读器都需要这个来切换语音词典。
6. dir - 文字方向
<p dir="rtl">مرحبا بالعالم</p>
<p dir="auto">自动检测方向</p>7. translate - 控制翻译
<p translate="no">Apple Inc.</p>专有名词不想被翻译就加上这个。
二、交互和焦点控制
让元素动起来：可编辑、可拖拽、可聚焦、可隐藏。
| 属性 | 功能 | 常用值 |
|---|---|---|
| contenteditable | 元素内容能直接编辑 | true/false/plaintext-only |
| draggable | 允许拖拽这个元素 | true/false/auto |
| hidden | 把元素藏起来 | 布尔属性 |
| inert | 禁用所有交互，包括子元素 | 布尔属性 |
| tabindex | 控制Tab键跳转顺序 | 整数(0,-1,正数) |
| accesskey | 用快捷键激活元素 | 单个字符 |
| spellcheck | 拼写检查 | true/false |
| autocapitalize | 自动大写（手机端） | none/sentences/words/characters |
| autocorrect | 自动纠正拼写 | on/off |
| writingsuggestions | 写作建议，比如语法和拼写 | on/off |
8. contenteditable - 直接编辑
<div contenteditable="true" id="editableZone">
点这里，直接改文字
</div>plaintext-only这个值可以让用户只能输入纯文字，不过有些浏览器支持得不太好。
9. draggable - 原生拖拽
<div draggable="true" ondragstart="handleDragStart(event)">拖我试试</div>需要配合dragstart、dragend这些拖拽事件才能传数据。
10. hidden - 语义隐藏
<div hidden>这内容还没加载好，先藏着</div>效果相当于display: none，但语义是“这元素跟当前页面状态没关系”。
11. inert - 彻底禁用交互
<div inert>
<button>点不了</button>
<a href="#">也点不了</a>
</div>元素和它里面所有东西都没法点击、没法聚焦、屏幕阅读器也读不到。做模态框背景或者非激活面板时很好用。
12. tabindex - 键盘导航顺序
<div tabindex="0">按Tab能到这里</div>
<button tabindex="-1">Tab到不了，但JS可以给它焦点</button>建议只用0（自然顺序）和-1（只让JS给焦点），不要用正数，会打乱正常的Tab顺序。
13. accesskey - 快捷键
<button accesskey="s">保存 (Alt+S)</button>不同系统的组合键不一样：Windows和Linux是Alt+字符，Mac是Ctrl+Option+字符。要注意别跟浏览器或者屏幕阅读器的快捷键撞上，最好在界面上提示用户怎么用。
14. spellcheck - 拼写检查
<textarea spellcheck="true"></textarea>
<input type="text" spellcheck="false">15. autocapitalize - 手机端自动大写
<input type="text" autocapitalize="sentences">
<input type="text" autocapitalize="words">sentences是每句话首字母大写，words是每个单词首字母大写。
16. autocorrect - 自动纠错
<input type="text" autocorrect="off">输用户名或者验证码的时候关掉比较好。
17. writingsuggestions - 写作建议
<div contenteditable writingsuggestions="on">
开始写，可能会看到语法建议...
</div>控制要不要显示写作建议，包括拼写、语法和AI辅助。
三、表单和虚拟键盘辅助
专门给输入控件用的，手机上体验更好。
| 属性 | 作用 | 常用值 |
|---|---|---|
| autofocus | 页面打开时自动聚焦 | 布尔属性 |
| inputmode | 告诉手机弹出哪种键盘 | numeric,email,tel,search |
| enterkeyhint | 改回车键的样子和功能 | search,send,next,done |
18. autofocus - 自动获取焦点
<input name="q" autofocus placeholder="输入搜索内容">一个页面最多只用一个，不然用户会懵。
19. inputmode - 告诉手机用哪种键盘
<input type="text" inputmode="numeric">
<input type="text" inputmode="email">就算type=text，用inputmode也能改变键盘样式，挺实用的。
20. enterkeyhint - 改回车键的标签
<input type="text" enterkeyhint="search">
<input type="text" enterkeyhint="send">search会让回车键显示“搜索”，send显示“发送”。
四、自定义数据和结构化数据
存页面私有数据，或者给搜索引擎看的语义信息。
21.><div >="10086" >="admin" >="true"></div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId);
console.log(div.dataset.role);
</script>
<div >="10086" >="admin" >="true"></div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId);
console.log(div.dataset.role);
</script>属性名只能有小写字母、数字、连字符，不能以xml开头。别存密码或者token这些敏感信息，因为源码里能看到。
22. 微数据属性
一组属性，用来给搜索引擎看的内容结构。
| 属性 | 说明 |
|---|---|
| itemscope | 创建一个微数据项 |
| itemtype | 指定用哪套词汇，比如schema.org |
| itemprop | 定义属性叫什么 |
| itemid | 全局标识符 |
| itemref | 引用别处的属性 |
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">无线降噪耳机</span>
<span itemprop="sku">WH-1000XM5</span>
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<span itemprop="reviewBody">音质顶级，降噪无敌</span>
</div>
</div>对SEO有好处，Google会解析这些数据，在搜索结果里显示更丰富的信息。
五、Shadow DOM和Web Components
做自定义组件的时候，这些是核心。
| 属性 | 用途 |
|---|---|
| slot | 指定内容插到哪个槽位 |
| part | 让外部能改内部元素的样式 |
| exportparts | 把嵌套Shadow DOM里的part再导出来 |
| is | 扩展内置元素 |
23. slot - 内容分发
<!-- 组件内部定义 -->
<template id="userCardTmpl">
<div class="card">
<slot name="avatar">默认头像</slot>
<slot name="name">匿名用户</slot>
</div>
</template>
<!-- 使用时填充 -->
<user-card>
<img slot="avatar" src="photo.jpg">
<span slot="name">文曲</span>
</user-card>24. part - 样式钩子
<!-- 组件内部 -->
<div part="header">标题栏</div>
<div part="content">内容区</div>/* 外部样式 */
user-card::part(header) {
background: #2c3e50;
color: white;
}25. exportparts - 穿透导出
自定义元素里面又套了一个Shadow DOM时，可以把里面的part重新导出来给外面用。
<nested-element exportparts="button: nested-btn"></nested-element>nested-element::part(nested-btn) {
border-radius: 20px;
}26. is - 自定义内置元素
<button is="fancy-button">特殊按钮</button>customElements.define('fancy-button', class extends HTMLButtonElement {
constructor() { super(); }
}, { extends: 'button' });注意：Safari不支持is，标准组织对这个也有争议。建议优先用独立的自定义元素，不要去扩展现成的标签。
六、安全和弹出层
27. nonce - CSP内容安全策略
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
console.log('nonce对上了才能执行');
</script>服务器生成一串随机数，配合Content-Security-Policy响应头，防止有人往里塞恶意脚本。
28. popover - 原生弹出层
不用JS就能做弹出框、下拉菜单或者提示卡片。
<button popovertarget="myPopover" popovertargetaction="toggle">切换弹出框</button>
<div popover id="myPopover">
这是原生弹出层，点外面就能关。
</div>popover可以取两个值：
auto（默认）：点外面或者按Esc就能关
manual：只能靠按钮或者JS关
配合按钮的popovertarget和popovertargetaction（show、hide、toggle）用。弹出层会放到最顶层，不会被父元素的overflow挡住。
七、浏览器兼容性
| 属性 | Chrome | Firefox | Safari | Edge | 备注 |
|---|---|---|---|---|---|
| class,id,style,title | ✅ | ✅ | ✅ | ✅ | 经典支持 |
| contenteditable | ✅ | ✅ | ✅ | ✅ | plaintext-only有限 |
| draggable | ✅ | ✅ | ✅ | ✅ | 需配合事件 |
| hidden | ✅ | ✅ | ✅ | ✅ | |
| inert | 102+ | 112+ | 16.4+ | 102+ | 较新 |
| popover | 114+ | 125+ | 17+ | 114+ | 2023年稳定 |
| inputmode | ✅ | ✅ | ✅ | ✅ | |
| enterkeyhint | 77+ | 94+ | 13.1+ | 79+ | |
| part / exportparts | ✅ | ✅ | ✅ | ✅ | Shadow DOM相关 |
| is | 67+ | ❌ | ❌ | 79+ | 不建议用 |
| writingsuggestions | 118+ | ❌ | 17+ | 118+ | 实验性 |
上线前建议查一下Can I Use，用@supports做特性检测。
总结
全局属性是HTML给的多功能工具箱，用好了能省不少事。这篇文章讲了28个标准全局属性，分成了六类：
基础标识和样式：class、id、lang、dir，给元素身份和语义
交互和焦点控制：contenteditable、draggable、inert、tabindex，做出丰富交互
表单和虚拟键盘：inputmode、enterkeyhint、autofocus，手机端体验更顺
自定义数据和结构化：>
Shadow DOM和组件：slot、part、exportparts，做能复用的组件
安全和弹出层：nonce、popover，安全加固和原生UI
几个核心建议：
语义优先：能用button实现的，别用div加一堆属性去模拟
别乱用：contenteditable会带来复杂的数据管理，不是必须就别碰；tabindex的正数会搞乱无障碍体验
渐进增强：对popover、inert这种新特性，给不支持的浏览器准备降级方案
手机端测一下：inputmode和autocapitalize在不同手机上表现不一样，真机测了再说
安全注意：>把这些全局属性用好，你的HTML代码会更清晰、更好维护，也更贴近现代标准。规范还会继续加新东西，比如virtualkeyboardpolicy，但这篇文章里讲的核心内容，能管很久。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
