HTML+CSS アンカーリンクで簡単に始められる
アンカー リンクとは何ですか?
HTML 内のリンクの正しい用語は「アンカー」と呼ばれるもので、大きくて扱いにくいコンテンツを含む Web ページによく使用されるアンカー リンク (ブックマーク リンクとも呼ばれます) を指します。名前付きアンカーを使用すると、ドキュメントを指すだけでなく、ページ上の特定の段落を指すこともでき、リンク オブジェクトをフォーカスに近づける「正確なリンク」の便利なツールとしても使用できます。閲覧者にとって、Web ページのコンテンツを表示するのに便利です。これは、本を読むときの目次のページ番号や章のリマインダーに似ています。タグ アンカーは、ページの特定の部分をターゲットにする必要がある場合に最適な方法です。
アンカーリンクの作成方法
ステップ 1: 名前付きアンカーを作成する
名前付きアンカーを作成するには、Dreamweaver 編集ビューで、アンカーに名前を付ける場所にカーソルを置きます。 「レコードの挿入」ツールバーを選択し、「名前付きアンカー」オプションを選択します。 [名前付きアンカー] ダイアログ ボックスが表示されます。
名前付きアンカーの作成ダイアログボックス 「アンカー名」テキストボックスにアンカーの名前を入力します。通常、アンカーが Web ページの上部にある場合は、「top」と入力できます。アンカー名にはスペースを含めることはできず、レイヤー内に配置することはできません。
ステップ 2: 名前付きアンカーへのリンク
アンカーを定義した後、名前付きアンカーにリンクできます。 「トップに戻る」というテキストなど、リンクを作成するテキストまたは画像を選択します。プロパティ パネルの [リンク] テキスト ボックスに、「#top」などの「#アンカー名」を入力します。写真2に示すように。
アンカーされた保存済み Web ページにリンクした後、F12 キーを押して Web ページをプレビューします。ブラウザでリンク テキスト (トップに戻る) をクリックすると、Web ページは「トップ」とマークされた名前付きアンカーの行に移動します。
追記: 他のドキュメント内の「top」という名前のアンカーにリンクするには、ファイルの絶対パス + ファイル名 #top の形式になります。アンカー名では大文字と小文字が区別されます。
SEOにおけるアンカーリンクの役割
アンカーリンクはWebページに適切なアンカーリンクを追加することで、WebページとそのWebページが指すWebページの重要性を高め、結果としてWebページに影響を与えます。キーワードランキング。 SEOにおけるアンカーリンクの効果は、主に以下の側面に反映されます:
アンカーリンクが配置されているページへの効果
通常、ページに追加されたリンクとアンカーリンクには一定の関係があります。したがって、アンカー テキストは、アンカー リンクが配置されているページのコンテンツの評価として使用できます。たとえば、この記事には「SEO」へのリンクが含まれている場合、この記事は SEO と一定の関係があることを意味します。
指されたページにおけるアンカーリンクの役割
アンカーリンクは指されたページの内容を正確に記述することができるため、指されたページの評価として利用することができます。
キーワードランキングに対するアンカーリンクの影響
キーワードランキングにおけるアンカーリンクの重要性は、コンテンツページをランダムにリンクできることで、スパイダーがより多くのページをうまくクロールできるようになり、同時に重みを均等に転送できることです。 、ページの関連性が高まり、最終的には Web サイトのキーワードランキングが向上します。
アンカーリンクとハイパーリンクの違い
1. キーワードランキングの違い。
キーワードの順位差に関して言えば。数値を使用して、Baidu ランキングの違いを説明できます。アンカーテキスト付きのリンクを作成するとします。たとえば、キーワード「Webmaster Network」を作成します。この外部リンクが Baidu によって含まれている場合。 Baidu によってこのリンクに与えられた重みがアラビア数字で表されると仮定します。たとえば、5 の場合、この外部リンクには、キーワード Webmaster.com に対して 4 のランキングが割り当てられ、Web サイトの他のキーワードに対して 4 のランキングが割り当てられる可能性があります。
2. バックリンクの違い
SEO を行うとき、私たちは通常、自分の Web サイトのバックリンクに Yahoo のバックリンクと Baidu ドメインを介してクエリを実行します。アンカーテキストリンクを作成した場合。 Yahoo にそれを含めるよう依頼すると、Yahoo のバックリンクを通じてアンカー テキスト リンクをクエリできるようになります。このリンクが Baidu によって含まれている場合、Baidu ドメインを通じてクエリを実行することはできません。 URL リンクを作成し、Yahoo にそれを含めるように依頼した場合、Yahoo のバックリンクを通じてクエリを実行できます。Baidu にそれを含めるように依頼した場合は、Baidu ドメインを通じてクエリを実行することもできます。つまり、アンカー テキスト リンクにより、当社 Web サイトへの Yahoo のバックリンクの数が増加する可能性があります。 Baidu ドメインの数を増やすことはできません。 URL リンクにより、当社 Web サイトへの Yahoo のバックリンクの数が増加し、Baidu ドメインの数も増加する可能性があります。
アンカーリンクの例: トップに戻る例を作成します。コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>锚点链接</title> </head> <body> <a name="top">我们都一样</a> 推开窗看见星星 一直守在夜空中<br> 心中不免多了些暖暖的感动<br> 一闪一闪的光 努力把黑夜点亮气氛如此安详<br> 你在我的生命中是那最闪亮的星<br> 一直在我深夜中守护着我们的梦<br><br> 这世界那么大我的爱只想要你懂<br> 陪伴我孤寂旅程<br> 你知道我的梦你知道我的痛<br> 你知道我们感受都相同<br> 就算有再大的风也挡不住勇敢的冲动 <br><br> 最美的太阳 我的世界 因为有你才会美<br> 我的天空 因为有你不会黑<br> 给我快乐 为我伤心流眼泪<br> 给我宽容 让我能展翅高飞<br> 你的话你的泪 你的笑你的美<br> 在我眼中胜过最美的玫瑰<br> 抱着梦 往前飞 不逃避 不后退<br> 你是我成功路上的堡垒<br> 给我翅膀 让我可以翱翔<br> 给我力量 是你让我变坚强<br> 不怕受伤 因为有你在身旁<br> 你的笑 你的泪 是我筑梦路上最美的太阳<br><br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手，一直走到最后 <br> 这一刻怎么回头 <br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手，一直走到最后 <br> 这一刻怎么回头 <br> <a href="#top">顶部</a> </body> </html>
Web ページに多くのコンテンツがある場合、ページを下に見ていき、クリックするとトップに戻ります、ページの先頭に直接移動します
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
