HTML 4.01 快速導覽 - 原始編排 <pre>

<pre> 為區塊元素 (block element) ,保留文字的原始編排方式。



起始標籤結束標籤
需要需要


舉例如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<pre>You ever have that feeling where you're not sure if 
you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk 
through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that 
be different from any other day?
I have dreamed a dream, but now that dream has gone 
from me.
Choice is an illusion, created between those with 
power, and those without.
Because I choose to.
Everything that has a beginning has an end.</pre>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:textexample34.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


利用瀏覽器 (broswer) 開啟,結果如下



我們可以看到 <pre> 保留文字原始的編排方式。


以下我們將所有文字複製一份放到 <pre> 之後,比較兩者瀏覽器的解譯
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<pre>You ever have that feeling where you're not sure if 
you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk 
through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that 
be different from any other day?
I have dreamed a dream, but now that dream has gone 
from me.
Choice is an illusion, created between those with 
power, and those without.
Because I choose to.
Everything that has a beginning has an end.</pre>
You ever have that feeling where you're not sure if 
you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk 
through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that 
be different from any other day?
I have dreamed a dream, but now that dream has gone 
from me.
Choice is an illusion, created between those with 
power, and those without.
Because I choose to.
Everything that has a beginning has an end.
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:textexample35.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


同樣用瀏覽器開啟,如下



所以, <pre> 完完整整的以文字原始編排方式呈現,若是沒有使用任何標籤 (tag) 的文字,原始的分行都會被忽略。


中英文術語對照
區塊元素block element
瀏覽器broswer
標籤tag


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

沒有留言: