HTMLにアンカーポイントを設定する方法-フロントエンドQ&A-php.cn

HTMLにアンカーポイントを設定する方法

藏色散人

リリース： 2023-01-06 11:15:23

オリジナル

24918 人が閲覧しました

htmlアンカーポイントの設定方法: 1. アンカーポイントリンク "..."; を設定します。 2. 上の必要な位置に配置します。ページのアンカーポイントを設定します; 3. href のパスの後に「# アンカー名」を追加します。

HTMLにアンカーポイントを設定する方法

この記事の動作環境：Windows7システム、HTML5版、DELL G3コンピュータ

htmlのアンカーポイント

ページ内ジャンプのアンカー設定

ページ内ジャンプには 2 つの手順が必要です:

方法 1:

①:アンカーリンクを設定猫を探しに行く; (注: href 属性の属性値の先頭に # を追加します)

②: Onページの必要な位置にアンカーポイントを設定します (注: name 属性は a タグ内に記述する必要があり、属性値は href と同じである必要があります) #) タグ内に必要な文字列を必要に応じて記入します (通常は内容を記述しません)

方法 2:

①: 方法 1 と同じ ①

②: アンカーポイントの位置を設定

Meow Star Base

; ジャンプ先の位置のラベルに 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>

ログイン後にコピー