Home > Article > Web Front-end > What does the html area tag mean? Detailed explanation of the usage of html area tag
What does the html area tag mean? Detailed explanation of the usage of html area tag
- 寻∝梦Original
- 2018-08-17 17:37:124657browse
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:
03fc64e1e502d5ba947b3a9af06d2d2a 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 dab9f699790ab0922e596ecb9f6677d5 tags.
Note: The usemap attribute in the a1f02c36ba31691bcfe87b2722de723b tag is associated with the name attribute of the map element, creating a link between the image and the map.
HTML03fc64e1e502d5ba947b3a9af06d2d2a 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>
03fc64e1e502d5ba947b3a9af06d2d2a 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:
2c3ff4ed52d24ca863fd7ad93957d4a6
HTML03fc64e1e502d5ba947b3a9af06d2d2a tag example:
<!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个区域</h3> </body> </body> </html>
Note: The usemap attribute in a1f02c36ba31691bcfe87b2722de723b can refer to the id or name attribute in dab9f699790ab0922e596ecb9f6677d5 (determined by the browser), so we need to use both Add two attributes, id and name, to dab9f699790ab0922e596ecb9f6677d5.
Differences between HTML and XHTML
In HTML, 03fc64e1e502d5ba947b3a9af06d2d2a does not have a closing tag.
In XHTML, 03fc64e1e502d5ba947b3a9af06d2d2a 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!