コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > アンカーリンクの作り方

アンカーリンクの作り方

不言
リリース： 2018-12-27 13:49:45
オリジナル
37186 人が閲覧しました

Web ページ上のコンテンツが多すぎる場合は、アンカー リンクを使用してその場所にジャンプできます。アンカー リンクを通じて、ドキュメントだけでなく、ページ内の特定の段落もポイントできます。 Web ページ内のコンテンツを閲覧しやすくするには、アンカー リンクを実装するにはどうすればよいでしょうか。この記事ではアンカーリンクの導入方法を紹介します。

アンカーリンクの作り方

#方法 1: アンカーの位置決めに ID を使用する

具体的な例を見てみましょう##コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<a href="#string">跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a id="string">hello,I&#39;m here!</a>
</body>
</html>
ログイン後にコピー

操作効果は次のとおりです


「ジャンプ」をクリックすると「こんにちは」にジャンプします。 I'm here" !" の場合、結果は次のようになります。

アンカーリンクの作り方

# は、現在のページの "hello, I'm here!" にジャンプします。

アンカーリンクの作り方

方法 2: name 属性を使用してアンカー リンクを実装する

具体的な例を見てみましょう

コードは次のとおりです。 follow

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<a href="#string">跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a name="string">hello,I&#39;m here!</a>
</body>
</html>
ログイン後にコピー

また、マウスで「ジャンプ」をクリックすると、「こんにちは、ここにいます!」という現在のページにジャンプします。

以上がアンカーリンクの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
アンカーリンク
ソース：php.cn
前の記事：HTMLのid属性とname属性の違いは何ですか 次の記事：ブートストラップを使用してフォームを作成する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
アンカーポイント内の画像に対して境界線の半径が機能しない 次の HTML コードを使用しています: <aclass="-video-detail-qualifiers-branding"><imgsr...
から 2024-04-06 17:20:25
0
1
347
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート