HTML 格式

人类书写出来的HTML代码和浏览器展现出来的样子是完全不同的。

通过以前的文章我们已经知道，像HTML标签仅仅被浏览器所阅读（用来知道你的内容属于什么类型），但是不会被展示到页面上。

我们也知道，我们可以在我们的代码中写一些注释来帮助其他人读懂代码。但这些注释都不会被浏览器展示到页面上。

还有一些其他的内容也是会被浏览器_忽略_的：

• 换行符
• 空行
• 制表符（或多个空格）

换行

在HTML代码中，换行和空行（由多个换行形成的空行）都会被浏览器所忽略。他们只会被视作一个空格。

<blockquote>
The original idea of the web was that it should be a collaborative


space


where you can communicate through sharing information.
</blockquote>

如果你想在文档中强制添加一个换行，你需要使用<br> HTML 元素：

<p>At its best, life is completely<br>unpredictable.</p>

制表符

制表符是通过“Tab”键输入的特殊的字符。它通常让光标置于下一个制表位，但是有时候它被转成两个空格。

Anyway，像连续的空格或者制表符在网页中都是不可见的，他们会被浏览器所忽略：

<p>
  Let's push      this text
  with tabulations.
</p>

如果你想在文字前面添加空格，你可能要用到CSS，那么想你需要在下一章学习啦。

如果你想闭合一个元素，首先你要闭合它的子元素。 {: .info}

嵌套格式

HTML代码是相互嵌套的，你必须在书写代码的时候保持嵌套规则。

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

像上面这样，如果把代码写在一行，嵌套元素比较多的话，很难记得开始标签和结束标签的位置，容易影响标签的闭合位置，导致页面错乱。。

<article>
  <p>
    这段代码写了
    <strong>多行</strong>
    但是它
    被显示在
    <em>一行</em>
    里
  </p>
</article>

这种嵌套格式在HTML代码中被很清晰的展现出来，并且能明显展示出元素之间的关系：

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

代码是写给人看的，只是机器偶尔读一读

制表符，空行，连续的空格，换行符都会被机器所忽略，而且都会被一个空格替代。

代码是写给人看的，只是机器偶尔读一读。制表符，空行，连续的空格，换行符不会影响浏览器解析和展示，你需要把你的HTML文档写的更加可读。

HTML没有特殊的格式规则，但是这里有一些潜规则，

• 使用制表符来更好的展示元素的嵌套
• 把块级元素的开始和闭合标签分别写在一行
• 把內联元素单独写在一行（包括开始和闭合标签）

版权声明

本博客文章均为 范明非 原创或翻译，采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
原文地址： https://fanmingfei.com/posts/2015-02-06-html-formatting.html