What does the html area tag mean? Detailed explanation of the usage of html area tag-HTML Tutorial-php.cn

What does the html area tag mean? Detailed explanation of the usage of html area tag

寻∝梦

Release： 2018-08-17 17:37:12

Original

4669 people have browsed it

html What does the area tag mean? How much do you know about the usage of html area tag? This article will introduce to you the definition and usage cases of the html area tag, as well as an introduction to the attributes of the html area tag (with examples)

Definition and usage of the html area tag:

tag defines the area in the image map (note: image map refers to an image with a clickable area).

area elements are always nested within tags.

Note: The usemap attribute in the tag is associated with the name attribute of the map element, creating a link between the image and the map.

HTML tag example:

Image map with clickable area:

<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>

Copy after login

tag attribute :

#alt: Alt text for the area.
coords: The coordinates of the area.
href: The target url of the area.
hreflang: The language of the target URL, a new attribute in HTML5.
media: What media/device the target URL is optimized for, a new attribute in HTML5.
nohref: There is no related link area, html5 does not support it.
rel: The relationship between the current document and the target url, a new attribute in HTML5.
shape: The shape of the area.
target: Where to open the target url.
type: MIME type of the target url, a new attribute in HTML5.

Format:

HTML tag example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html< area>标签_PHP笔记</title>
</head>
<body>
<img src="//m.sbmmt.com/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="m.sbmmt.com" href="#">
</map>
<h3>上面图片被分为3个区域</h3>
</body>
</body>
</html>

Copy after login

Note: The usemap attribute in can refer to the id or name attribute in (determined by the browser), so we need to use both Add two attributes, id and name, to .

Differences between HTML and XHTML

In HTML, does not have a closing tag.

In XHTML, must be closed properly.

【Related Recommendations】

html5 What is the use of source type? A detailed introduction to the html5 source tag

What is the role of the script tag in HTML? What is the usage of type attribute in script tag?

The above is the detailed content of What does the html area tag mean? Detailed explanation of the usage of html area tag. For more information, please follow other related articles on the PHP Chinese website!