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>
The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.

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

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

At its best, life is completely
unpredictable.

制表符

制表符是通过“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没有特殊的格式规则,但是这里有一些潜规则,

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