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 のデプロイプロセスの詳細な説明

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

推薦する

Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

要件:PC側とモバイル側は2つの独立したプロジェクトです。2つのプロジェクトの内容は基本的に同じで、...

ドラッグアンドドロップでVueユーザーインターフェースを生成する方法

目次序文1. 技術原理1.1 レイアウト1.2 コンポーネント1.3 ステータス1.4 イベント1....

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

VUEはタイムライン再生コンポーネントを実装します

この記事の例では、タイムライン再生コンポーネントを実装するためのVUEの具体的なコードを参考までに共...

MySQLdump コマンドを使用した MySQL データの移行

このソリューションの利点はシンプルさと使いやすさですが、欠点はダウンタイムが長くなることです。 した...

Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。 ...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

テーブルレイアウトの長所と短所、そして推奨されない理由

テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...

VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します

ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...

フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法

まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

CentOS 8 カスタム ディレクトリ インストール nginx (チュートリアルの詳細)

1. ツールとライブラリをインストールする# PCRE は、Perl 互換の正規表現ライブラリを含...

VMware10 での CentOS 7 のインストールと設定のチュートリアル

Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明最近、...