ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLのアンカーポイントとは何ですか

HTMLのアンカーポイントとは何ですか

青灯夜游
青灯夜游オリジナル
2021-05-12 15:11:258388ブラウズ

HTML のアンカー ポイントは、Web ページ上のハイパーリンクの 1 つであり、名前付きアンカー ポイントとも呼ばれ、訪問者がハイパーリンクをクリックした後に到達する場所を正確に制御できます。アンカーは、ユーザーがドキュメント内にタグを設定するときに使用します。通常、これらのタグは特定のトピックまたはドキュメントの先頭に配置され、これらの名前付きアンカーへのリンクが作成され、閲覧者を指定された場所にすばやく移動できます。

HTMLのアンカーポイントとは何ですか

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

アンカー ポイント -- Web ページ上のハイパーリンクの一種で、名前付きアンカー ポイントとも呼ばれ、名前によって配置されます。名前付きアンカーは、クイック ロケーターのようなページ内のハイパーリンクであり、広く使用されています。

名前付きアンカー: ユーザーはドキュメント内にタグを設定します。これらのタグは通常、特定のトピックまたはドキュメントの先頭に配置されます。次に、視聴者を指定した場所にすばやく移動できる名前付きアンカー リンクを作成します。

アンカー リンクを作成する利点:

アンカー リンクを使用すると、訪問者の到着場所を正確に制御できます。ハイパーリンクをクリックした後。名前付きアンカーのないリンクは、訪問者をターゲット ページの上部に誘導します。ページ内の記事が長い場合、スクロールバーを上下に動かして必要な部分を探すのは面倒ですが、ページ内にハイパーリンクを作成することで必要な情報を素早く見つけることができます。

名前付きアンカーの作成方法:

名前付きアンカーへのリンクを作成するプロセスは 2 つのステップに分かれています。まず、名前付きアンカーを作成し、次にその名前付きアンカーへのリンクを作成します。

HTML ページの適切な場所に次のアンカー ポイントを定義します:

<a name="top">这里是TOP部分</a> 
<a name="content">这里是CONTENT部分</a> 
<a name="foot">这里是FOOT部分</a>

(name 属性の代わりに id 属性を使用できます。名前付きアンカーも有効です。)

上記のアンカー ポイントにアクセスするには 2 つの方法があります

1 つは、ハイパーリンク タグ 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed を使用してアンカー リンクを作成する方法で、主にアンカー アクセスに使用されます。ページ内

<a href="#top">点击我链接到TOP</a> 
<a href="#content">点击我链接到CONTENT</a> 
<a href="#foot">点击我链接到FOOT</a>

もう 1 つの方法は、ページ アドレスの直後にアンカー マークを追加することです。これは主に異なるページ間のアンカー アクセスに使用されます。

このページのアドレスが http:/ の場合/file path/index .html、フット アンカーにアクセスするには、次のリンクにアクセスするだけです。

http://文件路径/index.html#foot

html アンカーは正確に何をしますか?

簡単に言うと、たとえば、非常に長い記事をセグメントごとに正確に読みたい場合は、アンカー ポイントを使用できます。

コード:

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" ></a> 
...文字省略

実際、アンカー ポイントに必要なのは名前だけです。互換性を高めるために ID が追加されます。

href の値は次のようになります。 name / i d と同じである必要があり、一貫性があり、先頭に「#」を追加する必要があります。上記のコードは ie6/7、ff では互換性がありますが、ie8 では互換性がありません。

アンカー ポイントの 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed の値は空であるため、外観に影響を与えないようにスペースを追加するだけです。

次のコードは次のとおりです。 ie8 と互換性あり

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略

別の質問ですが、特定のページ (123.html など) のアンカー コンテンツを表示したいですか?

コードは次のとおりです

<a href="123.html#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略

これは昨日、背景の作業をしていたときに、「位置の変更」を実装したかったので、アンカーマークを外側に移動しました(通常はそれは私には忘れられています)。

しかし、プログラムは、値を取得するには接続に「?」または「&」が必要であると言っているので、私のアンカーポイントには互換性がありません...

ハッ!将来的には解決策が見つかるでしょう!

JSP ページではアンカー ポイントの互換性に問題がありますが、静的ページでは問題がないため、学習する価値はあります。

WEB開発ではページアンカーが使われます。

HTML ページ アンカーは、ページの特定のセクションにリンクするために使用されます。 W3School では、アンカーの作成には 3499910bf9dac5ae3c52d5ede7383485 (アンカー) タグと name 属性を使用すると述べていますが、これがページ アンカーを作成する唯一の方法ではありません。 HTML ページのアンカーを作成する 2 つの方法について簡単に説明しましょう。

テストには W3School のオンライン テスト ツールを使用できます。リンクを開いた後のテストコードは64fabc9fc6232be280e37d39127ad19cとfd7787ab928c3fdea11bcb30cd63ab44を使用しており、テストには問題ありません。次に、「c1a436a314ed609750bd7c7d319db4da c1f1ad47300222ded4019cb6b6229050第 4 章 5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd」を「e7cf642edfde96e98a01200200b490f8第 4 章 2e9b454fa8428549ca2e64dfac4625cd」に変更します。テスト後の効果は同じです。

ページアンカーを作成するときは、アンカータグの name 属性を使用するほかに、id 属性も使用できることに注意してください。アンカー 3499910bf9dac5ae3c52d5ede7383485 タグの href 属性の値は、 # ターゲットの名前または ID の値から始まります:

<html> 
<body> 
<p> 
<a href="#method1">页面锚点方法一</a> 
</p> 
<p> 
<a href="#method2">页面锚点方法二</a> 
</p> 
<h2><a name="method1">方法一</a></h2> 
<p>使用锚标签的 href 和 name 属性</p> 
<h2 id="method2">方法二</h2> 
<p>使用锚标签和 id 属性</p> 
</body> 
</html>

学習ビデオ共有: css ビデオ チュートリアル

以上がHTMLのアンカーポイントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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