段落排版

  就如同我們在編輯一般文字文件(Ex:Word檔)時,我們會需要對文字做編排,為了讓讀者閱讀起來比較清楚,在網頁的編輯上我們也會需要對文字的內容做排版。以下所要介紹的是如何對網頁中的文字部份做排版。

段落<p></p>

  在寫文章時,我們會把文字分成一個段落一個段落。在HTML編寫當中,我們會使用<p></p>來作為一個段落的標籤。也就是說,在這一對段落標籤內的文字將會被視為一個段落。以下是一個例子:

語法:

<p>台灣大學</p>

<p>電信工程學研究所</p>

<p>DISP實驗室</p>

結果:

台灣大學

電信工程學研究所

DISP實驗室

  我們可以發現這三行彼此之間會有一個間隔,以用來區別不同的段落。另外<p>標籤其實是不需要後面的結尾標籤的,不過為了清楚起見,建議還是要加上後面的結束標籤。

斷行<br>

  有時候我們想要把文字換到下一行,但卻不想像上面的例子一樣,中間會隔一行分段,那我們就可以使用斷行標籤<br>。注意:這個斷行標記是不需要結尾標籤的。斷行標籤的使用方式就是直接在你要換行的地方插入<br>就可以了,也就是把一般打字時我們按enter的地方換成<br>標籤。

語法:

台灣大學<br>

電信工程學研究所<br>

DISP實驗室<br>

結果: 台灣大學
電信工程學研究所
DISP實驗室

  我們可以發現,跟上面的段落比較,這裡使用斷行標籤可以讓不用段落的文字排列較緊密。

原始排版<pre></pre>

  有時候我們會希望文字用特殊的排版出現,而我們比較不想去另外想辦法做排版,我們可以用這個原始排版標籤,來讓標籤內的文字以原來排版的型式出現。我們直接看下面的列子便可一目了然:

語法: <pre>
    台 灣 大 學
電 信 工 程 學 研 究 所
     DISP實驗室
</pre>
結果:
    台 灣 大 學
電 信 工 程 學 研 究 所
     DISP實驗室
		

排版屬性(置中、置左、置右)

  在編輯文字檔時,我們常常會需要對一段文字做置中、置左或置右排版。這些排版的方式在HTML語言裡面是以屬性的方式出現。所謂屬性的意思就是它們是加在原有的標籤內所使用,以改變這些標籤內的物件之屬性。例如我們可以對一個斷落的文字做排版:

語法:

<p align="left" >台灣大學</p>

<p align="center">電信工程學研究所</p>

<p align="right" >DISP實驗室</p>

結果:

台灣大學

電信工程學研究所

DISP實驗室

  其中如上所示,align="left"、 align="center"、align="right"分別代表了置左、置中、和置右。另外還有align="justify"就是一般word裡所用到的分散對齊。


Author: Pao-Yen Andy Lin          E-mail: alexndy@gmail.com
Copyright © 2010 DISP Lab, Graduate Institute of Communication Engineering, NTU
10617 臺北市羅斯福路四段一號 明達館531室 TEL: 3366-3662