通用HTML(1)-【文字字型篇】

學東西,最好是從最簡單而且能夠馬上看到結果的東西下手,因此在學網頁標籤語言的時候,我會建議從文字段落開始學起,我自己剛開始學的時候也是這個樣子,這樣比較容易會有成就感,對學習才會有興趣。

為什麼叫做「通用HTML」呢?在這裡建立的語法希望是任何瀏覽器都能適用的(因為我本身也不用IE),因此只有IE能使用的就盡量不會列出來,除非它真的很好用或是很常見。另外在屬性的部份,我並沒有列出Script語言所屬的事件(Event),因為這個要列下去就太長了…所以留給JavaScript的章節吧。每一篇的開始都會有元素的分類,主要是按照功能區分,在不同的功能中,我會把常見的放在前面,比較少用的放在後面,可以直接點選分類中的標籤名稱,就會連結到該語法的位置,如果是不做介紹的標籤,我會寫上名字,但是不做連結。標籤辭典的部份(連結到的內容),我就還是按照元素名稱的字母排序了。

可以寫網頁的工具軟體有很多,我相信會想學標籤語言的人應該多少都知道那些軟體該如何使用,所以我也不想花篇幅去介紹它了,這些軟體都很簡單,只要打開來稍微摸索一下,相信難不倒各位,每一個標籤後面我會註明它在那一套軟體中可以查詢得到(只提供常見軟體),查不到的也不必擔心,它還是可以使用的。嘗試著自己在「原始碼」中打上標籤,並且在瀏覽器裡顯示結果,相信很快地就能夠掌握這些XHTML的語法了。

元素標籤

h1~h6(標題)、font(字型)、b(粗體)、i(斜體)、u(底線)、strong(強調)、em(強調)、big(放大)、small(縮小)、s(刪除線)、strike(刪除線)、sup(上標)、sub(下標)、del(刪除)

關連文章:HTML5文字字型與標註

b Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤中的文字以粗體顯示。這是舊HTML的語法,在XHTML中不建議使用,可用<strong>取代。
屬性:

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

【範例】

<b>這是粗體字</b>

【結果】

這是粗體字

big Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:把標籤中的文字放大顯示(比預設大小還要大的字)。在HTML5中不被支援。
屬性:

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

【範例】

<big>放大字型</big>

【結果】

放大字型

del Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤內的文字以刪除的狀態顯示。
屬性:

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

【範例】

<del>刪除文字</del>

【結果】

刪除文字

em Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:強調標示中的字,通常以斜體表示。
屬性:

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

【範例】

<em>這是一段被強調的字</em>

【結果】

這是一段被強調的字

font Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:設定標示中文字的大小、顏色或字體。在HTML5中不被支援。
屬性:

  • class="類別":指定物件類別。
  • color="顏色":指定文字的顏色。
  • face="字體":指定文字的字體。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • size="大小”:指定文字的大小,預設值為3。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

<font color="blue" size="4">設定藍色且大小為4的字</font>
<br /><font face="標楷體" size="+2">設定字型為標楷體,且大小比原本大小多2級</font>

【結果】

設定藍色且大小為4的字
設定字型為標楷體,且大小比原本大小多2級

h1, h2, h3, h4, h5, h6 Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:代表標題的文字。
屬性:

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

【範例】

<h3 align="right">數字越大字越小,align可指定水平方向</h3>
<h6>H6是最小的標題</h6>

【結果】

數字越大字越小,align可指定水平方向

H6是最小的標題

i Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤中的文字以斜體顯示。這是舊HTML的語法,在XHTML中不建議使用,可用<em>取代。
屬性:

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

【範例】

<i>這是斜體字</i>

【結果】

這是斜體字

small Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:把標籤中的文字縮小顯示(比預設大小還要小的字)。
屬性:

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

【範例】

<small>縮小字型</small>

【結果】

縮小字型

strike
說明:將標籤中的文字劃上刪除線。在HTML5中不被支援。
屬性:

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

【範例】

<strike>劃上刪除線的文字</strike>

【結果】

劃上刪除線的文字

strong Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:強調標籤中的文字,內容將以粗體顯示。
屬性:

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

【範例】

<strong>想要強調的內容</strong>

【結果】

想要強調的內容

sub Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤中的文字下標。
屬性:

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

【範例】

K<sub>10</sub>

【結果】

K10

sup Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤中的文字上標。
屬性:

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

【範例】

K<sup>10</sup>

【結果】

K10

u Microsoft Office FrontPage Adobe Dreamweaver CS3
說明:將標籤中的文字以底線顯示。在網頁中的文字加上底線,可能會讓使用者誤以為是超連結。在HTML5中不被支援。
屬性:

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

【範例】

<u>底線文字</u>

【結果】

底線文字
Category: 網路基礎程式  Tags:
Share on Google+
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>