>1 <area/>區域標簽

<area>標簽能夠在所需圖像中設置作用區域，用戶可以通過點擊該作用區域來替換到相應的頁面。

<img src="路徑/圖片名稱" usemap="#mapone"/><map name="mapone"><area shape="rect" coords="0,0,82,126" target="_blank" alt="" href="/images/course/sun.png"/><area shape="circle" coords="90,58,3" target="_blank" alt="" href="/images/course/mer.gif"/><area shape="circle" coords="124,58,8" target="_blank" alt="" href="/images/course/ven.jpg"/></map>

• <area>標簽定義圖像映射內部的區域（圖像映射指的是帶有可點擊區域的圖像）。
• <area>元素始終嵌入在<map>標簽內部。
• <img/>標簽中的usemap屬性與<map>元素中的名稱相關聯，以創建圖像與映射之間的關系。
• <area/>是單標記標簽，但隨時記得他也是閉合標簽別漏了斜杠。

  ---

>2 <area/>標簽屬性

屬性值描述

alt	文本	規定區域的替代文本。如果使用href屬性，則該屬性是必需的。
coords	座標	規定區域的坐標。
href	網址	規定區域的目標URL。
hreflang	language_code	規定目標URL的語言。
media	媒體查詢	規定的目標URL是為預期媒介/設備優化的。
rel	備用 作者 書簽 幫助 許可證 下一個 nofollow? noreferrer 預取 prev 搜索 標簽	規定當前文檔與目標URL之間的關系。
shape	默認 矩形 圈 多邊形	規定區域的形狀。
目標	_blank? _parent? _self? _top 框架名稱	規定在何處打開目標URL。
鍵入	MIME_type	規定目標URL的MIME類型。 注：MIME =多用途Internet郵件擴展。

---

alt屬性

alt 屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。

定義和用法

假設由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：

• 網速太慢
• src 屬性中的錯誤
• 瀏覽器禁用圖像
• 用戶使用的是屏幕閱讀器
• 如果使用 href 屬性 alt 屬性是需要的。

語法

<area alt="text"/>

屬性值

值描述

text	在圖片無法顯示的情況下指定區域的替代文本。

---

coords屬性

定義和用法

• coords屬性規定區域的x和y坐標。
• coords屬性與?shape屬性配合使用，來規定區域的尺寸，形狀和位置。
• 提示：圖像左上角的坐標是“ 0,0”。

語法

<area coords="value"/>

屬性值

值描述

x1，y1，x2，y2	如果shape屬性設置為“ rect”，則該值規定矩形左上角和右下角的坐標。
x，y，半徑	如果shape屬性設置為“ circ”，則該值規定圓心的坐標和條紋。
x1，y1，x2，y2，..，xn，yn	如果shape屬性設置為“ poly”，則該值規定多個各邊的坐標。如果第一個坐標和最后一個坐標相互替換，則為了關閉替代，瀏覽器必須添加最后一對坐標。

---

shape 屬性

定義和用法

• shape 屬性指定了區域的形狀。
• shape 屬性與?coords屬性配合，可以規定區域的尺寸、形狀和位置。

語法

<area shape="default|rect|circle|poly"/>

屬性值

值描述

default	規定全部區域。
rect	定義矩形區域。
circ	定義圓形。
poly	定義多邊形區域。

---

href?屬性

定義和用法

• href 屬性規定區域中連接的目標。
• 如果沒有使用href 屬性，<area> 標簽就不是一個鏈接。

語法

<area href="URL"/>

屬性值

值

描述

URL	鏈接的 URL。可能的值： 絕對 URL - 指向另一個站點（比如 href="http://www.baidu.com/data.html"） 相對 URL - 指向站點內的某個文件（href="data.html"） 錨 URL - 指向頁面中的錨（href="#data"）

---

hreflang 屬性

定義和用法

• hreflang 屬性用于指定被鏈接文檔的語言。
• 僅在使用 href 屬性時才可以指定 hreflang 屬性。

語法

<area hreflang="language_code"/>

屬性值

值描述

language_code	雙字符的語言代碼，指定被鏈接文檔的語言。

---

media屬性

定義和用法

?

• media屬性指定目標URL將顯示在什么設備上。
• 該屬性使用與指定的URL顯示在指定的設備上（例如iPhone），音頻或打印媒介。
• 該屬性可以接受多個值。
• 僅在使用了href屬性才需要media屬性。

語法

<area media="value"/>

---

rel屬性

定義和用法

• rel屬性規定當前文檔與被鏈接文檔之間的關系。

語法

<area rel="value"/>

屬性值

值描述

備用	文檔的替代版本（某些打印頁，翻譯或合并）。
作者	鏈接到文檔的作者。
書簽	用于書簽的永久網址
救命	鏈接到幫助文檔
執照	鏈接到文檔的版權信息。
下一個	選項中的下一個文檔
Nofollow	nofollow是一個HTML標簽的屬性值。這個標簽的意義是告訴搜索引擎“不要追蹤此網頁上的鏈接”或“不要追蹤此特定鏈接。”
無推薦人	如果用戶點擊鏈接指定瀏覽不要發送HTTP Referer頭部信息。
預取	指定的目標文件應該被緩存
上一個	選項中的前一個文檔
搜索	文檔鏈接到搜索工具
標簽	當前文檔的標簽（關鍵字）

---

target屬性

定義和用法

• target屬性規定區域中連接的目標。
• 僅在使用了href屬性才使用target屬性。

語法

<area target="_blank|_self|_parent|_top|framename"/>

屬性值

值描述

_blank	在新窗口中打開被鏈接文檔。
_self|	默認。在相同的框架中打開被鏈接文檔。
_parent	在父框架集中打開被鏈接文檔。
_top	在整個窗口中打開被鏈接文檔。
framename	在指定的框架中打開被鏈接文檔。

---

?一直在路上，自律，堅持

總結

以上是生活随笔為你收集整理的HTML5 第003篇 area标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。