網頁設計 – HTML 基本排版 - 博全科技有限公司 PHD Technology Co., Ltd.

在瞭解 HTML 文件結構之後，您已經知道，不論您如何在 <body> 標籤內將任何文字換行，網頁的結果其實還是不會換行，而且不論您加了多少空白，始終最多看到的結果還是只有一個空白，這樣怎麼行呢？

當然不行，我們可是要在網頁上放一些文章，或是寫一些產品介紹的啊，所以一定要有方式可以讓我們做一些基本排版呀。

HTML 的換行

換行其實很簡單，加入 標籤就可以了。

<html>

  <head>
    <title>網頁設計教學 HTML - 換行</title>
  </head>
  
  <body>
    哈囉！<br><br>我換了 2 行喔 ...
  </body>
  
</html>

執行結果如下：

哈囉！

我換了 2 行喔 ...

換行為什麼叫 呢？它是取自英文 a line break 斷行之意，而 break 就是中斷、換行的動作， 取自 break 的前兩個字母縮寫。這樣您記起來了嗎？

另外，眼尖的你可能有發現到，一般 HTML 的標籤不是都有像是 <body> 這樣的開始標籤，和 </body> 這樣的結束標籤嗎？為何 沒有呢？原因很簡單，因為 並不像其它標籤是一個「區塊」，在它所出現的地方就是立即要強迫換行的地方了，它不會包住任何其它的內容，所以它不需要有 結束標籤。聰明如你，這樣應該很容易懂吧！

HTML 的空白 (空格)

為什麼我編寫的 HTML 中，加了很多空白還是無效呢？因為我們在 HTML 文件結構這篇有提到，網頁瀏覽器其實是不管你的換行和多餘的空白的，即使所有內容都寫在同一行，瀏覽器還是會依您所下達的標籤語法去判斷要如何顯示。

就像上面的換行 連續用了 2 次，就換了兩行，而且 後面直接接著文字，它還是出現在換兩行後的最開頭，不會跟「哈囉！」連接在一起。

也就像在 HTML 文件結構這篇的最後，我們有建議您儘量讓不同的標籤區塊去換行和內縮 HTML 內容，這樣您會比較好閱讀 (但對電腦而言是沒差的) ，也比較不容易寫錯，一個好的網頁設計師通常會這麼做。也因此，如果因為換行或內縮就讓你實際的內容格式跑掉了，那可不行呢！所以，當然瀏覽器預設對於內文換行和多餘空白是當作視而不見的。

因此，如果您直接在文字和文字中間空白了 5 次，或放更多的空白，實際上它還是只會有一個空白。例如：

<html>

  <head>
    <title>網頁設計教學 HTML - 無效空白</title>
  </head>
  
  <body>
    哈囉！這邊     空白了五次，但只有一個空白效果。
  </body>
  
</html>

執行結果如下：

哈囉！這邊 空白了五次，但只有一個空白效果。

上面的結果中，多餘的空白是不會有作用的。

而如果我們希望能夠連續顯示好幾個空白的話，可以像下面這樣以   代替空白：

<html>

  <head>
    <title>網頁設計教學 HTML - 空白 (空格)</title>
  </head>
  
  <body>
    哈囉！這邊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有五個空白。
  </body>
  
</html>

執行結果如下：

哈囉！這邊     有五個空白。

在 HTML 語法中，有一些已定義好的特殊符號，它們是以 "&" 為開頭，以 ";" 做結尾，之後我們會在別的篇章另外說明還有哪些常用的特殊符號。而   就是屬於 HTML 的特殊符號之一「空格符號」，其 nbsp 取自於英文 a non-breaking space 的英文簡稱，其原意是「不會被間斷的空白」。

HTML 的預先格式化文字

上面的換行或空格方式，不是要打 就是要用   ，如果偶爾用之還好，若一篇文章中許多地方用到，您可能會覺得有點麻煩吧 …

沒關係，我們另外還有一個 <pre> 的標籤，可以用來解決您的困擾：

<html>

  <head>
    <title>網頁設計教學 HTML - 預先格式化文字</title>
  </head>
  
  <body>
  
<pre>
哈囉！這邊   有五個空白。

我沒有加 &lt;br&gt; 也換行囉。
</pre>

  </body>
  
</html>

執行結果如下：

哈囉！這邊   有五個空白。

我沒有加 <br> 也換行囉。

看到上面的執行結果之後，應該會覺得 <pre> 標籤還蠻方便的吧！想空幾格就空幾格，想換幾行就換幾行，不用再打一些標籤語法和符號上去。

這麼好康的 <pre> 標籤語法，它的 pre 取自於英文 preformatted text ，即「預先格式化文字」的簡稱，用白話一點的方式說，就是在 <pre> 標籤區塊中的文字，您已經自己定好換行和空白的格式了，請網頁瀏覽器就按照那樣顯示就對了！

不過有個小地方您也要注意一下，看看上面 <body> 標籤中所包的 <pre> 這整個區塊，我不在把它內縮進去，而是讓它出現在每一列的開頭。那是因為既然 <pre> 已是「預先格式化的文字」，那麼如果您又為了 HTML 好閱讀而把它內縮的話，就會讓實際顯示在網頁瀏覽器上的執行結果文字也被內縮喔！所以使用時要注意這一點。

<< 上一篇： HTML 文件結構

[ HTML 教學目錄 ]

下一篇： HTML 文章段落及排版 >>

※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。