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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

寻∝梦

Aug 17, 2018 pm 05:37 PM

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

ログイン後にコピー

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

HTMLとXHTMLの違い

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

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

【関連おすすめ】

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7706

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1231

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。