ホームページ  >  記事  >  ウェブフロントエンド  >  HTML ハイパーリンクの詳細図

HTML ハイパーリンクの詳細図

高洛峰
高洛峰オリジナル
2017-03-14 17:49:381688ブラウズ

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

ハイパーリンク

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

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

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

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

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

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

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

head>

ハイパーリンク設定

font size="5">リスト設定ページに入ります

;

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

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

読者は、図 4.19 からハイパーリンクのデフォルトのスタイルを確認できます。ページ上のリンクをクリックすると、同じディレクトリ内の ul_ol.htm ページにジャンプします。前のセクションのリスト設定ページ。ブラウザの「戻る」ボタン

をクリックして a.htm ページに戻ると、テキスト リンクの色が紫に変わり、このリンクにアクセスしたことが閲覧者に伝わります。

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

top

(ブラウザーのウィンドウ全体で開きます) です。 、すべての

framework

構造)、_parent (前のウィンドウで開く) を無視します。 — 注: _top メソッドと _parent メソッドはフレーム ページに使用され、次の章で詳しく説明されます。 4.5.3 リンクにプロンプ​​ト テキストを追加する

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

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

ハイパーリンク設定

< ;font size="5">

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

4.5.4 アンカーとは何ですか?

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

ハイパーリンクタグのname属性はアンカーの名前を定義するために使用され、1つのページに複数のアンカーを定義でき、ハイパーリンクの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 値を変更するだけです。電子メールを送信するための記述形式は次のとおりです:

Send me email 電子メール アドレスは、intel@qq.com など、完全である必要があります。 。

前述したように、Web の閲覧には http プロトコルが使用され、FTP サーバーへのリンク形式は次のとおりです:

リンク テキスト a>

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

リンク テキスト

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

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

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

mail

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

Telnet サーバーに接続します

s

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

HTML ハイパーリンクの詳細図図 4.22 ハイパーリンクのその他の設定

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

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