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

一句話結(jié)論：

普通 HTML5 標(biāo)簽/屬性 統(tǒng)一小寫；

SVG、MathML、自定義元素 區(qū)分大小寫；其余場(chǎng)景一律小寫，寫錯(cuò)就白屏！

一、為什么大小寫突然成了“坑”？

很多新手以為 HTML5 已經(jīng)全部“大小寫不敏感”，結(jié)果：

• 復(fù)制了一段 SVG，頁(yè)面直接空白；
• 自定義組件死活不渲染；
• 百度 SEO 報(bào)告提示“大量大寫標(biāo)簽影響解析速度”。

別急，下面 3 分鐘帶你一次掃清所有盲區(qū)。

二、4 大場(chǎng)景對(duì)照表（收藏級(jí)）

三、實(shí)戰(zhàn)演練：3 個(gè)在線小實(shí)驗(yàn)

實(shí)驗(yàn) 1：普通標(biāo)簽大小寫無(wú)感

打開(kāi) 編程獅 HTML5 在線編輯器 → 輸入：

<!-- 推薦 -->
<div class="編程獅-banner">你好，世界</div>


<!-- 不報(bào)錯(cuò)，但風(fēng)格差 -->
<DIV CLASS="編程獅-BANNER">你好，世界</DIV>

按 F12 → Elements，瀏覽器已自動(dòng)轉(zhuǎn)為小寫。

實(shí)驗(yàn) 2：SVG 大小寫敏感

<!-- 錯(cuò)誤：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>

實(shí)驗(yàn) 3：自定義元素大小寫

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

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


<!-- 錯(cuò)誤：瀏覽器不識(shí)別 -->
<W3CSCHOOL-CARD></W3CSCHOOL-CARD>

四、一句話速背口訣

“普通小寫穩(wěn)如山，SVG/MathML 照規(guī)范，自定義組件全小寫，百度 SEO 不翻車。”

五、團(tuán)隊(duì)代碼規(guī)范模板（直接復(fù)制用）

在 .prettierrc 或 .editorconfig 里加：

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

配合 Git 鉤子，提交前自動(dòng)格式化，大小寫零沖突。

六、延伸閱讀

• HTML5 代碼規(guī)范
• 《W3C 標(biāo)準(zhǔn)教程》
• 《SVG 教程》