ホームページ > 記事 > ウェブフロントエンド > HTML はページ内のリンクのジャンプを設定します (アンカーリンク)

HTML はページ内のリンクのジャンプを設定します (アンカーリンク)

不言オリジナル: 2018-12-04 15:17:2110180ブラウズ

アンカーリンクとは何ですか?いわゆるアンカーリンクとは、ページの長さが長い場合に、指定した場所にジャンプするためのリンクを作成することです。では、HTMLの設定については次の記事で紹介します。 . ページ内のリンクをジャンプする方法。

まずはHTMLにおけるリンクの書き方を見てみましょう

<a href="#">链接名</a>

リンクアドレス

Changeリンク名ジャンプ位置の要素にidが設定されます。

次に具体的な例を見てみましょう

次の HTML ファイルを作成します

コードは次のとおりです

Anchor.HTML はページ内のリンクのジャンプを設定します (アンカーリンク)

<!DOCTYPE HTML はページ内のリンクのジャンプを設定します (アンカー リンク)>
<HTML はページ内のリンクのジャンプを設定します (アンカー リンク)>
<head>
<meta http-equiv="Content-Type" content="text/HTML はページ内のリンクのジャンプを設定します (アンカー リンク); charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">区域1</a><br />
  <a href="#section2">区域2</a><br />
  <a href="#section3">区域3</a><br />
  <hr />
  <a id="section1">区域1</a>
  <div style="height:300px">内容</div> 
  <a id="section2">区域2</a> 
  <div style="height:300px">内容</div> 
  <a id="section3">区域3</a> 
  <div style="height:300px">内容</div> 
</body>
</HTML はページ内のリンクのジャンプを設定します (アンカー リンク)>

手順:

上記のコードで、

<a href="#section1">区域1</a>

リンク

<a id="section1">区域1</a>

をクリックすると、対応するリンクにジャンプします。ページ。

実行結果

上記の HTML ファイルを実行すると、次の結果が表示されます。

HTML はページ内のリンクのジャンプを設定します (アンカーリンク)

ページ内のエリア 1 のリンクをクリックします。 . ページがジャンプし、画面上部にエリア 1 が表示されます。

HTML はページ内のリンクのジャンプを設定します (アンカーリンク)

同様に、領域 2 と領域 3 をクリックすると、同じ効果が表示されます。

注:

ジャンプ ID はタグでなくても使用できます。次のコードは、ジャンプ先として div タグの ID を指定する場合のコードを示しています。





    


  <a href="#section1">区域1</a>

  区域2

  区域3

  
  区域1
  内容 
  区域2 
  内容 
  区域3 
  内容

この記事はここで終わります。HTML に関するさらに興味深いコンテンツについては、php 中国語 Web サイトの HTML ビデオチュートリアル列に注目してください。！！

以上がHTML はページ内のリンクのジャンプを設定します (アンカーリンク)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php html

声明：

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

前の記事：HTMLフォントとは何ですか?次の記事：HTMLフォントとは何ですか?

続きを見る

HTML はページ内のリンクのジャンプを設定します (アンカー リンク)

関連記事

HTML はページ内のリンクのジャンプを設定します (アンカーリンク)