内容摘要：html不区分大小写 写HTML的时候，你写<DIV>还是<div>，浏览器根本不在乎。这不是什么约定俗成的规矩，是HTML解析器的底层逻辑决定的——它对标签名和属性名做大小写

html不区分大小写

写HTML的不区时候，你写<DIV>还是小写<div>，浏览器根本不在乎。不区这不是小写什么约定俗成的规矩，是不区HTML解析器的底层逻辑决定的——它对标签名和属性名做大小写不敏感匹配。换句话说，小写<Div>、不区<DIV>、小写<div>在浏览器眼里是不区同一个东西。

我第一次意识到这件事，小写是不区很多年前看一个老外的页面源码。满屏的小写大写标签，<HTML>、不区<BODY>、小写<TABLE>，不区像在吼人。当时我以为这人写错了，后来才知道早期HTML规范就是这么写的，HTML 4之前大写反而是主流写法。浏览器为了兼容这些历史遗留代码，干脆把大小写不敏感写进了标准。

XHTML差点改了这个规矩

2000年前后XHTML火过一阵。XHTML基于XML，XML是严格区分大小写的，所以XHTML要求所有标签必须小写。那段时间前端开发者被编辑器折腾得够呛，少写一个小写字母就报错。但XHTML最终没成为主流，HTML5回归了大小写不敏感的路线。现在你打开任何现代浏览器，大写小写混着写，页面照样正常渲染。

不过有个地方例外：class和id的值是区分大小写的。<div class="Header">和<div class="header">在CSS里是两回事。很多人栽在这上面——HTML标签随便大写没事，但class名写岔了一个字母，样式死活不生效，查半天查不出来。

大写标签的实际代价

虽然浏览器不挑，但大写标签在团队协作里是个麻烦。代码review的时候，满屏<DIV CLASS="WRAPPER">看着累，而且跟CSS、JavaScript里的小写命名对不上，容易产生认知负担。更实际的问题是，某些工具链对大小写敏感——比如React的JSX，<Div>和<div>完全是两个东西，前者会被当成一个叫Div的组件。从HTML转到JSX的人，如果习惯了大写标签，很容易踩坑。

还有SVG。内联在HTML里的SVG，标签名是区分大小写的。<clipPath>不能写成<clippath>，<linearGradient>不能写成<lineargradient>。因为SVG是XML方言，浏览器对SVG部分按XML规则解析。这是HTML里大小写不敏感规则的一个大缺口，不少人在这上面翻过车。

那到底该怎么写

小写。没别的原因，就是大家都这么写，工具默认生成小写，编辑器高亮按小写做，代码看起来也清爽。HTML5规范本身也建议小写，虽然它同时承认大写合法。这就像开车系安全带——不系也不一定出事，但系上没坏处。

浏览器宽容不代表你可以随便来。理解“不区分大小写”这个机制，是为了在遇到诡异bug时能想到这一层，而不是给自己偷懒找理由。毕竟代码是写给人看的，浏览器只是顺便执行一下。