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

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

Mar 10, 2017 am 11:38 AM
htmlハイパーリンク

この記事では、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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1)低ケースタグと属性を使用します。2)一貫したインデントを保持し、3)シングルまたはダブルの引用符を選択して固執する、4)プロジェクトのさまざまなスタイルの混合を避け、5)きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は?ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は?Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか?DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか?Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は? Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか?お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか?Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか?お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか?Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか?モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は?Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は?Apr 30, 2025 pm 03:09 PM

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか?お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか?Apr 30, 2025 pm 03:06 PM

モバイルデバイスでアプリケーションを開発する際に携帯電話でネイティブセレクトの問題は、ユーザーが選択を行う必要があるシナリオに遭遇することがよくあります。ネイティブセル...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境