ホームページ > 記事 > ウェブフロントエンド > HTMLにアンカーポイントを設定する方法
HTMLにアンカーポイントを設定する方法
- 藏色散人オリジナル
- 2021-05-25 10:56:1724915ブラウズ
htmlアンカー ポイントの設定方法: 1. アンカー ポイント リンク "0a9b0e264ddbf322cec2bf7d1441f351...5db79b134e9f6b82c0b36e0489ee08ed"; を設定します。 2. 上の必要な位置に配置します。ページのアンカーポイントを設定します; 3. href のパスの後に「# アンカー名」を追加します。
この記事の動作環境：Windows7システム、HTML5版、DELL G3コンピュータ
htmlのアンカーポイント
ページ内ジャンプのアンカー設定
ページ内ジャンプには 2 つの手順が必要です:
方法 1:
①:アンカーリンクを設定 0a9b0e264ddbf322cec2bf7d1441f351猫を探しに行く5db79b134e9f6b82c0b36e0489ee08ed; (注: href 属性の属性値の先頭に # を追加します)
②: Onページの必要な位置にアンカー ポイントを設定します 90dde8fa6ab21c20f2955ffc174843c05db79b134e9f6b82c0b36e0489ee08ed (注: name 属性は a タグ内に記述する必要があり、属性値は href と同じである必要があります) #) タグ内に必要な文字列を必要に応じて記入します (通常は内容を記述しません)
方法 2:
①: 方法 1 と同じ ①
②: アンカーポイントの位置を設定 69448d96d5155946085bc042e89e96ceMeow Star Base39528cedfa926ea0c01e69ef5b2ea9b0; ジャンプ先の位置のラベルに id 属性を追加します。値は①のhref属性値と同じで、
# を追加しません。 方法2では、アンカーポイントを特別に設定するために別のタグを追加する必要はなく、必要な位置のタグにIDを追加するだけです。 。
小規模なケース:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>萌宠集结号</title>
</head>
<body>
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--设置锚点方法1-->
<h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
クロスページジャンプ
①: アンカーリンクを設定します。 href: # アンカー名内のパスの後に追加します。
例: abb56b5741647426720eaafca57dee84かわいいペットのコレクション ページにジャンプ16ef26f8b7ea0fc89bdf90e275a93e5d
②: ジャンプ先のページにアンカーポイントを設定します 方法は手順②を参照して、どちらかの方法を選択してください。
推奨学習: 「HTML ビデオ チュートリアル 」
以上がHTMLにアンカーポイントを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。