Web前端入门第 13 问：HTML 标签和属性是否区分大小写？

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。

思考一个问题：英文写法都分大小，HTML 标签和属性的大写和小写是否不一样？

标签大小写

先看代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>1</li>
    <Li>2</Li>
    <LI>3</LI>
  </ol>
</body>
</html>

以上 li 标签用了三种不同写法，全小写、大小混着写、全大写，实际渲染结果都被浏览器修正为了小写 li ，如下：

所以 HTML 标签还是建议使用小写。

属性大小写

上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .abc {
      color: blue;
    }
    .ABC {
      color: red;
    }
  </style>
</head>
<body>
  不支持的 type 类型：<input type="files">
  <div class="abc">
    <input type="file">
  </div>
  <div class="Abc">
    <input type="File">
  </div>
  <div class="ABC">
    <input type="FILE">
  </div>
  <div Class="abc">
    <input Type="file">
  </div>
  <div Class="Abc">
    <input Type="File">
  </div>
  <div Class="ABC">
    <input Type="FILE">
  </div>
  <div CLASS="abc">
    <input TYPE="file">
  </div>
  <div CLASS="Abc">
    <input TYPE="File">
  </div>
  <div CLASS="ABC">
    <input TYPE="FILE">
  </div>
</body>
</html>

以上属性名和属性值都用了三种不同写法，全小写、大小混着写、全大写，实际渲染效果：

如果浏览器区分了大小写，那么不识别的 type 属性会渲染为 text 文本域（如：第一个 input 元素），然而 input 标签的 type 属性和属性值大小写都没影响浏览器渲染为 file 文件选择域。

class 属性也区分了三种不同的写法，其中属性名大小写没影响样式渲染，但是属性值大小写却分别渲染为了不同的颜色。

总结

  1. HTML 标签不区分大小写。
  2. HTML 属性不区分大小写。
  3. HTML 属性值为预定义的有限选项时，浏览器能穷举的情况下，不区分大小写，比如 type 属性值的大小写没影响浏览器渲染。
  4. HTML 自定义的属性值区分大小写，比如：class 的属性值，大写和小写是不同的结果。

编码的最佳实践建议使用小写字母来编写 HTML 标签、属性、属性值。

posted @ 2025-03-06 09:38  前端路引  阅读(247)  评论(0)    收藏  举报