?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
HTML<area> 元素 在圖片上定義一個熱點(diǎn)區(qū)域，可以關(guān)聯(lián)一個超鏈接。<area>元素僅在<map>元素內(nèi)部使用。
內(nèi)容分類 | 流內(nèi)容, 短語內(nèi)容. |
|---|---|
允許的內(nèi)容 | None, it is an empty element. |
標(biāo)簽省略 | Must have a start tag and must not have an end tag. |
允許的父元素 | Any element that accepts phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent. |
Permitted ARIA roles | None |
DOM 接口 | HTMLAreaElement |
屬性
鈣元素包括全局屬性。
accesskeyHTML 4only,已廢棄 Gecko 5.0為元素指定一個獲取焦點(diǎn)的快捷鍵。在與指定字符關(guān)聯(lián)的情況下，按ALT或類似鍵選擇與該鍵序列相關(guān)聯(lián)的表單控件。頁面設(shè)計人員避免使用已經(jīng)綁定到瀏覽器的快捷鍵。這個屬性自HTML5以來是全局性的。
alt在未顯示圖像的瀏覽器上顯示代替的文本字符串。這個文本應(yīng)該能傳達(dá)給用戶與顯示圖像而沒有文本的情況下同等的選擇（譯者注：就是字和圖片表達(dá)一個意思）。在HTML4中， 這個屬性時必需的, 但是可以是一個空的串("")。在HTML5中, 這個屬性只有在href屬性被使用的時候才是必需的。
coords給熱點(diǎn)區(qū)域設(shè)定具體的坐標(biāo)值。這個值的數(shù)值和意義取決于這個值所描述的形狀屬性.。對于矩形或長方形, 這個coords 值為兩個X,Y對：左上、右下。 對于圓形, 這個值是 x,y,r ，這里的 x,y是一對確定圓的中心的坐標(biāo)而 r 則表示的是半徑值.。對于多邊和多邊形，這個值是用x,y對表示的多邊形的每一個點(diǎn)：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素數(shù)量或者百分比, 區(qū)別是不是有%出現(xiàn); HTML5里, 只可能是像素的數(shù)量.downloadHTML5這個屬性如果存在的話, 表明作者想把超鏈接用于下載一個資源。請查看<a>獲得關(guān)于download屬性的完整描述。
hrefarea的超鏈接, 值為一個URL. HTML4里, 這個值不管是不是有值都要明確指定出來. HTML5里則不需要.hreflangHTML5指明鏈接資源的語言類型, 值的范圍參考BCP47. 這個屬性只能在指明href屬性之后使用.nameHTML 4only,已廢棄 Gecko 5.0為可點(diǎn)擊區(qū)域定義一個名字以使舊瀏覽器解析。
mediaHTML5指明鏈接資源的媒體類型，例：print and screen。如果此屬性省略，默認(rèn)全部。僅在href屬性存在情況下使用。nohrefHTML 4only,已廢棄 Gecko 5.0指明此區(qū)域沒有超鏈接。在<area>中必須存在nohref或者h(yuǎn)ref。
Usage note: 此屬性在html5中是廢棄的，而忽略href屬性就足夠了。
referrerpolicy一個字符串，指示在獲取資源時使用哪個引用者：
"no-referrer"這意味著Referer:頭不會被發(fā)送。
“
no-referrer-when-downgrade”表示Referer:當(dāng)導(dǎo)航到?jīng)]有TLS（HTTPS）的原點(diǎn)時，不會發(fā)送標(biāo)題。如果沒有指定策略，這是用戶代理的默認(rèn)行為。
"origin"這意味著引用者將成為頁面的來源，即大致的方案，主機(jī)和端口。
“起源 - 交叉起源”意味著到其他起源的導(dǎo)航將限制在該方案，主機(jī)和端口，同一來源的導(dǎo)航將包括引用者的路徑。
"unsafe-url"這意味著引用者將包括來源和路徑（但不包括片段，密碼或用戶名）。這種情況是不安全的，因為它可以將來自TLS保護(hù)的資源的起點(diǎn)和路徑泄漏到不安全的起點(diǎn)。
relHTML5對于包含href屬性的錨點(diǎn)，此屬性指定目標(biāo)對象與鏈接對象的關(guān)系。該值是鏈接類型值的逗號分隔列表。值和它們的語義將由某個權(quán)威機(jī)構(gòu)注冊，這對文檔作者可能有意義。默認(rèn)的關(guān)系，如果沒有給出，是無效的。只有當(dāng)href屬性存在時才使用此屬性。
shape相關(guān)熱點(diǎn)的形狀。HTML 5和HTML 4的規(guī)范定義了rect定義矩形區(qū)域的值; circle，它定義了一個圓形區(qū)域; poly，它定義了一個多邊形; 和default，這表示整個區(qū)域超出任何定義的形狀。許多瀏覽器，特別是Internet Explorer 4和更高的支持circ，polygon以及rectangle對作為有效值形狀 ; 這些值是。僅限HTML 4，自從Gecko 5.0A數(shù)值指定瀏覽器標(biāo)簽順序中已定義區(qū)域的位置以來已過時。該屬性在HTML5中是全局的。此屬性指定顯示鏈接資源的位置。在HTML4中，這是框架的名稱或關(guān)鍵字。在HTML5中，它是瀏覽上下文（例如，選項卡，窗口或內(nèi)聯(lián)框架）的名稱或關(guān)鍵字。以下關(guān)鍵字具有特殊含義：tabindextarget
_self: 在當(dāng)前區(qū)域加載鏈接指向的資源. 這個是默認(rèn)值.
_blank: 在新的未命名的窗口或者tab里加載超鏈接資源.
_parent: 在父級加載超鏈接資源. HTML4里, 是當(dāng)前frame的父級, HTML5里是當(dāng)前的瀏覽器上下文, 如果當(dāng)前環(huán)境沒有父級, 行為和_self一樣.
_top: HTML4里: 將響應(yīng)加載到完整的原始窗口中，取消所有其他幀。在HTML5中:將響應(yīng)加載到頂級瀏覽上下文(也就是說，瀏覽上下文是當(dāng)前版本的祖先，并且沒有父類)。如果沒有父類，這個選項的行為方式與self相同
本屬性只能在指明href屬性之后使用.
type該屬性指定了用于鏈接目標(biāo)的MIME類型的媒體類型。一般來說，這是嚴(yán)格的咨詢信息;然而，在未來，瀏覽器可能會為多媒體類型添加一個小圖標(biāo)。例如，當(dāng)類型設(shè)置為音頻/wav時，瀏覽器可能會添加一個小的揚(yáng)聲器圖標(biāo)。公認(rèn)的MIME類型的完整列表,請參閱http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有當(dāng)href屬性存在時才使用該屬性。
示例
<map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left"> <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right"></map><img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
Live Example
注意事項
HTML 3.2, 4.0, 和HTML 5 規(guī)范中, 不允許有 </area> 單閉合標(biāo)簽.
XHTML 1.0 規(guī)范要求有尾部的斜線:<area />.
id,class, 和style屬性和其他的HTML4屬性一樣, 但是只有Netscape和Microsoft定義了這些屬性.
Netscape 1–level 瀏覽器不能解析target 鏈接到frames的屬性.
HTML 3.2 只定義了alt,coords,href,nohref, 和shape.
HTML 5.1 定義了這個標(biāo)簽上的屬性類型。
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
引用者策略該規(guī)范中“引用策略屬性”的定義。 | 編輯草稿 | 增加了referrerpolicy屬性。 |
WHATWG HTML生活標(biāo)準(zhǔn)該規(guī)范中'<area>'的定義。 | 生活水平 | |
HTML5該規(guī)范中'<area>'的定義。 | 建議 | |
HTML 4.01規(guī)范該規(guī)范中'<area>'的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
referrerpolicy | 51 | No support | 50 (50) | No support | No support | No support |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | (Yes) | ? | ? | ? | ? | ? | (Yes) |
referrerpolicy | No support | No support | No support | 50.0 (50) | No support | No support | No support | No support | No support |