明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html area標簽是什么意思？html area標簽的用法詳細說明

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]html area標簽是什么意思？關(guān)于html area標簽的用法你知道多少？本篇文章就給大家介紹了html area標簽的定義和使用案例，還有關(guān)于html area標簽屬性的介紹（附實例）html area標簽的定義和用法：<area> 標簽定義圖像映射中的區(qū)域（注：圖像映射指得是帶...
html area標簽是什么意思？關(guān)于html area標簽的用法你知道多少？本篇文章就給大家介紹了html area標簽的定義和使用案例，還有關(guān)于html area標簽屬性的介紹（附實例）

html area標簽的定義和用法：

<area> 標簽定義圖像映射中的區(qū)域（注：圖像映射指得是帶有可點擊區(qū)域的圖像）。

area 元素總是嵌套在 <map> 標簽中。

注釋：<img> 標簽中的 usemap 屬性與 map 元素 name 屬性相關(guān)聯(lián)，創(chuàng)建圖像與映射之間的聯(lián)系。

HTML<area>標簽實例：

帶有可點擊區(qū)域的圖像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

<area>標簽屬性：

  • alt：區(qū)域的替代文本。

  • coords：區(qū)域的坐標。

  • href：區(qū)域的目標url。

  • hreflang：目標url的語言，html5中的新屬性。

  • media：目標url是為何種媒介/設(shè)備優(yōu)化的，html5中的新屬性。

  • nohref：沒有相關(guān)鏈接的區(qū)域，html5不支持。

  • rel：當前文檔與目標url之間的關(guān)系，html5中的新屬性。

  • shape：區(qū)域的形狀。

  • target：在何處打開目標url。

  • type：目標url的 MIME 類型，html5中的新屬性。

格式：

<area shape="形狀" coords="坐標" href="目標URL">

HTML<area>標簽實例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html< area>標簽_PHP筆記</title>
</head>
<body>
<img src="http://www.php.cn/themes/Nana2.09/images/logo.png" alt="html< area>標簽" width="300px" height="70px" alt="PHP筆記logo" usemap="#logo">
<map name="logo">
<area shape="rect" coords="0,0,70,70" alt="圖標" href="#">
<area shape="rect" coords="85,0,280,50" alt="PHP筆記" href="#">
<area shape="rect" coords="85,50,275,70" alt="www.php.cn" href="#">
</map>
<h3>上面圖片被分為3個區(qū)域</h3>
</body>
</body>
</html>

注釋：<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），所以我們需要同時向 <map> 添加 id 和 name 兩個屬性。

HTML 與 XHTML 之間的差異

在 HTML 中，<area> 沒有結(jié)束標簽。

在 XHTML 中，<area> 必須正確地關(guān)閉。

【相關(guān)推薦】

html5 source type有什么用處？html5 source標簽的詳細介紹

script標簽在HTML中的作用是什么？script標簽中type屬性的用法是什么？

以上就是html area標簽是什么意思？html area標簽的用法詳解的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。