轉關於水平線和center標籤和pre預格式化

很明顯，第一段中是預設的居左顯示，而且源檔案中的手動換行都是不起效的，第二段與第一段的間隔是很大的，而且第二段的末尾能夠看出，本段的的對齊是 置中的，這種 置中方式還有一種寫法，就是把 html中本身就有一對 <center>內部文字</center>置中標記，在對網頁文字進行布局時，經常需要將網頁中的文字進行 置中對齊，甚至在插入圖片或其他對象時，都會用到對齊 置中標記，我們可以把這對標記嵌套在p標記的外部，如，< center><p>中間顯示的文字將以段落並且文體 置中的形式體現</p></ center>，其效果與第二段是一致的。

      在html中還有一對<pre></pre>叫預格式化標記，也成為預排版標記，利用這對標記對網頁中文欄位落進行預格式化，在輸入過程中，按鍵盤上的斷行符號鍵，就可以產生一個段落，我們來看下面的原始碼及頁面，學習center和pre的用法。

< center>
<pre>
編號      姓名         國籍      口頭禪
001     蠟筆小新       日本       老婆！
</pre>
</ center>

可以看出<pre>標記允許保留你在原始碼中輸入的空白和斷行符號，並且這部分文字是置中的。

此外，在網頁製作中，我經常會用到水平線，我們在瀏覽網頁的時候，也是經常會看到網頁中有一條水平的直線，水平線標記<hr>用來把頁 面分成幾個部分，比如最簡單的，區分開文章的標題和本文，同時我們還可以根據需要對網頁中的水平線進行一系列的設定，下面我們就來看一個例子，同時將hr 的屬性給同學們做以講解。

1 <hr align=" center" color="red" size=2 width="500px">
2 <hr align="right" size="4"  width="50%">
3 <hr noshade align="left" size="4" width="30%">

 我一共加了三條水平線，其中的一些屬性我們都見過，我現在用屬性來描述一下這三條線：

1.插入一條置中的高度為2像素、長度為500px的紅色水平線。

2.插入一條居右的高度為4像素、長度為占整個頁面寬度的50%的水平線。

3.插入一條居左的高度為4像素、長度為占整個頁面寬度的30%的無陰影水平線。

我們來看一下：先體會一下預設顏色下有陰影2線和無陰影3線的區別。      

 這裡我要重點說的是描述長度屬性值的兩種方式：絕對值（像素）和相對值（百分比），同樣是上個頁面，我們把頁面視窗的大小調整一下，如：