HTML5 标签大小写终极避坑指南

编程狮（w3cschool.cn） 2025-08-05 15:01:32 浏览数 (202)

反馈

——由编程狮（w3cschool.cn）2025 年 8 月最新整理

一句话结论：

普通 HTML5 标签/属性 统一小写；

SVG、MathML、自定义元素 区分大小写；其余场景一律小写，写错就白屏！

一、为什么大小写突然成了“坑”？

很多新手以为 HTML5 已经全部“大小写不敏感”，结果：

复制了一段 SVG，页面直接空白；
自定义组件死活不渲染；
百度 SEO 报告提示“大量大写标签影响解析速度”。

别急，下面 3 分钟带你一次扫清所有盲区。

二、4 大场景对照表（收藏级）

场景	是否区分大小写	推荐写法	写错后果
普通 HTML5 标签/属性	❌ 不区分	全小写	团队代码风格混乱
`<!doctype html>`	❌ 不区分	小写	无功能影响，但 SEO 扣分
SVG / MathML	✅ 严格区分	按规范大小写	图形不渲染
自定义元素（Custom Elements）	✅ 严格区分	小写+中划线	组件注册失败

三、实战演练：3 个在线小实验

实验 1：普通标签大小写无感

打开编程狮 HTML5 在线编辑器 → 输入：

<!-- 推荐 -->
<div class="编程狮-banner">你好，世界</div>


<!-- 不报错，但风格差 -->
<DIV CLASS="编程狮-BANNER">你好，世界</DIV>

按 F12 → Elements，浏览器已自动转为小写。

实验 2：SVG 大小写敏感

<!-- 错误：viewbox 全小写 → 矩形消失 -->
<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="red" viewbox="0 0 100 100" />
</svg>


<!-- 正确：viewBox 驼峰 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
</svg>

实验 3：自定义元素大小写

// 定义组件
class W3cSchoolCard extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<p>Hello from 编程狮!</p>`;
  }
}
customElements.define('w3cschool-card', W3cSchoolCard);

<!-- 正确 -->
<w3cschool-card></w3cschool-card>


<!-- 错误：浏览器不识别 -->
<W3CSCHOOL-CARD></W3CSCHOOL-CARD>

四、一句话速背口诀

“普通小写稳如山，SVG/MathML 照规范，自定义组件全小写，百度 SEO 不翻车。”

五、团队代码规范模板（直接复制用）

在 .prettierrc 或 .editorconfig 里加：

{
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.svg",
      "options": { "parser": "xml", "xmlWhitespaceSensitivity": "strict" }
    }
  ]
}

配合 Git 钩子，提交前自动格式化，大小写零冲突。