㊣傲楓曰：好的排版能夠帶來異想不到的效果。 








傲楓前言
：







　上一章傲楓曾經介紹過，在<body>與 </body>之間，加進一些簡單
　的文字，就可以建立一個初具規模的網頁，但也許有人會發現，明
　明我在記事本中已經排版完成，為什麼寫出來的網頁卻雜亂無章？

　原因很簡單，因為html語法具有它特定的排版標籤，並不像word一
　樣，只要按下 enter就可以讓文字換行。接下來就要介紹如何利用
　標籤來編排網頁。

　PS. 網頁中的元件(包括文字、圖片、表格等等)，都可以利用以下
　　　介紹的標籤來排版！















換行
：







　html文件並不是按下 enter就會自動換行，它必須使用這些標籤。

<p>...</p>
　<p> 代表一個段落的開始，用了它以後，文字會自動換行，</p>則
　代表此段落結束。


<br>
　它可以使文字換到下一行。注意！它並沒有配對標籤。





寫法效果


第一段<p>第二段</p>第一段
第二段


換到<br>下一行換到
下一行



















對齊
：







　使用word的人一定知道，可以讓文字靠左靠右，或是置中。
　html文件也可以做到。

<p align=left>...</p>
<p align=center>...</p>    
<p align=right>...</p>
　這分別是靠左、置中與靠右的寫法。沒錯，其實只要用<p>...</p>
　中 align這個屬性就可以做到，所以除了對齊的功能外，也有上述
　的換行功能。

<center>...</center>
　夾在這組配對標籤中的元件，將會被置中。















固定模式
：







<pre>...</pre>
　這組配對標籤好用極了！你可以先用平常在word中的排版方式，將
　網頁的主要內容搞定，再用這個標籤將主要內容全部包起來，最後
　在瀏覽器看到的結果，不管是空格、空行、換行或是文字的位置，
　都會依你原來的格式乖乖排好。
















縮排
：







<blockquote>...</blockquote>
　使用這個標籤，文字將會向右縮排，相當於打字時按下「 Tab」鍵
　的效果。如果使用兩組的話，就會縮排兩單位，依此類推。
















範例
：







<html>
<body>
傲楓，
也叫綠痕，
又叫做轉轉龜。

<p>你總以為愛是討你歡心，</p>
<p>對你好不過是天經地義，</p>
<p>卻不曾關心我也有情緒。</p>
<p>我的付出需要你的熱情回應。
<br>是我寵壞了你
<br>溺愛驕縱了你的心</p>

小痞子，
<br>逛大街，
<br>沿街被人扁。

<p align=left>我走路愛靠左邊</p>
<p align=center>我走路愛走中間</p>
<p align=right>我走路愛靠右邊</p>

<center>我是兄弟象的中間手
<br>我是味全龍的中間手
<br>我是三商虎的中間手</center>

<pre>男人不該讓女人流淚



至少我盡力而為
                           相　　信　　我</pre>

<blockquote>縮排一次</blockquote>
<blockquote><blockquote>縮排兩次</blockquote></blockquote>

</body>
</html>


結果呈現












回上一章　基本架構　　　　　　到下一章　文字之美