2.5 HTML 格式化(Formatting)

格式化是为了提高文档可读性

如前所述,HTML的代码和HTML的显示是不同的。

HTML 标签 比如 <p> 只是用来让浏览器解释文档内容,不会被显示。

代码注释 用于提高代码可读性,也不会被显示。

此外,还有一些格式化代码也会被浏览器忽略,包括:

  • 换行(line-breaks)
  • 空行(empty lines)
  • 缩进(tabulations/indentation)

换行(Line-breaks)

HTML代码中的换行和空行会被浏览器忽略,只会被解释成单个空格。

<blockquote>
Web最早的想法是


通过网页


分享信息
</blockquote>
Web最早的想法是 通过网页 分享信息

为了加入起实际作用的换行符,你需要使用 <br> HTML元素:

<blockquote>
Web最早的想法是<br>通过网页<br>分享信息
</blockquote>
Web最早的想法是
通过网页
分享信息

换行使用<br/>也可以, Web的一个设计原则是包容性,如果业界习惯性的误用了某个符号,而支持它不会有什么坏的影响,那么就应该兼容。

缩进(Tab)和多个空格

“Tab” 按键以及多个空格在编辑器中通常用来对齐代码,和换行一样,也会被浏览器忽略,仅被当作一个空格。

<p>
  这 里 有 一 个 缩 进    符 号。
</p>

这 里 有 一 个 缩 进 符 号。

如果你想在单词前添加空格或者间距,你可以使用 &nbsp; 空格元素,或者使用CSS,这会在后续章节中讲解。

树形格式

我们通常使用树形格式来表示层级嵌套关系,在嵌套中,开始和关闭标签必须成对出现,否则文档结构就会被打乱。

<article><p>这段代码写成了<strong>一行</strong></p></article>

这段代码写成了一行

当代码增多时,这样写成单行的格式可读性很差,无法跟踪开始和关闭标签对,所以我们应该写成树形格式

<article>
  <p>
    这段代码写成了<strong>多行</strong>,虽然显示时仍然是一行,
    但是<em>可读性</em>要好得多。
  </p>
</article>

这段代码写成了多行,虽然显示时仍然是一行, 但是代码可读性要好得多。

树形格式的优点有:1.可以很容易的跟踪开始和关闭标签对;2.在一些编辑器中可被当作节点来折叠展开;3.元素间的归属层级关系清晰。

HTML代码可读性规范

没有强制规定的HTML格式化规则,但是我们建议遵循一些最佳实践:

  • 使用 缩进 来可视化HTML元素的嵌套层级关系
  • 把块状元素的开始和关闭标签放在单独的一行,把内容放在中间行
  • 把内联元素放在同一行(包括开始和关闭标签)