HTML全局属性的使用方法与基础教程-html教程-PHP中文网

id和class是唯二真正影响运行时行为的全局属性；id必须唯一以确保document.getElementById稳定获取，class支持多值但空格处理需谨慎，data-*仅JS通过dataset读写有效，tabindex、hidden、contenteditable等有严格生效条件。

html全局属性的使用方法与基础教程

id 和 class 是唯二真正影响运行时行为的全局属性，其他多数只是语法合法但无实际效果。别被“所有标签都能加”误导——加了不等于起作用。

哪些全局属性真正在 JS 和 CSS 里生效

浏览器只认几个关键属性的值，其余大多被忽略或仅在特定上下文起效：

id：必须唯一，document.getElementById("x") 才能稳定返回目标元素；重复 id 时只取第一个，且 HTML 验证器会警告
class：支持多值（空格分隔），但class="btn primary"和class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，导致classList.contains("primary")返回 false
data-*：只在 JS 中通过dataset读写有效，HTML/CSS 完全不解析；data-user-id="123" → JS 中是el.dataset.userId，不是el.dataset.user-id（语法错误）或el.dataset.userid（拿不到）
tabindex：只有值为0或正整数才参与 Tab 焦点流；tabindex="-1"仅禁用焦点，不改变顺序
hidden 和 contenteditable 是布尔属性：存在即生效，hidden="false"依然隐藏，contenteditable="0"依然可编辑

`data-*` 的命名与读写陷阱

看似自由，实则规则严苛，一错就拿不到值：

属性名只能含 ASCII 字母、数字、连字符-、点.、下划线_；data-user:name非法，浏览器静默忽略
数字开头无效：data-1st-place="gold"无法通过dataset.1stPlace访问，得用dataset["1st-place"]
大小写敏感：IE11 把data-MyKey转成mykey，不是myKey；现代浏览器转myKey，但不统一
值永远是字符串：data-count="0"取出来是"0"，需手动Number(el.dataset.count)
不要存对象或函数：它只序列化为字符串，JS 侧要自己JSON.parse，且框架中不会响应式更新

`title`、`lang`、`aria-*` 这类“隐形属性”的真实约束

它们不改样式、不触发逻辑，但缺失或误用会直接破坏可访问性或 SEO：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

title：鼠标悬停提示，但移动端 Safari 完全不支持；部分屏幕阅读器默认跳过，不能当关键信息载体
lang：必须配对使用， + <p lang="en">Hello</p>，否则搜索引擎可能误判全文语言
aria-*：单独加aria-label到<div>上大概率被跳过；必须配合语义角色，比如<code><div role="button" aria-label="删除"> <li> <code>dir：设dir="rtl"会影响文本对齐、表单光标方向、甚至 CSS text-align: start/end 的计算结果

容易被忽略的兼容性与渲染差异

很多属性在不同环境表现不一致，调试时得看具体上下文：

立即学习“前端免费学习笔记（深入）”；

hidden 等价于display: none，但hidden="until-found"是新行为，等价于content-visibility: hidden，目前仅 Chromium 支持
contenteditable 对 <script></script>、<meta> 无效，浏览器直接忽略，不报错也不警告
draggable 默认是auto，不是true；<p></p> 默认不可拖，得显式写draggable="true"
exportparts 只对含 Shadow DOM 的自定义元素有意义，普通页面基本用不到
autocapitalize 和 autocorrect 主要面向移动端虚拟键盘，Safari 桌面版不支持autocapitalize