HTML ウェブページでのアンカー（名前付きアンカー）の使用の概要

以下の情報はインターネットから収集したものです

1. アンカーは、Web ページ作成におけるハイパーリンクの一種で、名前付きアンカーとも呼ばれます。名前付きアンカーは、クイックロケーターのようなページ内のハイパーリンクであり、広く使用されています。
英語名: アンカー
名前付きアンカーを使用すると、ドキュメント内にマーカーを設定できます。マーカーは通常、ドキュメント内の特定のトピックまたはその先頭に配置されます。次に、これらの名前付きアンカーへのリンクを作成し、訪問者を指定された場所にすばやく移動させることができます。
名前付きアンカーへのリンクの作成は、2 つの手順で行われます。まず、名前付きアンカーを作成し、次に名前付きアンカーへのリンクを作成します。

サンプルコード

HTML ページ内の適切な場所に次のアンカーを定義します。
<a name="top">これがTOP部分です</a>
<a name="content">これはコンテンツセクションです</a>
<a name="foot">これが足の部分です</a>
（name属性の代わりにid属性を使用することもできます。名前付きアンカーも機能します。[1]）
上記のアンカーポイントにアクセスするには、2 つの方法があります。1 つは、ハイパーリンクタグ <a></a> を使用してアンカーリンクを作成することです。これは主に、ページ内のアンカーポイントアクセスに使用されます。
<a href="#top">クリックするとTOPにリンクします</a>
<a href="#content">クリックするとコンテンツに移動します</a>
<a href="#foot">クリックするとFOOTに移動します</a>
もう 1 つの方法は、ページアドレスの直後にアンカータグを追加することです。これは主に、異なるページ間のアンカーアクセスに使用されます。このページのアドレスが http://file path/index.html の場合、フッターアンカーにアクセスするには、次のリンクにアクセスします。
http://filepath/index.html#foot

2. HTML アンカーは具体的に何に使用されますか?
簡単に言えば、長い記事を段落ごとに正確に読みたい場合は、アンカーポイントを使用できます。

コード：
<a href="#001">001へジャンプ</a>
...本文省略
<a name="001" id="001" ></a>
...本文省略

実際、アンカーに必要なのは名前だけであり、ID を追加すると互換性が高まります。
href の値は name \ id と一致している必要があり、先頭に "#" を追加する必要があります。上記のコードは ie6/7、ff では互換性がありますが、ie8 では互換性がありません。
アンカーポイント <a></a> の値は空なので、外観に影響を与えないようにスペースを追加します。

以下のコードはIE8と互換性があります
<a href="#001">001へジャンプ</a>
...本文省略
<a name="001" id="001" > </a>
...本文省略

もう 1 つの質問ですが、特定のページの特定のアンカーポイント (123.html など) のコンテンツを表示したい場合はどうすればよいでしょうか。

コードは次のとおりです
<a href="123.html#001">001 へジャンプ</a>
...本文省略
<a name="001" id="001" > </a>
...本文省略

昨日背景を制作していた時のものです。「位置変更」を実装したかったので、アンカーマークを移動しました（いつも忘れてしまいます）。
しかし、プログラムでは値を取得する必要があり、接続には「?」または「&」が必要であるとされているため、アンカーポイントは互換性がありません...
へへ！後で解決策があります!
jsp ページではアンカーの互換性に問題がありますが、静的ページでは問題がないため、学習する価値はあります。

3. WEB開発ではページアンカーが使用されます。 HTML ページアンカーは、ページのセクションにリンクするために使用されます。 W3School によれば、アンカーの作成には <a> (アンカー) タグと name 属性が使用されますが、これがページアンカーを作成する唯一の方法ではありません。 HTML ページアンカーを作成する方法は 2 つあります。

W3School のオンラインテストツールを使用してテストできます。リンクを開いた後のテストコードでは<a href="#C4">と<a name="C4">が使用されており、テストに問題はありません。次に、「 <h2> <a name=”C4″>第 4 章 </a> </h2>」を「 <h2 id=”C4″>第 4 章 </h2>」に変更してテストすると、効果は同じです。

注: アンカータグの name 属性を使用するだけでなく、id 属性を使用してページアンカーを作成することもできます。アンカー <a> タグの href 属性の値は # で始まり、その後にターゲットの名前または ID が続きます。

コードをコピー

コードは次のとおりです。

<html>
<本文>
<p>
<a href="#method1">ページアンカーメソッド 1</a>
</p>
<p>
<a href="#method2">ページアンカーメソッド 2</a>
</p>
<h2><a name="method1">方法 1</a></h2>
<p>アンカータグの href 属性と name 属性を使用する</p>
<h2 id="method2">方法 2</h2>
<p>アンカータグと ID 属性の使用</p>
</本文>
</html>

<<: MySQLの左結合を内部結合に素早く変換するプロセス

>>: CSS3 Flex を使用して div コンテンツを水平および垂直に中央揃えするいくつかの方法