在多行上縮進HTML標記

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

Google HTML / CSS樣式指南建議在顯着提高可讀性時包裝長行，並提供三種技術，每種技術都包括最后一行屬性的結束> ：

1. 將長行分成多行可接受的長度：

<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. 通過將每個屬性放在自己的縮進行中來打破長行：

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

3. 類似於＃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 2

我個人認為這是一個很好的做法，我發現它使用多行更具可讀性。 我對我制作的網站使用相同的約定。 在我的大學里，我們學習了相同的慣例，並明確指出：

避免長代碼行

使用HTML編輯器時，向右和向左滾動以閱讀HTML代碼是不方便的。 盡量避免使用長度超過80個字符的代碼行。

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

Answer 3

您是否會發現更可讀的是將開始HTML標記中的結束>與最后一個元素內聯，或者像我在上面的示例中那樣在新行中保留？

我認為離開結束>更具可讀性但是當使用vscode時它無法正確折疊。

意外， 預期，

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>

這里的關鍵細節是結束>和實際內容之間缺乏空間。

以下所有示例均可在線檢查 ：

€<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 （記住差距！）