通用HTML(5)-【進階格式篇】

本節介紹的元素標籤都是比較進階的,如果你是XHTML的初學者,可以看看就好,知道有這種功能即可。必學的二個標籤是div和span,這二個標籤配合CSS的潛力無窮,簡單的來說,CSS就是靠div分區來完成排版動作的,如果不是這樣,你也用不太到它,所以在這裡學不會沒關係,當你學CSS的時候才是不可不會。

map標籤很好用但你不一定會用到,它是用在當你有一大張的圖片(地圖),而你希望使用者的滑鼠點在不同的位置,會發生不同事情的時候(例如連到不同網頁)。至於base和basefont標籤因為會影響整個網頁的設定,所以在這裡不顯示範例結果,有興趣的網友可以自行測式。

元素標籤

div(區塊設定)、span(區段文字格式)、map(影像地圖)、area(地圖區域)、base(超連結根目錄)、basefont(基本字型)

area Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:這是map標籤的子元素,用來指定地圖上的連結區域與目標位置。

屬性:

  • class="類別":指定物件類別。
  • coords="point1_x, point1_y, point2_x, point2_y, ...":根據shape屬性列出坐標位置。
  • href="超連結位置”:指定連結到的網址或錨的位置。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • shape="連結區域的形狀(rect | circ | poly | def)":矩型(rect)、圓型(circ)、多邊型(poly)或預設(def)整張圖片。
  • style="樣式":設定顯示樣式。
  • target="目標視窗ID(_blank | _parent | _search | _self | _top)":指定網頁開啟的位置,若不指定則在原視窗開啟,通常使用_blank開新視窗,或設定視窗ID在指定的視窗中開啟。
  • title=" 標題":指定一個標題。

【範例】





  
  
  
  
  
  

【結果】

base Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:指定網頁根目錄的位置,所有相對路徑都會根據此位置進行連結。此元素必須放置在之前。

屬性:

  • href="超連結位置”:指定根目錄的網址。

【範例】

本網站的網址是http://www.moke.tw,若是宣告,則就會連結到http://www.google.com/logos/。

basefont Adobe Dreamweaver CS3

說明:預設字型的樣式。在HTML5中不被支援。

屬性:

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

【範例】

本元素不提供範例。

div Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:設定網頁中的區塊,通常配合CSS使用。

屬性:

  • align="水平位置(left | center | right)":指定段落的水平位置,不建議使用,已漸漸被CSS取代。
  • class="類別":指定物件類別。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • style="樣式":設定顯示樣式。
  • title=" 標題":指定一個標題。

【範例】

請參考CSS「溢出與最小高度」單元。

map Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:將指定圖片設定連結區塊。

屬性:

  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • name="物件名稱":給予圖片指定的usemap名稱。
  • title=" 標題":指定一個標題。

【範例】





  
  
  
  
  
  

【結果】

span Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:設定字型的CSS格式。

屬性:

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

【範例】

透過span來改變文字格式。

【結果】

透過span來改變文字格式。