HTMLエリアタグとは何を意味するのでしょうか？ htmlエリアタグの使い方を詳しく解説-htmlチュートリアル-php.cn

HTMLエリアタグとは何を意味するのでしょうか？ htmlエリアタグの使い方を詳しく解説

寻∝梦

リリース： 2018-08-17 17:37:12

オリジナル

4670 人が閲覧しました

HTMLエリアタグの意味は何ですか? HTMLエリアタグの使い方についてどれくらい知っていますか？この記事では、HTML エリアタグの定義と使用例、および HTML エリアタグの属性の概要 (例を示します) を紹介します

HTML エリアタグの定義と使用法:

< ;area> タグの定義イメージマップ内の領域 (注: イメージマップとは、クリック可能な領域を持つイメージを指します)。

area 要素は常にタグ内にネストされます。

注: タグの usemap 属性はマップ要素の name 属性に関連付けられ、画像とマップの間に接続が作成されます。

HTML<エリア> クリック可能なエリアを含むイメージマップ:

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

ログイン後にコピー

<エリア> alt: エリアの代替テキスト。

coords: エリアの座標。

href: エリアのターゲット URL。
hreflang: ターゲット URL の言語、html5 の新しい属性。
media: ターゲット URL が最適化されるメディア/デバイス。HTML5 の新しい属性。
nohref: 関連リンクのない領域、html5はサポートしていません。
rel: 現在のドキュメントとターゲット URL の間の関係、HTML5 の新しい属性。
shape: エリアの形状。
target: ターゲット URL を開く場所。
type: ターゲット URL の MIME タイプ、html5 の新しい属性。
フォーマット:
<エリアshape="shape" coords="座標" href="ターゲットURL">
HTML<エリア> タグの例:

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

ログイン後にコピー

の id または name 属性を参照できるため、id 属性と name 属性の両方を同時にに追加する必要があります。

HTMLとXHTMLの違い

HTMLでは、には終了タグがありません。

XHTML では、を正しく閉じる必要があります。

【関連おすすめ】

HTML5ソースタイプの用途は何ですか? html5のソースタグを詳しく紹介

HTMLにおけるscriptタグの役割とは？ scriptタグでのtype属性の使い方は何ですか?

以上がHTMLエリアタグとは何を意味するのでしょうか？ htmlエリアタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。