ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML ハイパーリンクの詳細を紹介します。

HTML ハイパーリンクの詳細を紹介します。

高洛峰
リリース: 2017-03-10 11:38:56
オリジナル
1196 人が閲覧しました

この記事では、HTML ハイパーリンクの詳細な説明を紹介します

ハイパーリンクは、Web サイトのさまざまなページがハイパーリンクによって接続されており、ハイパーリンクによってページ間のジャンプが完了するため、Web サイトで頻繁に使用される HTML 要素です。ハイパーリンクはブラウザとサーバー間の対話の主な手段であり、次のテクノロジーでハイパーリンクについて徐々に詳しく学んでいきます。

— 注: 画像はリンクとしても使用できます。詳細については、次の章「Web ページ内の画像」で説明します。

4.5.1 テキストへのリンクの追加

ハイパーリンクのタグは、テキストへのハイパーリンクの追加は他の変更タグと同様です。リンクを追加した後のテキストには、他のテキストと区別するための独自の特別なスタイルがあり、デフォルトのリンク スタイルは下線付きの青色のテキストです。ハイパーリンクは別のページにジャンプします。 タグには、新しいページのアドレスを指定するための href 属性があります。 hrefで指定するアドレスは、通常は相対アドレスを使用します。

— 注: Web サイト開発では、ドキュメントの相対アドレスがより一般的に使用されます。

D:web ディレクトリに Web ページ ファイルを作成し、a.htm という名前を付け、コード 4.18 に示すようにコードを記述します。

コード 4.18 ハイパーリンク設定: a.htm

ハイパーリンク設定

< ;font size="5">

リスト設定ページに入ります

body>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、ブラウジング効果は図 4.19 のようになります。

HTML ハイパーリンクの詳細を紹介します。

図 4.19 ハイパーリンクの設定

ページ内のリンクをクリックすると、ページは同じディレクトリ内の ul_ol.htm ページにジャンプします。前のセクションのリスト設定ページ。ブラウザの「戻る」ボタンをクリックして a.htm ページに戻ると、テキスト リンクの色が紫に変わり、このリンクにアクセスしたことが表示されます。

4.5.2 リンクのウィンドウを開く方法を変更する

デフォルトでは、ハイパーリンクが新しいページを開く方法は、ハイパーリンク自体を上書きすることです。ブラウザのさまざまなニーズに応じて、読者はハイパーリンクの新しいウィンドウを開く他の方法を指定できます。ハイパーリンクタグは、設定対象の属性を提供します。値は、_self(自己上書き、デフォルト)、_blank(新しいウィンドウを作成して新しいページを開きます)、_top(ブラウザのウィンドウ全体で開きます、すべてのフレームで開きます)です。構造体は無視されます) )、_parent (前のウィンドウで開きます)。

— 注: _top メソッドと _parent メソッドはフレーム ページに使用され、次の章で詳しく説明されます。

4.5.3 リンクにプロンプ​​トテキストを追加する

多くの場合、ハイパーリンクのテキストではリンク先のコンテンツを説明するのに十分ではありません。ハイパーリンクタグは、閲覧者に簡単にプロンプ​​トを表示できるタイトル属性を提供します。 。 title 属性の値はプロンプトの内容です。ビューアのカーソルがハイパーリンク上にあると、プロンプトの内容が表示されます。これは、ページ レイアウトのきれいさには影響しません。 a.htm Web ページ ファイルを変更し、コード 4.19 に示すようにコードを記述します。

コード 4.19 ハイパーリンク設定: a.htm

ハイパーリンク設定

< ;font size="5">

図 4.20 ハイパーリンクのプロンプトテキスト

4.5.4 アンカーとは

多くの Web 記事には多くのコンテンツが含まれているため、ページが非常に長くなり、閲覧者は常にドラッグして閲覧する必要があります。ブラウザのスクロール バーを使用して、必要なコンテンツを見つけます。ハイパーリンクのアンカー機能は、アンカーを船のアンカーから導き出し、アンカーを落とした後、船が簡単に流されたり、迷ったりすることを防ぎます。実際、アンカーは 1 ページ内の別の場所にジャンプするために使用され、ブックマークと呼ばれる場所もあります。

ハイパーリンク タグの name 属性は、アンカーの名前を定義するために使用されます。ハイパーリンクの href 属性は、名前に基づいて対応するアンカーにジャンプできます。 D:web ディレクトリに Web ページ ファイルを作成し、a_anchor.htm という名前を付け、コード 4.20 に示すようにコードを記述します。

コード 4.20 ハイパーリンク アンカー: a_anchor.htm

ハイパーリンク設定

< ;font size="5">

ここがトップアンカーです

1期

2期

;第3期

第4期

第5期

第6期

アメリカ

●第1期(1789-1797)これは第1期のアンカーです> ;

名前:ジョージワシントン

ジョージ・ワシントン

生没年: 1732-1799

政党:: 南部連合

●第2代 (1797-1801) これが 2 番目のアンカーです

名前: ジョン アダムス
)ここ3番目のアンカーです

名前:トーマス・ジェファーソン

トーマス・ジェファーソン

生没年:1743-1826

政党:: 中華民主共和国

●第 4 期 (1809-1817)これが第 4 の錨です

名前: ジェームズ・マディソン

ジェームズ・マディソン

生没年: 1751-1836

政党: 中国共産党

●5期( 1817-1825)第 5 期のアンカーはこちら

名前: James Monroe

James Monroe

生没: 1758-1831

政党: 中華民主共和国

> ;l>

テストする前に、読者はコード 4.20 から定義アンカーも使用されていることがわかります アンカーの名前は name 属性で定義されています (名前には制限がなく、カスタマイズ可能です)。アンカー リンクを検索する場合は、href 属性を使用して対応する名前を指定し、名前の前に # 記号を追加します。ブラウザのアドレス バーに http://localhost/a_anchor.htm と入力すると、ブラウジング効果は図 4.21 に示すようになります。

図 4.21 ハイパーリンクのアンカー

閲覧者がハイパーリンクをクリックすると、ページは href 属性値名のアンカー位置まで自動的にスクロールします。

— 注: アンカーを定義するタグ は必ずしも特定のコンテンツを必要とするわけではなく、単なる位置決めにすぎません。

HTML ハイパーリンクの詳細を紹介します。

4.5.5 電子メール、FTP、および Telnet リンク

ハイパーリンクは、Web ページの機能をさらに拡張することもできます。より一般的に使用されるのは、電子メール、FTP、および Telnet 接続です。上記の機能を完了するには、ハイパーリンクの href 値を変更するだけです。電子メールを送信するための記述形式は次のとおりです:

電子メールを送信 電子メール アドレスは、intel@qq.com など、完全である必要があります。 前述したように、Web の閲覧には http プロトコルが使用され、FTP サーバーへのリンク形式は次のとおりです:

リンク テキスト

FTP サーバー リンクと Web ページ リンクの違いは、使用されるプロトコルにあります。 FTPにはサーバー管理者からのログイン許可が必要です。ただし、一部の FTP サーバーは匿名でアクセスでき、一部の公開ファイルを取得できます。同様に、Telnet プロトコルのサーバーへの接続には、次の形式で同様の方法が使用されます:

リンク テキスト

Telnet プロトコルはほとんど使用されず、http プロトコルが主に使用されます。 D:web ディレクトリに Web ページ ファイルを作成し、mail.htm という名前を付け、コード 4.21 に示すようにコードを記述します。

コード 4.21 ハイパーリンクのその他の設定: mail.htm

ハイパーリンクのその他の設定

mail

FTP サーバーに接続します a>

Telnet サーバーに接続します

ブラウザのアドレスバーに http://localhost/mail.htm と入力すると、ブラウジング効果は図 4.22 のようになります。

HTML ハイパーリンクの詳細を紹介します。図 4.22 ハイパーリンクのその他の設定

以上がHTML ハイパーリンクの詳細を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート