ホームページ > 記事 > ウェブフロントエンド > HTML リンクに関するチュートリアルの例

HTML リンクに関するチュートリアルの例

零下一度オリジナル: 2017-06-24 13:50:481217ブラウズ

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

試してみる - 例

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

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

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

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

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

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

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

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

未訪問のリンクは青色のフォントで下線付きで表示されます。
訪問したリンクは紫色で下線付きで表示されます。
リンクをクリックすると、赤く下線が引かれて表示されます。

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

HTMLリンク構文

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

リンクテキスト

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

例

Noob チュートリアルにアクセス

上記のコード行は次のように表示されます:: Noob チュートリアルにアクセス

このハイパーリンクをクリックすると、初心者向けチュートリアルのホームページに移動します。

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

HTML リンク - target 属性

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

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

Example

<a href="" target="_blank" > 初心者向けチュートリアルをご覧ください a>

T試してみる»

HTML リンク - ID属性

id 属性は、HTML ドキュメント内でブックマークタグを作成するために使用できます。

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

例

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

役立つヒントセクション

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

役立つヒントセクションにアクセス

あるいは、別のページから「役立つヒント」へのリンクを作成します。Section(id="tips ")":

「役立つヒント」セクションにアクセス

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

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

その他の例

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

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

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

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

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