HTML 4.01 快速導覽 - 段落編排

HTML 4.01 提供一些網頁區塊元素 (block element) ，可將網頁切割成不同的部份，像是文章的段落一樣，例如

  • 段落文字 - <p>
  • 原始編排 - <pre>
  • 區塊元素 - <div>
  • 區塊引用 - <blockquote>
  • 換行（列） - <br />


舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p>使用&lt;p&gt;的第一行
使用&lt;p&gt;的第二行</p>
<pre>使用&lt;pre&gt;的第一行
使用&lt;pre&gt;的第二行</pre>
<div>使用&lt;div&gt;的第一行
使用&lt;div&gt;的第二行</div>
<blockquote>使用&lt;blockquote&gt;的第一行
使用&lt;blockquotediv&gt;的第二行</blockquote>
使用&lt;br / &gt;的第一行<br / >
使用&lt;br / &gt;的第二行<br / >
沒有使用&lt;br / &gt;的第一行
沒有使用&lt;br / &gt;的第二行
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：textexample65.html
     功能：示範 HTML 4.01 標記語言的使用
     作者：張凱慶
     時間：西元 2011 年 5 月 -->


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



第 6 行與第 7 行使用 <p> 元素 (element)
6
7
<p>使用&lt;p&gt;的第一行
使用&lt;p&gt;的第二行</p>


<p> 就是文字段落的標籤 (tag) ，我們可以看到 <p> 裡頭的文字並不會如原始檔分行。


第 8 行與第 9 行使用 <pre> 元素
8
9
<pre>使用&lt;pre&gt;的第一行
使用&lt;pre&gt;的第二行</pre>


<pre>會保留原始的編排方式，因此 <pre> 裡頭的文字如同原始檔分行。


第 10 行與第 11 行使用 <div> 元素
10
11
<div>使用&lt;div&gt;的第一行
使用&lt;div&gt;的第二行</div>


我們可以看到 <div> 與 <p> 大致相同，但 <div> 主用是給網頁分區用的。


第 12 行與第 13 行使用 <blockquote> 元素
10
11
<blockquote>使用&lt;blockquote&gt;的第一行
使用&lt;blockquotediv&gt;的第二行</blockquote>


<blockquote> 用在引用語，具有縮排效果。


第 14 行與第 15 行使用 <br / > 元素
10
11
使用&lt;br / &gt;的第一行<br / >
使用&lt;br / &gt;的第二行<br / >


有 <br / > 就會分行，第 16 行與第 17 行沒有使用 <br / > ，就不會分行。


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


您可以繼續參考



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


參考資料

標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)