リンクは単にクリック可能なテキストとして定義されているため、このテキストがクリックされるたびにあるページから別のページに移動(dòng)するのに役立ちます。あるページから別のページに移動(dòng)するには、ページ、畫像、Web サイトなどの要素へのリンクを指定します。 HTML リンクは を使用します。パスを持つ href 屬性を持つタグは、実際にはジャンプしたいのです。 HTML コードに含まれるリンクはデフォルトで青色で表示されます。ユーザーが以前にこのリンクにアクセスしたことがある場(chǎng)合は、紫色で表示されます。 CSS を使用してこのリンクの色を変更することもできます。このトピックでは、HTML でのページのリンクについて學(xué)習(xí)します。
HTML でのリンク ページの構(gòu)文
HTML を使用して実際にページのリンクがどのように行われるかを見てみましょう。
構(gòu)文:
<a href="url"> Text_Content </a>
上記の構(gòu)文、アンカー タグは、ターゲット リンクなどの定義された屬性を使用して、新しいターゲット ページまたはドキュメントを定義して開くのに役立ちます。
これは、HTML ファイル パスのコンテンツで前述した絶対ファイル パスとまったく同じように機(jī)能します。
構(gòu)文:
<a href="url"></a<strong>>
同じ構(gòu)文を使用してコンテンツの単純なパスを定義することで、Web サイトの特定のページまたは部分を開くこともできます。
特定のページを開く必要がある場(chǎng)合は、
のような相対ファイル パスを使用することもできます。構(gòu)文:
<a href="page_name.html"></a>
HTML リンクを使用すると、空白のブラウザ ウィンドウを開いたり、構(gòu)文を使用して Web ページを新しいウィンドウで開いたりできるため、もう 1 つ興味深いことができます。
構(gòu)文:
<a href="Browser's _URL" target="_blank"></a>
親ウィンドウで Web ページを開きたい場(chǎng)合は、次のような構(gòu)文を使用することもできます:
構(gòu)文:
<a href="path" target="_parent"> </a>
HTML を使用してページにリンクするにはどうすればよいですか?
前と同様に、href 屬性を持つアンカー タグを使用して、Web ページ、畫像、その他のドキュメントをリンクする方法を説明しました。これは、絶対パスと相対パスの両方を定義することによって行われます。
私たちは、新しい空白のウィンドウを開く、親ウィンドウで Web ページを開く、デフォルトで使用しているようにセルフ ウィンドウでページを開く、ドキュメントを開くなどの機(jī)能を?qū)g行するためのリンクのターゲットを処理する方法にも精通しています。 _top 屬性などを使用して、フルブラウザウィンドウで実行します。
ブックマークを作成するためのリンク
HTML のリンクを使用してブックマーク アンカーを作成する方法を見てみましょう。これらの機(jī)能は、Web ページのブックマークとして機(jī)能します。大きなページ データから何かを見つけたいときは、テキストまたはドキュメントをリンクとして定義するだけで、このターゲットの場(chǎng)所に直接ジャンプできます。
ブックマークを定義するには、タグ 內(nèi)の href に含まれる「#」と呼ばれる記號(hào)を渡すことにより、その値よりも実際にジャンプしたい特定の要素に屬性として ID を追加する必要があります。 。これは以下に示すとおりです:
例:
<a href="#home"> Homepage </a> <h4 id="home"> Home </a> <h6>This code works as a bookmark, so can jump directly to the home Section by clicking on link </h6>
href 屬性を使用してアンカー タグにそのページの URL を定義するだけで、別のページから特定のセクションを直接開くこともできます。これは次のとおりです:
例:
<a href="Demo.html #contactus"> Contact US </a>
ドキュメントをダウンロードするためのリンク
HTML でのリンクを利用して、ドキュメントのダウンロードに役立つリンクを作成することもできます。テキストをリンクとして定義するのと同じものがあり、宛先ファイルのパスを URL として追加するだけなので、このリンクをクリックするたびに、接続されているドキュメントまたは Web ページが自動(dòng)的にダウンロードされます。そのため、PDF、zip、jpg などのファイル形式をダウンロードできます
例:
<a href="downloads/demo.pdf"> This will download file in PDF format </a> <a href="downloads/brochures.zip"> This will download file in zip Format </a> <a href="downloads/dinjo.jpg"> This will download file as a Image</a>
HTML リンクとしての畫像: HTML リンクのもう 1 つの機(jī)能は、畫像を HTML ドキュメント內(nèi)のリンクとして考慮することです。これは次のように定義できます:
例:
<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>
リンクとしてのボタン: HTML ではボタンをリンクとして定義することもできます。さらに、JavaScript コードを追加する必要があります。したがって、クリック イベントが発生すると、リンクされたページが開きます。
HTML でのページのリンク例
以下に挙げる例は次のとおりです
例 #1
この例では、Web サイト用のリンクと、システムにローカルに保存されている Web ページ用の単純な HTML リンクを追加しています。
コード:
<!DOCTYPE html> <html> <head> <title>Linking Pages in HTML</title> </head> <body> <h2>HTML Page Link</h2> <p>Stay stunned with us for the latest news and update across all over globe </p> <h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4> <p>Open another webpage by linking pages in HTML</p> <h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4> </body> </html>
出力:
最初のリンクの場(chǎng)合、Web サイトが開きます
2 番目のリンクでは、ローカル システムに保存されている Web ページが開きます
例 #2
これは、クリックされるたびに新しいタブで Web ページを開くためのリンクと、新しいドキュメントを開くためのリンクとして畫像を使用していることを示す例です。
コード:
<html> <head> <title>Linking Pages in HTML</title> </head> <body> <h2>linking Pages in HTML</h2> <p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p> <h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4> <h2>HTML Image as Page Link</h2> <p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p> <a href="Webpage%20Design%20HTML.html"> <img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a> </body> </html>
出力:
The first link to open another page in the new target window:
Image as a link to open another webpage:
Example #3
In this example, we are using Button as a link.
Code:
<!DOCTYPE html> <html> <body> <h4>Linking Pages in HTML Using Button as a Link</h4> <p>Most important thing we can do give the link to the button to open another page.</p> <button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button> </body> </html>
Output:
Whenever we are going to click on the button, it will work as a link to open another page:
Conclusion
Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.
以上がHTML でのページのリンクの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國(guó)語版
中國(guó)語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8641
17
1787
16
1730
56
1581
29
1448
31
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
最新のページの正しいHTML5 Doctypeを宣言します。
Jul 03, 2025 am 02:35 AM
Doctypeは、ページを解析するために使用するHTML標(biāo)準(zhǔn)をブラウザに伝えるステートメントです。最新のWebページは、HTMLファイルの先頭に記述するだけです。その機(jī)能は、ブラウザが奇妙なモードではなく標(biāo)準(zhǔn)モードでページをレンダリングし、その前にスペースやコメントがない最初の行に配置する必要があることを確認(rèn)することです。それを書く正しい方法は1つだけであり、古いバージョンやその他のバリアントを使用することはお?jiǎng)幛幛筏蓼护蟆?charset、viewportなどのその他は、部分的に配置する必要があります。
CSSとJavaScriptをHTML5構(gòu)造と効果的に統(tǒng)合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥當(dāng)な読み込み順序、デカップリング設(shè)計(jì)と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長(zhǎng)する構(gòu)造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問題を回避する必要があります。 3. JavaScriptは、前に導(dǎo)入され、Deferまたは非同期を使用して非同期にロードすることをお?jiǎng)幛幛筏蓼埂?4. 3つの間の強(qiáng)い依存性を減らし、データ - *屬性とクラス名制御ステータスを介して動(dòng)作を促進(jìn)し、統(tǒng)一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協(xié)力することができます。
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動(dòng)的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無効にする屬性を介して無効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問題に注意してください：無効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
HTMLヘッド要素內(nèi)のドキュメントメタデータの構(gòu)成
Jul 09, 2025 am 02:30 AM
htmlheadのメタデータは、SEO、ソーシャル共有、ブラウザの動(dòng)作にとって重要です。 1.ページのタイトルと説明を設(shè)定し、使用して簡(jiǎn)潔で一意に保ちます。 2.オープングラフとツイッターのカード情報(bào)を追加してソーシャル共有効果を最適化し、畫像サイズに注意を払い、デバッグツールを使用してテストします。 3.文字セットとビューポート設(shè)定を定義して、多言語サポートがモバイル端末に適合していることを確認(rèn)します。 4.著者の著作権、ロボット制御、および標(biāo)準(zhǔn)的な防止コンテンツなどのオプションのタグも合理的に構(gòu)成する必要があります。
新しいHTML5メソッド（FormData）を使用してフォームデータを送信する
Jul 08, 2025 am 02:28 AM
HTML5のFormData APIを使用してフォームデータを送信する方が便利です。 1.名前屬性を持つフォームフィールドを自動(dòng)的に収集したり、データを手動(dòng)で追加したりできます。 2.ファイルのアップロードに適したMultiPart/Form-Data形式での送信をFetchまたはXmlhttpRequestを介してサポートします。 3.ファイルを処理する場(chǎng)合、FormDataにファイルを追加してリクエストを送信する必要があります。 4.同じ名前のフィールドが上書きされ、JSON変換とネスト構(gòu)造を処理する必要はないことに注意してください。
HTML iframeタグを使用して別のサイトからコンテンツを埋め込む方法は？
Jul 04, 2025 am 03:17 AM
タグを使用して、他のWebサイトコンテンツを獨(dú)自のWebページに埋め込みます?；镜膜蕵?gòu)文は次のとおりです。幅、高さ、およびstyle = "border：none;"を追加できます。外観を制御するため。レスポンシブレイアウトを?qū)g現(xiàn)するために、サイズをパーセンテージで設(shè)定するか、コンテナを使用してパディングと絶対的な位置を組み合わせてアスペクト比を維持し、ドメインクロスの制限、読み込み性能、SEOインパクト、セキュリティポリシーに注意を払うことができます。一般的な用途には、マップの埋め込み、サードパーティフォーム、ソーシャルメディアコンテンツ、內(nèi)部システム統(tǒng)合が含まれます。
