>1 <area/>區(qū)域標(biāo)簽

<area>標(biāo)簽?zāi)軌蛟谒鑸D像中設(shè)置作用區(qū)域，用戶可以通過點擊該作用區(qū)域來替換到相應(yīng)的頁面。

<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>標(biāo)簽定義圖像映射內(nèi)部的區(qū)域（圖像映射指的是帶有可點擊區(qū)域的圖像）。
• <area>元素始終嵌入在<map>標(biāo)簽內(nèi)部。
• <img/>標(biāo)簽中的usemap屬性與<map>元素中的名稱相關(guān)聯(lián)，以創(chuàng)建圖像與映射之間的關(guān)系。
• <area/>是單標(biāo)記標(biāo)簽，但隨時記得他也是閉合標(biāo)簽別漏了斜杠。

  ---

>2 <area/>標(biāo)簽屬性

屬性值描述

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

---

alt屬性

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

定義和用法

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

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

語法

<area alt="text"/>

屬性值

值描述

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

---

coords屬性

定義和用法

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

語法

<area coords="value"/>

屬性值

值描述

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

---

shape 屬性

定義和用法

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

語法

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

屬性值

值描述

default	規(guī)定全部區(qū)域。
rect	定義矩形區(qū)域。
circ	定義圓形。
poly	定義多邊形區(qū)域。

---

href?屬性

定義和用法

• href 屬性規(guī)定區(qū)域中連接的目標(biāo)。
• 如果沒有使用href 屬性，<area> 標(biāo)簽就不是一個鏈接。

語法

<area href="URL"/>

屬性值

值

描述

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

---

hreflang 屬性

定義和用法

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

語法

<area hreflang="language_code"/>

屬性值

值描述

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

---

media屬性

定義和用法

?

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

語法

<area media="value"/>

---

rel屬性

定義和用法

• rel屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系。

語法

<area rel="value"/>

屬性值

值描述

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

---

target屬性

定義和用法

• target屬性規(guī)定區(qū)域中連接的目標(biāo)。
• 僅在使用了href屬性才使用target屬性。

語法

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

屬性值

值描述

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

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。