HTML全局属性常用属性值与语法规则详解-html教程-PHP中文网

html全局属性有严格类型约束：布尔型（存在即true，不可赋值）、枚举型（值须精确匹配关键词）、字符串型（如data-*命名需小写连字符，id/class有隐性规则），违者失效或引发意外行为。

html全局属性常用属性值与语法规则详解

HTML全局属性不是“能用就行”的装饰项，它们的值和语法稍有偏差，就可能失效、被忽略，甚至触发意外行为。关键在于：绝大多数全局属性不是自由字符串，而是有明确类型约束的——布尔型、枚举型、字符串型，三者混用会直接导致属性不生效。

布尔属性：存在即 true，不能写 `="true"` 或 `="false"`

像 hidden、disabled（虽非全局但常被类比）、autofocus 这类布尔属性，规范只认“是否存在”。写成 hidden="true" 或 hidden="false" 是无效的——浏览器仍会当作 true 处理。

hidden 正确写法：被隐藏的内容 或 也合法
错误写法：这不会显示出来（依然隐藏）
JavaScript 中读取时：el.hidden 返回布尔值，但 el.getAttribute('hidden') 返回 "" 或 null，别混淆 DOM 属性与 HTML 属性

枚举属性：值必须严格匹配规范定义的关键词

draggable、contenteditable、autocomplete（在 input 上是局部属性，但语义逻辑一致）属于枚举属性。它们只接受有限几个字符串值，大小写敏感，拼错或加空格即退化为默认行为。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

contenteditable 可选值只有："true"、"false"、"plaintext-only"；"on" 或 "yes" 无效
draggable 只接受："true"、"false"、"auto"；draggable="1" 被忽略，元素按默认规则（如图片、链接可拖）处理
enterkeyhint 值必须是规范词："search"、"send"、"next" 等；enterkeyhint="submit" 不会改变键盘回车键图标

`data-*` 属性：命名受限，JS 访问自动转驼峰

自定义数据属性看似自由，实则受两层限制：HTML 命名规则 + JavaScript dataset 映射规则。违反任一，数据就拿不到。

HTML 中命名必须全小写 + 连字符分隔：data-user-id ✅，data-userId ❌，data-User-ID ❌
JS 中通过 dataset 访问时，连字符后首字母自动大写：el.dataset.userId 对应 data-user-id，不是 el.dataset.user-id（语法错误）
值始终是字符串：data-count="42" → el.dataset.count === "42"，需手动 parseInt
禁止存敏感信息：这些属性明文暴露在 DOM 中，不可用于 token、密码等

`id` 和 `class` 的隐性约束最容易被忽视

它们虽是字符串型，但实际使用中存在强隐性规则，违反会导致 CSS 无效、JS 查询失败或无障碍工具误读。

id 必须唯一且以字母或下划线开头：id="1section" ❌（数字开头），id="header-2" ✅，id="header 2" ❌（含空格）
class 多值之间只能用单个空格分隔：class="btn primary large" ✅，class="btn,primary" ❌（逗号被当字面量）
lang 值需符合 BCP 47 标准：lang="zh-CN" ✅，lang="chinese" ❌（无标准映射，屏幕阅读器可能跳过）
dir 只接受 "ltr"、"rtl"、"auto"；dir="right" 不生效

真正难的不是记住哪些值可用，而是理解每个属性背后的设计意图——比如 hidden 是语义化隐藏（影响可访问性树），而 style="display:none" 只是视觉隐藏；data-* 是为 JS 提供上下文，不是替代状态管理。写错一次值可能当场看不出问题，但会在某次无障碍测试或跨端渲染时突然暴露。