HTML 属性排序答案

【问题标题】：HTML attribute orderingHTML 属性排序
【发布时间】：2025-11-22 15:05:02
【问题描述】：

这可能是一个主观问题（我希望不是）... 我使用 Visual Studio 开发网页设计和应用程序，通常使用 Bootstrap。当我将 CSS 文件拖放到 HTML 文档中时，Visual Studio 会生成以下代码

<link href="styles.css" rel="stylehseet" />

Bootstrap template 也使用此属性排序。

我个人更喜欢让我的属性保持固定宽度在前面，因为一切看起来更整洁；以我的排序与 Visual Studio & Bootstrap 的排序为例：

我的

<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="mystyles.css" />

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="foobar.js"></script>

他们的

<link href="bootstrap.min.css" rel="stylesheet" />
<link href="mystyles.css" rel="stylesheet" />

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="foobar.js" type="text/javascript"></script>

看看我的link 和script 标记中的属性是如何排列的？我认为这在维护文档时看起来更整洁，并且还可以进行块编辑。

所以我想知道的是；这只是个人喜好还是有正当理由将rel 和type 放在href 和src 之后？

【问题讨论】：

可能只是个人喜好，看起来像“他们”按字母顺序排列。
标签属性的顺序与解析器无关。所以这只是个人喜好
相关：*.com/questions/6126077/…
顺便说一句，脚本元素不需要 type 属性，除非你有 javascript 以外的东西。

标签： javascript html css attributes coding-style

【解决方案1】：

来自the HTML 4.01 specification：

元素可能具有关联的属性，称为属性，这些属性可能具有值（默认情况下，或由作者或脚本设置）。属性/值对出现在元素开始标记的最后一个“>”之前。任意数量的（合法的）属性值对（以空格分隔）可以出现在元素的开始标记中。 它们可以按任何顺序出现。

我在 HTML 5 规范中找不到任何能如此清楚地说明它的内容，但该规则没有改变。

这只是个人喜好。

【讨论】：

【解决方案2】：

对于 html 解析器，属性的顺序无关紧要。所以这是你的偏好。但它们总是按字母顺序排序和显示属性。即使您将它们排列在源代码中，您也会看到浏览器在开发人员视图中以字母顺序显示它们。

【讨论】：

【解决方案3】：

HTML5 标准表示，根据上述答案，顺序无关紧要。但如果是这种情况，就不需要缩进代码，因为像 Java 这样的编程语言不关心缩进。

最好的办法是遵循存储库中已经使用的约定。如果您是新手，下面的编码标准提供了许多人都遵循的元素的顺序。

属性顺序
HTML 属性应按此特定顺序排列，以便于阅读代码。

class
id, name
data-*
src, for, type, href, value31@987653 , alt
role, aria-*

类构成了很好的可重用组件，因此它们是第一位的。 ID 更具体，应谨慎使用（例如，用于页内书签），因此它们排在第二位。

来源：https://codeguide.co/#html-attribute-order

【讨论】：