Question

我找不到如何在多行上缩进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的样式指南的好资源，请随意分享，因为我没有在网上找到任何特定内容。

Answer 1

我个人认为这是一个很好的做法，我觉得使用多行可读性更高。我对我制作的网站使用相同的约定。在我的大学里，我们教授相同的惯例，并明确指出：

避免长代码行

使用HTML编辑器时，向右和向左滚动以阅读HTML代码是不方便的。尽量避免使用长度超过80个字符的代码行。

其他约定可以在这里找到： https://www.w3schools.com/html/html5_syntax.asp

Answer 2

您会发现可读性更强的是，在开头的HTML标记中与最后一个元素内联，或者像我在上面的示例中那样在新行中保留结束>？

我认为离开结尾>更具可读性，但是在使用vscode时无法正确折叠。

出乎意料，预期，

Answer 3

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不会提高可读性。

Answer 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>

得出€13.50

€<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（请注意差距！）

在多行上缩进HTML标记

4 个答案: