2.5 HTML 格式设置

当 空格可能已经无关紧要。

源网页：HTML Formatting

你的HTML 代码中写的内容和浏览器 显示的内容是有区别的。
我们已经看到了，像 <p>这样的HTML 标签只能被浏览器读取（知道写的是什么内容），而不会被浏览器 显示出来。
我们也看到了在你的代码中写HTML 注释，可以帮助人类阅读代码，而不会让这些注释被浏览器显示出来。

另一种被浏览器忽略的书写代码是whitespace，它包括:

• 换行
• 空行
• 制表（或缩进）

1. 换行

HTML 代码中的换行和空行（是一连串的换行）会被浏览器忽略。它们只占一个空格。

<blockquote>
网络的最初想法是，它应该是一个协作性的网络


空间


在这里，你可以通过分享信息进行交流。
</blockquote>

效果：

网络的最初想法是，它应该是一个协作性的网络。 空间 在这里，你可以通过分享信息进行交流。

为了真正的强制换行，你需要使用<br> HTML元素。

<p>在最好的时候，生活是完全<br>不可预知的。</p>

效果：

在最好的时候，生活是完全
不可预知的。

2. 制表

制表是通过按 "Tab "键获得的特殊字符。它通常会将光标移动到下一个制表符停止，但有时会转换为2个空格。

总之，和普通空格一样，制表符也是不可见的。它也会被浏览器忽略。

<p>
  让我们用   表格推送
  这篇文字。
</p>

效果：

让我们用表格推送这篇文字。

如果你想在一个字前添加空格，你必须使用CSS，我们在下一章中会讲到。

如果你想结束一个HTML元素，首先要结束它的所有子元素。

3. 树形格式

由于HTML元素之间可以相互嵌套，所以你必须要掌握好它们被打开的顺序，因为这将影响到它们被关闭的顺序。

<article><p>这段代码是在<strong>单行</strong>上写的。</p></article>

效果：

这段代码是在单行上写的。

由于HTML元素被打开的顺序可能很难掌握，所以建议用树形格式编写HTML。

<article>
  <p>
    这个代码是写在
    <strong>多</strong>
    行，但还是会
    显示在
    <em>单</em>
    行
  </p>
</article>

效果：

这个代码是写在 多 行，但还是会 显示在 单 行

树形格式可以直观地显示你的HTML代码的嵌套层。因此，很容易看出。

• <article> 是其祖先
• <p>是<strong>和<em>的父元素
• <strong>和<em>是兄弟元素

4. 编写HTML供你阅读

表单、空行、连续空格、断行，都会被计算机剔除，并全部转化为一个空格。

一个HTML文档既是人写的，也是人读的，只是被计算机读取。考虑到制表符、空格和分隔线并不影响浏览器阅读和显示网页的方式，你不妨以最适合你的方式来格式化你的文档。

关于HTML格式没有具体的规则，但有一些隐含的约定，特别是：

• 使用制表符来帮助可视化HTML元素的嵌套方式
• 将块级元素的开合标签放在同样的缩进
• 在一行中写入内联元素(包括开始和结束标记)