通用HTML(2)-【文字段落篇】

文字段落篇的特色是,大部份包在「段落標籤」裡的字,會和標籤外面的字在不同行呈現(就算原始碼是打在同一行),因此文章就會被分段了,有一些段落之間會多空一行,有一些則不會,行距的設定可以利用CSS來控制。

元素標籤

p(段落)、br(強迫換行)、ol(編號)、ul(項目符號)、li(項目)、center(置中)、blockquote(縮排)、pre(預先格式化)、dir(目錄清單)、menu(項目符號的的目錄清單)

關連文章:HTML5文字段落與特殊標籤

blockquote Microsoft Office FrontPageAdobe Dreamweaver CS3
說明:將標籤中的內容縮排顯示。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是一般段落


這是縮排文字

【結果】

這是一般段落

這是縮排文字

br Microsoft Office FrontPageAdobe Dreamweaver CS3
說明:強迫換行,但是仍然算同一段的內容,上下二行會貼在一起,相當於Word中的Shift+Enter。通常沒有結尾標籤,因此寫成「
」。
【範例】

我們是在同一段的字,
但是被強迫換行了。

【結果】

我們是在同一段的字,
但是被強迫換行了。

center Adobe Dreamweaver CS3
說明:把標籤中段落置中顯示,與

有一樣的效果。在HTML5中不被支援。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

把段落置中

把段落置中

【結果】

把段落置中

把段落置中

li Adobe Dreamweaver CS3
說明:項目符號和編號清單中的清單項目。CSS相關語法可參考「文字段落樣式」。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。
  • type="項目格式(disk | square | circle | 1 | a | A | i | I)":設定項目的格式,不建議使用,已漸漸被CSS取代。

【範例】

  • 項目符號1
  • 項目符號2
  1. 編號清單
  2. 編號清單

【結果】

  • 項目符號1
  • 項目符號2
  1. 編號清單
  2. 編號清單

ol Microsoft Office FrontPageAdobe Dreamweaver CS3
說明:定義一組編號清單,巢狀的子清單將會以縮排顯示。CSS相關語法可參考「文字段落樣式」。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • start="開始的數字":設定起始的數字。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。
  • type="項目格式(1 | a | A | i | I)":設定項目的格式,不建議使用,已漸漸被CSS取代。

【範例】

  1. 編號清單
  2. 編號清單
    1. 編號清單
    2. 編號清單
  1. 編號清單
  2. 編號清單

【結果】

  1. 編號清單
  2. 編號清單
    1. 編號清單
    2. 編號清單
  1. 編號清單
  2. 編號清單

p Microsoft Office FrontPageAdobe Dreamweaver CS3
說明:標示段落。
屬性:

  • align="水平位置(left | center | right)":指定段落的水平位置,不建議使用,已漸漸被CSS取代。
  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

段落一

段落二

【結果】

段落一

段落二

pre Microsoft Office FrontPageAdobe Dreamweaver CS3
說明:在

標籤中的內容,將不會被瀏覽器重新設定顯示的格式,因此無論是斷行或是空白,都會按照原始碼中的顯示。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。
  • width="寬度":指定文字的行寬,不建議使用,已漸漸被CSS取代。

【範例】

這一段          文字
是一般的內容


當你套上          這個標籤的時候
斷行和半形的空白都會保留

【結果】

這一段 文字 是一般的內容

當你套上         這個標籤的時候
斷行和半形的空白都會保留

ul Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:定義一組項目符號,巢狀的子清單將會以不同符號和縮排顯示。CSS相關語法可參考「文字段落樣式」。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。
  • type="項目格式(disk | square | circle)":設定項目的格式,不建議使用,已漸漸被CSS取代。

【範例】

  • 項目符號
  • 項目符號
    • 項目符號
    • 項目符號

【結果】

  • 項目符號
  • 項目符號
    • 項目符號
    • 項目符號