HTMLリンク



HTML はハイパーリンクを使用して、Web 上の別のドキュメントに接続します。リンクはほぼすべての Web ページにあります。リンクをクリックすると、あるページから別のページにジャンプします。


試してみる - 例

HTML リンク
HTML ドキュメントにリンクを作成する方法。

(他の例はこのページの下部にあります)


HTML ハイパーリンク (リンク)

HTML は、 タグ <a> を使用してハイパーテキスト リンクを設定します。

ハイパーリンクは、単語、単語、単語のグループ、または画像です。これらのコンテンツをクリックすると、新しいドキュメントまたは現在のドキュメントの特定の部分にジャンプできます。

Webページ内のリンク上にマウスポインタを移動すると、矢印が小さな手に変わります。

href 属性は、リンクのアドレスを記述するためにタグ <a> で使用されます。

デフォルトでは、リンクはブラウザに次のように表示されます:

  • 未訪問のリンクは青色のフォントで下線付きで表示されます。

  • 訪問したリンクは紫色で下線付きで表示されます。

  • リンクをクリックすると、赤く下線が引かれて表示されます。

注: これらのハイパーリンクに CSS スタイルが設定されている場合、表示スタイルは CSS 設定に従って表示されます。


HTMLリンク構文

リンクのHTMLコードは非常にシンプルです。次のようになります: :

<a href="url">リンクテキスト</a>

href 属性は、リンクのターゲットを説明します。 .

<a href="../">访问php中文网</a>
上記のコード行は次のように表示されます: php 中国語 Web サイトにアクセス

このハイパーリンクをクリックすると、ユーザーは php 中国語 Web サイトのホームページに移動します。

ヒント: 「リンクテキスト」はテキストである必要はありません。画像やその他の HTML 要素をリンクにすることができます。


HTML リンク - target 属性

target 属性を使用すると、リンクされたドキュメントが表示される場所を定義できます。

次の行は、新しいウィンドウでドキュメントを開きます:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<a href="http://www.php.cn/" target="_blank">访问php中文网!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します



HTML接続 - ID attribute

id プロパティを使用して、HTML ドキュメント内にブックマーク タグを作成できます。

ヒント: ブックマークは特別な方法では表示されず、HTML ドキュメントにも表示されないため、読者には表示されません。

HTML ドキュメントに ID を挿入:

<a id="tips">役立つヒント セクション</a>

HTML ドキュメント内に「役立つヒント セクション (id="tips")」へのリンクを作成します:

<a href="#tips">役立つヒント セクションにアクセス</a>

または、別のページから「役立つヒント セクション (id="tips")」へのリンクを作成します:

<a href="http://www.php.cn/html/html-links.html #tips ">
「役立つヒント」セクションにアクセスしてください</a>


基本的なメモ - 役立つヒント

注: サブフォルダーには必ずスラッシュを追加してください。 href="http://www.php.cn/html" のようにリンクを記述すると、サーバーに対して 2 つの HTTP リクエストが生成されます。これは、サーバーがアドレスにスラッシュを追加して、次のような新しいリクエストを作成するためです: href="http://www.php.cn/html/"。

その他の例

画像リンク
画像リンクの使用方法。

現在のページの指定された場所へのリンク
ブックマークの使用方法

フレームの外
この例では、ページがフレーム内に固定されていると仮定して、フレームの外に飛び出す方法を示します。

電子メール リンクの作成
この例は、電子メールにリンクする方法を示しています。 (この例は、電子メール クライアント プログラムをインストールした後でのみ機能します。)

電子メール リンクを作成する 2
この例は、より複雑な電子メール リンクを示しています。


HTML リンク タグ

タグ 説明
<a>ハイパーリンクを定義する