網頁設計 – HTML 基本排版
在瞭解 HTML 文件結構 之後，您已經知道，不論您如何在 <body> 標籤內將任何文字換行，網頁的結果其實還是不會換行，而且不論您加了多少空白，始終最多看到的結果還是只有一個空白，這樣怎麼行呢？
當然不行，我們可是要在網頁上放一些文章，或是寫一些產品介紹的啊，所以一定要有方式可以讓我們做一些基本排版呀。
HTML 的換行
換行其實很簡單，加入 <br> 標籤就可以了。
<html>
<head>
<title>網頁設計教學 HTML - 換行</title>
</head>
<body>
哈囉！<br><br>我換了 2 行喔 ...
</body>
</html>
執行結果如下：
哈囉！ 我換了 2 行喔 ...
換行為什麼叫 <br> 呢？它是取自英文 a line break 斷行之意，而 break 就是中斷、換行的動作， <br> 取自 break 的前兩個字母縮寫。這樣您記起來了嗎？
另外，眼尖的你可能有發現到，一般 HTML 的標籤不是都有像是 <body> 這樣的開始標籤，和 </body> 這樣的結束標籤嗎？為何 <br> 沒有呢？原因很簡單，因為 <br> 並不像其它標籤是一個「區塊」，在它所出現的地方就是立即要強迫換行的地方了，它不會包住任何其它的內容，所以它不需要有 </br> 結束標籤。聰明如你，這樣應該很容易懂吧！
HTML 的空白 (空格)
為什麼我編寫的 HTML 中，加了很多空白還是無效呢？因為我們在 HTML 文件結構 這篇有提到， 網頁瀏覽器 其實是不管你的換行和多餘的空白的，即使所有內容都寫在同一行，瀏覽器還是會依您所下達的標籤語法去判斷要如何顯示。
就像上面的換行 <br> 連續用了 2 次，就換了兩行，而且 <br> 後面直接接著文字，它還是出現在換兩行後的最開頭，不會跟「哈囉！」連接在一起。
也就像在 HTML 文件結構 這篇的最後，我們有建議您儘量讓不同的標籤區塊去換行和內縮 HTML 內容，這樣您會比較好閱讀 (但對電腦而言是沒差的) ，也比較不容易寫錯，一個好的網頁設計師通常會這麼做。也因此，如果因為換行或內縮就讓你實際的內容格式跑掉了，那可不行呢！所以，當然瀏覽器預設對於內文換行和多餘空白是當作視而不見的。
因此，如果您直接在文字和文字中間空白了 5 次，或放更多的空白，實際上它還是只會有一個空白。例如：
<html>
<head>
<title>網頁設計教學 HTML - 無效空白</title>
</head>
<body>
哈囉！這邊 空白了五次，但只有一個空白效果。
</body>
</html>
執行結果如下：
哈囉！這邊 空白了五次，但只有一個空白效果。
上面的結果中，多餘的空白是不會有作用的。
而如果我們希望能夠連續顯示好幾個空白的話，可以像下面這樣以 代替空白：
<html>
<head>
<title>網頁設計教學 HTML - 空白 (空格)</title>
</head>
<body>
哈囉！這邊 有五個空白。
</body>
</html>
執行結果如下：
哈囉！這邊 有五個空白。
在 HTML 語法中，有一些已定義好的特殊符號，它們是以 "&" 為開頭，以 ";" 做結尾，之後我們會在別的篇章另外說明還有哪些常用的特殊符號。而 就是屬於 HTML 的特殊符號之一「空格符號」，其 nbsp 取自於英文 a non-breaking space 的英文簡稱，其原意是「不會被間斷的空白」。
HTML 的預先格式化文字
上面的換行或空格方式，不是要打 <br> 就是要用 ，如果偶爾用之還好，若一篇文章中許多地方用到，您可能會覺得有點麻煩吧 …
沒關係，我們另外還有一個 <pre> 的標籤，可以用來解決您的困擾：
<html>
<head>
<title>網頁設計教學 HTML - 預先格式化文字</title>
</head>
<body>
<pre>
哈囉！這邊 有五個空白。
我沒有加 <br> 也換行囉。
</pre>
</body>
</html>
執行結果如下：
哈囉！這邊 有五個空白。 我沒有加 <br> 也換行囉。
看到上面的執行結果之後，應該會覺得 <pre> 標籤還蠻方便的吧！想空幾格就空幾格，想換幾行就換幾行，不用再打一些標籤語法和符號上去。
這麼好康的 <pre> 標籤語法，它的 pre 取自於英文 preformatted text ，即「預先格式化文字」的簡稱，用白話一點的方式說，就是在 <pre> 標籤區塊中的文字，您已經自己定好換行和空白的格式了，請網頁瀏覽器就按照那樣顯示就對了！
不過有個小地方您也要注意一下，看看上面 <body> 標籤中所包的 <pre> 這整個區塊，我不在把它內縮進去，而是讓它出現在每一列的開頭。那是因為既然 <pre> 已是「預先格式化的文字」，那麼如果您又為了 HTML 好閱讀而把它內縮的話，就會讓實際顯示在網頁瀏覽器上的執行結果文字也被內縮喔！所以使用時要注意這一點。
| << 上一篇： HTML 文件結構 | [ HTML 教學目錄 ] | 下一篇： HTML 文章段落及排版 >> |
※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。
