a元素 (anchor)，為「線內」特性元素，定義標籤內容的超連結以及做成連結對象的書籤。定義超連結時，必須使用href屬性設定超連結的位置(URI)。設定連結對象的書籤時，必須使用id或name屬性來指定書籤名稱。如欲連結某一網頁的書籤位置時，則設定href屬性值為「URI#書籤名稱」。
- 語法:
- <a 屬性 = "屬性值">標籤內容</a>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- 「線內」元素*2)、text
- 屬性:
- charset、href、hreflang、
name、rel、rev、shape、coords、target、type屬性*3)、事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
sample code
<h3>
連結a元素的書籤位置
</h3>
<p>
想知道如何使用超連結，就請使用滑鼠點選
<a href="link.html#bookmark">超連結a元素</a>或
<a href="#bookmark"><img id="a" src="images/bookmark_a.jpg" /></a>
<br/>若要打開新視窗就請點選
<a href="link.html#bookmark" target="_blank">這裡</a>。
</p>
output
連結a元素的書籤位置
想知道如何使用超連結，就請使用滑鼠點選超連結a元素或
若要打開新視窗就請點選這裡。
*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。
*2)在XHTML，不能包含自己本身的a元素。
*3)刪除線 → W3C非推薦屬性，建議是用CSS取代 ，粗體字 → 必要屬性，不可省略。
| 屬性 |
適用元素 |
屬性值 |
說明 |
| charset |
a、link |
文字碼 |
指定連結對象的文字碼。閱覽網頁者可以正確取得資訊，不會產生亂碼。
例)UTF-8→萬國碼，Big5→繁體中文。 |
| coords |
a、area、link |
整數 |
設定img map領域範圍的座標值。
請參照area元素的說明。 |
| href |
a、area、link |
URI |
設定和目前有相關的Resource的URI(Uniform Resource Identifier)。
例)href = "stylesheets/main.css" |
| hreflang |
a、link |
語言碼 |
指定連結對象的語言碼。
例)zh-TW→繁體中文，zh→中文，ja→日文，en→英文 |
| name |
a |
書籤名(anchor) |
設定文件中的書籤連結名稱。半形文字大小寫有區分，須注意。在XHTML1.1版本將廢除，建議name和id兩者都設。
例) <h1><a name = "a" id = "a">a</a></h1> |
| rel |
a、link |
Link Type |
設定連結對象和目前正閱覽的文件之間的關係。半形的大小寫沒有區別（case-insensitive），可複數指定，用半形空白區隔。
例)rel="prev help" |
| rev |
a、link |
Link Type |
rel的反向關係。唯有rev可以指定的LinkType為"made"，"made"表示文件的作者，一般指定作者的E-Mail。
例)<link rev="made" href="ezto@ezto.com.tw"> |
| shape |
a、link |
defalut
rect
circle
poly |
設定img map領域有效範圍的「形狀」，形狀大小的會依coords屬性的設定值而改變。
defalut → 全體，rect → 矩形，circle→ 圓形，poly→ 多邊形。 |
| target |
a、area、base、form、link |
_blank
_self
_parent
_top
任意Frame名 |
設定顯示連結對象的方法。方法有:
_blank→開新視窗
_self→現有視窗
_top→從Frame內連結情形，解除Frame至視窗的頂端
_parent→從Frame內連結情形，解除Frame顯示全體
|
| type |
a、link |
MIME Type |
設定連結對象的MIME Type，UA端才能正確解析檔案的種類。
|
map元素 (image map, clickable map)，為「線內」(區塊)特性元素，內含area元素和a元素。可以和崁入img、input、object元素的圖像做連動，做成image map。
- 語法:
- <map 屬性 = "屬性值">標籤內容</map>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- area元素、「區塊」元素(限a元素)
- 屬性:
name屬性*2)、事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
sample code
<h3>
將圖片切割(矩形、圓形、多邊形)，分別連結至不同的URI
</h3>
<p>
<img alt="map" usemap="#sample1" src="../../../../images/map.jpg" />
<map name="sample1" >
<area shape="rect" coords="20,25,70,70" href="#map"/>
<area shape="circle" coords="110,45,20" href="#map"/>
<area shape="poly" coords="165,20,140,70,185,70" href="#map"/>
</map>
</p>
output
將圖片切割(矩形、圓形、多邊形)，分別連結至不同的URI
*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性，建議是用id屬性取代。
| 屬性 |
適用元素 |
屬性值 |
說明 |
| name |
map |
imag map名 |
設定imag map的名稱，和img、input、object元素的usemap名稱對應。半形文字大小寫有區分，須注意。在XHTML1.1版本將廢除，建議name和id兩者都設。
例) <h1><a name = "a" id = "a">a</a></h1> |
area元素 (area)，為「線內」特性元素，切割map元素內的特定圖像，崁入超連結資訊。
- 語法:
- <area 屬性 = "屬性值">標籤內容</area>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- -
- 屬性:
- alt、coords、href、nohref、shape、target屬性*2)、事件屬性、通用屬性(accesskey、tableindex、class、dir、id、lang、style、title、xml:lang)
sample code
<h3>
將圖片切割(矩形、圓形、多邊形)，分別連結至不同的URI
</h3>
<p>
<img alt="map" usemap="#sample2" src="../../../../images/map.jpg" />
<map name="sample2" >
<area shape="rect" coords="20,25,70,70" href="#area"/>
<area shape="circle" coords="110,45,20" href="#area"/>
<area shape="poly" coords="165,20,140,70,185,70" href="#area"/>
</map>
</p>
output
將圖片切割(矩形、圓形、多邊形)，分別連結至不同的URI
*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性，建議是用CSS取代 ，粗體字 → 必要屬性，不可省略。
| 屬性 |
適用元素 |
屬性值 |
說明 |
| alt |
area |
Text |
當發生問題無法顯現圖像，或在聲音輸出等非視覺環境，或在沒有對應圖像顯示環境下，所顯示的替代文字。 |
| coords |
a、area、link |
整數 |
設定img map領域範圍的座標值。
rect(矩形) → coords = "左上x值,左上y值,右下x值,右下y值"。
circle(圓形) → coords = "圓心x值,圓心y值,半徑r值"。
poly(多角形) → coords = "頂端x值,頂端y值,頂端x值,頂端y值..."。 |
| href |
a、area、link |
URI |
設定和目前有相關的Resource的URI(Uniform Resource Identifier)。
例)href = "stylesheets/main.css" |
| nohref |
area |
nohref |
指定此領域沒有連結。
例)nohref = "nohref" |
| shape |
a、area |
defalut
rect
circle
poly |
設定img map領域有效範圍的「形狀」，形狀大小的會依coords屬性的設定值而改變。
defalut → 全體，rect → 矩形，circle→ 圓形，poly→ 多邊形。 |
| target |
a、area、base、form、link |
_blank
_self
_parent
_top
任意Frame名 |
設定顯示連結對象的方法。方法有:
_blank→開新視窗
_self→現有視窗
_top→從Frame內連結情形，解除Frame至視窗的頂端
_parent→從Frame內連結情形，解除Frame顯示全體
|
base元素 (document base URI)，為head元素的子元素，指定該網頁的基本的URI。
- 語法:
- <base 屬性 = "屬性值" />
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- -
- 屬性:
- href、
target屬性*2)、通用屬性(id(限XHTML1.0))
sample code
<head>
<base href="http://www.ezto.com.tw" target="_blank">
</head>
*1)S → Strict DTD ，T → Transitional DTD，F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性，建議是用CSS取代 ，粗體字 → 必要屬性，不可省略。
| 屬性 |
適用元素 |
屬性值 |
說明 |
| href |
base |
絕對URI |
設定文件的絕對URI。 |