網頁設計 – 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>

執行結果如下:

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

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

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

<html>

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

執行結果如下:

哈囉!這邊     有五個空白。

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

HTML 的預先格式化文字

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

沒關係,我們另外還有一個 <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 文章段落及排版 >>
FacebookGoogle+TwitterLinkedInPinboardPlurkPinterest更多 分享/轉寄 ...
文章標籤: