目次
第一篇文章
第二篇文章
第三篇文章
ホームページ 毎日のプログラミング HTMLの知識 HTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き)

HTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き)

Sep 11, 2018 pm 04:15 PM
ハイパーリンク アンカーポイント

この記事では、HTMLのハイパーリンクアンカー設定の追加方法とその機能を主に紹介します。

HTML のハイパーリンクとアンカー 私の友人のほとんどはすでにこの概念をよく知っていると思いますが、HTML を始めたばかりの初心者にとっては、HTML に ハイパーリンク アンカーを追加する方法 という疑問がまだ残っているかもしれません。不明瞭。ということでこの記事は初心者フレンド向けに紹介しましたので、必要な方の参考になれば幸いです!

以下、具体的なHTMLコード例を通して詳しく説明していきます。

HTML にハイパーリンク アンカーを追加するコード例は次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

<a href="http://www.php.cn">PHP中文网</a>

 

<a href="#one">第一篇文章</a>

<a href="#two">第二篇文章</a>

<a href="#three">第三篇文章</a>

 

<a name="one"></a>

<h1 id="第一篇文章">第一篇文章</h1>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

 

<a name="two"></a>

<h1 id="第二篇文章">第二篇文章</h1>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

 

<a name="three"></a>

<h1 id="第三篇文章">第三篇文章</h1>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

<p>这是一段文章内容</p>

 

<a href="">回到顶部</a>

</body>

</html>

ログイン後にコピー

このコードでは、主に タグを After に直接追加します。 href="ジャンプ先のリンクアドレス" 属性を使用すると、テキストハイパーリンクを実装できます。たとえば、上記のコード セクション PHP 中国語 Web サイト は、PHP 中国語 Web サイトのフィールドをクリックすると、次のページに直接ジャンプできることを認識しています。指定されたリンクページ。 aタグ内に

name="#アンカー名"

属性を追加すると、アンカーリンクが設定されることを意味します。そして本文中で、指定した位置にアンカーポイントを設定する、つまりaタグ内に name="アンカー名"を追加します。ここで # 記号を追加しないように注意してください。 上記のコードの全体的な効果は次のとおりです:

HTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き)

HTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き)

HTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き) ページ内に記事コンテンツの大きなセクションがある場合、ページにアンカー ポイントを設定して目的を達成できます。 fast 指定されたオブジェクト操作にジャンプします。上記のように、最初の記事、2 番目の記事、3 番目の記事をクリックすると、指定したコンテンツ部分にすぐにジャンプします。同時に、記事の下部に上部に戻るハイパーリンクを追加できます。a タグの href 属性値を空に設定するだけです。


この記事は、

HTMLハイパーリンクアンカー

を追加する具体的な方法と機能について説明しているので、誰もがアンカーリンクと通常のハイパーリンクの違いをある程度理解しているはずです。上記の内容は非常にシンプルで理解しやすいので、困っている友達に役立つことを願っています。対応するビデオ チュートリアル HTML にハイパーリンクを追加し、アンカー ページの好きな場所に移動します】も参照できます。

以上がHTMLにハイパーリンクやアンカーを追加する方法と機能を詳しく解説(動画付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ハイパーリンクが開けない問題を解決 ハイパーリンクが開けない問題を解決 Feb 18, 2024 am 09:57 AM

ハイパーリンクが開けない問題を解決

Word文書のハイパーリンクを開けません Word文書のハイパーリンクを開けません Feb 18, 2024 pm 06:10 PM

Word文書のハイパーリンクを開けません

WPS でハイパーリンクを開けない場合はどうすればよいですか? WPS ハイパーリンクが開かない場合の解決策 WPS でハイパーリンクを開けない場合はどうすればよいですか? WPS ハイパーリンクが開かない場合の解決策 Mar 13, 2024 pm 08:40 PM

WPS でハイパーリンクを開けない場合はどうすればよいですか? WPS ハイパーリンクが開かない場合の解決策

PPT スライドにハイパーリンクを挿入してスキップ再生を実現する方法のチュートリアル PPT スライドにハイパーリンクを挿入してスキップ再生を実現する方法のチュートリアル Mar 26, 2024 pm 02:51 PM

PPT スライドにハイパーリンクを挿入してスキップ再生を実現する方法のチュートリアル

ハイパーリンクを挿入すると Outlook がフリーズする ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

ハイパーリンクを挿入すると Outlook がフリーズする

正規表現を使用して、PHP で文字列内の URL アドレスをハイパーリンクに置き換える方法 正規表現を使用して、PHP で文字列内の URL アドレスをハイパーリンクに置き換える方法 Jun 22, 2023 pm 02:22 PM

正規表現を使用して、PHP で文字列内の URL アドレスをハイパーリンクに置き換える方法

ハイパーリンクを開けないのはなぜですか? ハイパーリンクを開けないのはなぜですか? Feb 22, 2024 pm 03:33 PM

ハイパーリンクを開けないのはなぜですか?

pptのハイパーリンクの設定方法をご存知ですか? pptのハイパーリンクの設定方法をご存知ですか? Mar 20, 2024 am 11:40 AM

pptのハイパーリンクの設定方法をご存知ですか?

See all articles