HTML 4.01 快速導覽 - 換行(列) <br / >

<br / > 為行內元素 (inline element) ,這是個獨立標籤 (tag) ,瀏覽器 (broswer) 一旦解讀到這個標籤就會換行。



這裡,我們習慣上說橫的是行,但是其他地方,例如數學或程式語言,習慣上會講橫的是列,直的是行。


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


<br / > 有幾個屬性
屬性Deprecated or Obsolete
clearnone
left
right
all
HTML 4 only, Obsolete in HTML 5


舉例如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
You ever have that feeling where you're not sure if 
you're awake or still dreaming?<br / >
A prison for your mind.<br / >
Free your mind.<br / >
Believe the unbelievable.<br / >
There is no spoon.<br / >
I can only show you the door, you have to walk 
through it.<br / >
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/
     檔名:textexample32.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


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



這裡的 <br / > ,實際上應該寫成 <br /> ,也就是斜線後不需要有一個空格,但由於 Blogger 會將 Syntaxhighlighter 中的 &lt;br /&gt; 直接當換行標籤,因此我們多留一個空格,使 HTML 原始碼能正常顯示。


我們可以看到使用 <br /> 標記的地方都會直接換行,而沒有用 <br /> 標記的文字則是統統擠在一起,也就是說,即使我們自己有分行,然而瀏覽器只會以 <br /> 標籤作為分行的依據。


若是不用 <br /> ,也可以使用 <pre> , <pre> 會保留文字原始的編排方式,兩者比較如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
You ever have that feeling where you're not sure if 
you're awake or still dreaming?<br / >
A prison for your mind.<br / >
Free your mind.<br / >
Believe the unbelievable.<br / >
There is no spoon.<br / >
I can only show you the door, you have to walk 
through it.<br / >
<pre>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/
     檔名:textexample33.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


同樣用瀏覽器開啟,如下



這裡, <pre> 完完整整的以文字原始編排方式呈現。
中英文術語對照
行內元素inline element
標籤tag
瀏覽器broswer


您可以繼續參考



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


參考資料

沒有留言: