HTML中的代码格式缩进显示在文档中

下面是我从Anki（Flashcard创建程序）复制和粘贴的HTML代码。代码运行良好。（背景：闪存卡是一个编程问题）

此代码的作用是什么？1meta http equiv=“X-UA-Compatible”content=“IE=edge”

在浏览器上呈现的代码：

显然，此代码在其当前格式中不可读。为了解决这个问题，我添加了适当的缩进

<meta content="width=window-width, initial-scale=1.0" name="viewport">

What does this code do?
<div>
  <div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
    <pre style="line-height: 25px;">
      <table class="highlighttable" style="font-family: Arial;">
        <tbody>
          <tr>
            <td>
              <div 10px"="" class="linenodiv" padding-right:="">
                <pre style="line-height: 125%">1</pre>
              </div>
            </td>
            <td class="code">
              <div class="highlight">
                <pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span> <
                  span style="color: #7D9029">http-equiv</span>
                  <span style="color: #666666">=</span>
                  <span style="color: #BA2121">"X-UA-Compatible"</span>
                  <span style="color: #7D9029">content</span>
                  <span style="color: #666666">=</span>
                  <span style="color: #BA2121">"IE=edge"</span>&gt;
                </pre>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </pre>
  </div>
  <div>
    <center>
      <br>
    </center>
  </div>
</div>

这个代码是做什么的？
1.
元<
span style=“color:#7D9029”>http等效
=
“X-UA-Compatible”
内容
=
“IE=边缘”

奇怪的是：上面的缩进现在出现在HTML文档中

---

这不应该发生，对吗？我认为HTML中的换行符对用户不可见？

这是因为

空白

是

之前的

（由浏览器保留）。这是为了让您可以缩进代码。通常，当您希望以HTML呈现代码时，可以去掉缩进：

            <td class="code">
              <div class="highlight">
                <pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>&gt;
                </pre>
              </div>
            </td>

元
http等价
=
“X-UA-Compatible”
内容
=
“IE=边缘”

请注意，您不需要在

行本身上执行此操作（这就是为什么meta部分显示所需缩进的原因）

<pre><code class="language-html">(... html code ...)</code></pre>

如果您打算经常使用代码段，那么像这样的库将使您的生活变得更加轻松，并且值得花费大量的开销（事实上，它是一个非常轻量级的库）：

（…html代码…）

---

这正是应该发生的事情，因为您正在使用应该使用格式化的标记。

<pre><code class="language-html">(... html code ...)</code></pre>