在多行上缩进 HTML 标签答案

【问题标题】：Indenting HTML tags on multiple lines在多行上缩进 HTML 标签
【发布时间】：2017-07-06 09:27:16
【问题描述】：

我找不到关于如何在多行上缩进 HTML 标记的指南，而且我目前使用的解决方案并不能真正让我满意。

假设我们有一个非常长的div 声明，例如：

<div data-something data-something-else data-is-html="true" class="html-class another-html-class yet-another-html-class a-class-that-makes-this-declaration-extremely-long" id="just-a-regular-id">

为了避免在发现这些大行时水平滚动，我通常采用以下方式缩进：

<div 
    data-something 
    data-something-else 
    data-is-html="true" 
    class="html-class another-html-class yet-another-html-class a-class-that-makes-
    this-declaration-extremely-long" 
    id="just-a-regular-id"
>
    <p>Some element inside the DIV</p>
</div>

我认为在可读性方面效果很好，但我有些担心。

这种方式被认为是一种好的做法吗？
您是否会发现将结束的> 留在与最后一个元素内联的开始 HTML 标记中，或者像我在上面的示例中所做的那样位于新行上？
您还有其他首选方式来处理超长 HTML 声明吗？

如果您知道一些涵盖此特殊情况的 HTML 样式指南的好资源，请随时分享，因为我没有在网上找到任何具体的内容。

【问题讨论】：

标签： html coding-style indentation

【解决方案1】：

Google HTML/CSS Style Guide 建议在显着提高可读性时将长行换行，并提供三种技术，每种技术都包括带有最后一行属性的结束 >：

将长行分成多行可接受的长度：

<div class="my-class" id="my-id" data-a="my value for data attribute a"
    data-b="my value for data attribute b" data-c="my value for data attribute c">
    The content of my div.
</div>

通过将每个属性放在自己的缩进行上来打破长行：

<div
    class="my-class"
    id="my-id"
    data-a="my value for data attribute a"
    data-b="my value for data attribute b"
    data-c="my value for data attribute c">
    The content of my div.
</div>

类似于#2，除了第一个属性在首行，后续属性缩进以匹配第一个属性：

<element-with-long-name class="my-class"
                        id="my-id"
                        data-a="my value for data attribute a"
                        data-b="my value for data attribute b"
                        data-c="my value for data attribute c">
</element-with-long-name>

在我看来，当元素包含内容时，#3 不会提高可读性。

【讨论】：

【解决方案2】：

我个人认为这是一种很好的做法，而且我发现使用多行代码更具可读性。我对自己制作的网站使用相同的约定。在我的大学里，我们被教导相同的约定，它清楚地指出：

避免长代码行

使用 HTML 编辑器时，左右滚动阅读 HTML 代码很不方便。尽量避免代码行超过 80 个字符。

公约的其余部分可以在这里找到： https://www.w3schools.com/html/html5_syntax.asp

【讨论】：

【解决方案3】：

您是否会发现将结束符 > 留在与最后一个元素内联的开始 HTML 标记中，或者像我在上面的示例中所做的那样放在新行上？

我认为留下结尾的> 更具可读性，但是在使用 vscode 时它不能正确折叠。

没想到，预期的，

【讨论】：

【解决方案4】：

以下是我的首选方法：

<div
  class="my-class"
  id="my-id"
  data-a="my value for data attribute a"
  data-b="my value for data attribute b"
  data-c="my value for data attribute c"
  >The content of my div.
</div>

这里的关键细节是结束 > 和实际内容之间没有空格。

以下所有例子都可以是checked online：

€<span itemprop="price">13.50</span>

结果为@987654325@

€<span 
   itemprop="price"

     Arbitrary carriage returns and spaces here 
     BUT before closing the tag

                                   >13.50
 </span>

也导致€13.50

但是

€<span 
   itemprop="price">   <!-- Carriage return + spaces in this line -->
   13.50
 </span>

或

€          <!-- Carriage return + spaces in this line -->
<span 
  itemprop="price">      <!-- Carriage return + spaces in this line -->
  13.50
</span>

两个结果都是€ 13.50（注意差距！）

【讨论】：