HTML <area> 标签
定义和用法
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。
area 元素总是嵌套在 <map> 标签中。
注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。
实例
带有可点击区域的图像映射:
<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>
TIY
浏览器支持
所有主流浏览器都支持 <area> 标签。
HTML 与 XHTML 之间的差异
在 HTML 中,<area> 没有结束标签。
在 XHTML 中,<area> 必须正确地关闭。
提示和注释:
注释:<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。
必需的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
属性 值 描述 DTD
alt text 定义此区域的替换文本。 STF
可选的属性
属性 值 描述 DTD
coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。 STF
href URL 定义此区域的目标 URL。 STF
nohref nohref 从图像映射排除某个区域。 STF
shape
* default
* rect
* circ
* poly
定义区域的形状。 STF
target
* _blank
* _parent
* _self
* _top
规定在何处打开 href 属性指定的目标 URL。 TF
标准属性
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
如需完整的描述,请访问标准属性。
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
如需完整的描述,请访问事件属性。
TIY
创建图像映射
本例显示如何创建带有可供点击区域的图像映射。其中的每个区域都是一个超级链接。
参考文献http://www.w3school.com.cn/tags/tag_area.asp
分享到:
相关推荐
总结来说,HTML `<area>` 标签是构建图像映射的关键,它通过`shape` 和 `coords` 属性定义不同形状的可点击区域,并通过 `href` 定义链接行为。结合使用 `<map>` 标签,我们可以创建出具有交互性的图像,提高用户...
这个版本的标签"HTMLArea-3.0"是为了便于识别和搜索。 HTMLArea-3.0的主要特点和功能包括: 1. **富文本编辑**:HTMLArea提供了全面的文本格式化选项,如加粗、斜体、下划线、字体选择、字号调整、颜色设置等,让...
-- 配对的area标签将在这里定义 --> ``` `usemap`属性的值是一个井号(#)后面跟着`<map>`元素的`name`属性,这将两者关联起来。 接下来,我们使用`<area>`标签定义图像上的热点区域。`<area>`标签具有多个属性,...
在这个"js抠图+area标签显示"的主题中,我们将探讨如何利用JavaScript进行图像抠图操作,并结合HTML的`<area>`标签来实现图像热点区域的显示。 首先,"抠图"在技术上通常指的是从背景中提取出特定的对象或元素,这...
8. **安全性**:考虑到HTML内容可能带来的安全问题,HTMLArea 可能包含一些内置的安全机制,比如防止XSS攻击,通过过滤或转义危险的HTML标签和属性。 9. **定制化**:HTMLArea 允许开发者根据自己的需求定制编辑器...
本教程聚焦于HTML中的`map`标签和`area`标签,这两个标签是创建图像映射的重要工具,使得图像也能具有交互性,用户可以通过点击图像的不同区域跳转到不同的链接或者执行特定的JavaScript功能。 `<map>`标签是用来...
5. **源码下载**:标签中提到的“PHP源码”表明HTMLArea可能包含一个PHP示例或插件,用于演示如何在PHP环境中集成这个编辑器。 6. **中文支持**:作为中文版,这个编辑器特别适用于需要处理中文文本的场景,比如...
- **说明**:`<area>` 标签定义了一个客户端图像映射中一个超级链接区域的形状、坐标和关联URL。它常与 `<map>` 和 `<img>` 标签一起使用。例如: ```html <area shape="rect" coords="0,0,82,126" href=...
HTMLArea 是一个开源的WYSIWYG(What You See Is What You Get)编辑器,它允许用户在网页中以类似Word的方式编辑文本,无需懂得HTML代码。这个编辑器设计为替代传统的`<textarea>`标签,将普通的文本输入框转换为...
在HTML中,热区通常通过`<map>`和`<area>`标签来实现。`<map>`标签定义了一个图像映射,即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤: 1. **...
### HTML5标签速查表详解 #### 一、基础标签 **1.1 文档类型声明** **标签**: `<!DOCTYPE>` **描述**: 定义文档类型为HTML5,通常位于文档的第一行。 **1.2 HTML文档定义** **标签**: `<html>` **描述**: ...
`<map>`标签用于定义一个客户端图像映射,该映射由多个`<area>`标签组成,每个`<area>`标签定义了图像上的一个可点击区域。通常情况下,`<map>`标签会配合`<img>`标签一起使用,其中`<img>`标签的`usemap`属性值应与...
7. **影像地图**:通过`<map>`和`<area>`标签实现图像上的热点链接。 - `图像文件名" usemap="#图的名称">` - `图的名称">` - `<area shape="形状" coords="区域坐标列表" href="链接点的URL">` 以上便是从给定...
在HTML 4.01和XHTML 1.0中,标签有多种类型和属性,这些在"html标签,属性大全.pdf"这份资料中进行了详细列举。 1. **注释标签**:`<!--...-->` 用于添加不会显示在页面上的注释信息,方便开发者记录和理解代码。 2...
本文总结了HTML4和HTML5中的常用标签,涵盖了基本结构标签、文本标签、图片标签、链接标签、表格标签、表单标签、多媒体标签、框架标签、动态标签等。 基本结构标签 * `<!DOCTYPE>`: 定义文档类型 * `<html>`: ...
HTML标签大全 HTML标签大全是 HTML标记语言的详细介绍,涵盖了所有 HTML 文件的基本结构和标签。下面是对标题、描述、标签和部分内容的详细说明和知识点总结。 基本结构 * 文件类型:<HTML></HTML>,放在档案的...
### HTML标签解释大全 #### 一、HTML标记详解 HTML(HyperText Markup Language)是用于创建网页的标准标记语言。HTML标记或标签是用来定义文档结构、布局以及内容展示方式的指令。下面详细介绍了一些常用的HTML...