HTML でのアンカータグの使用例の共有

HTML でのアンカータグの使用例の共有
アンカータグの使用法:
同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。
アンカーを使用する方法は、ターゲットの場所を選択し、<a> タグの name 属性の値によって決定される位置決めタグを作成することです。

アンカータグ名。形式は次のとおりです。
<a name="アンカータグ名">
name 属性は、名前付きアンカーを作成するために使用されます。名前付きアンカーを使用すると、ページに直接ジャンプするポインターを作成できます。

記事の内容を特定の部分にリンクできるため、読者は必要な部分を見つけるためにスクロールする必要がありません。
名前付きアンカーを作成するための構文は次のとおりです。
<a name="label">表示するテキスト</a>
name 属性は、名前付きアンカーを作成するために使用されます。アンカー名には任意のテキストを付けることができます。
次の行は名前付きアンカーを定義します。
<a name="tips">役立つヒントセクション</a>

次に、Web ページの任意の場所にこのターゲット タグへのリンクを作成します。タイトルに作成されるリンク アドレス名は、先頭に「#」記号が付いた、配置タグ名と同じである必要があります。形式は次のとおりです。
<a href="#ロケータータグ名">
名前付きアンカーは通常のリンクと同じように表示されます。
「ハイライト」セクションに直接リンクするには、通常、次のように、要求された URL の末尾に # 記号とアンカー名を追加する必要があります。
<a href="Jump'>http://www.w3schools.com/html_links.asp#tips">役立つヒントのセクションへジャンプ</a>

ファイル「html_links.asp」内 (ページ内) で使用できるアンカー リンクの構文は次のとおりです。
役立つヒントセクションへジャンプ

テキストの説明を読むのは面倒です。123WORDPRESS.COM のユーザー全員に簡単な例を示します。


ヒント: 実行前にコードの一部を変更することができます

それをページにコピーして、動作するかどうか試してみてください。

<<:  Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明

>>:  デザイン理論:フォントデザインの基礎

推薦する

MySQLの通常インデックスとユニークインデックスの違いの詳しい説明

目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...

WeChat アプレット学習 WXS 使用方法チュートリアル

wxsとは何ですか? wxs (WeiXin Script) は、小規模プログラム用のスクリプト言語...

MySQL マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

一般的なフロントエンドJavaScriptメソッドのカプセル化

目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

EclipseでTomcatを作成する原理の詳細な説明

ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...

jsでの位置計算を徹底的に理解するのに役立つ記事

目次導入スクロール要素.スクロール()要素.scrollHeight/scrollWidth要素.s...

Docker での Redis の永続ストレージの詳細な説明

この章では、dockerの下にあるSpring BootプロジェクトでRedisを操作し始めます。準...

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...

Vueでlessを使用する問題を解決する

1. less依存関係をインストールします: npm install less less-loade...