ホームページ > 記事 > ウェブフロントエンド > HTMLハイパーリンクの詳しい説明

HTMLハイパーリンクの詳しい説明

不言オリジナル: 2018-04-27 14:25:471870ブラウズ

この記事では主に HTML ハイパーリンクの詳細な説明を紹介します。これは、ウェブサイトのさまざまな要素に使用されるため、必要な友人に参考にしていただけます。すべてのページはハイパーリンクで接続されており、ハイパーリンクによってページ間のジャンプが完了します。ハイパーリンクはブラウザとサーバー間の対話の主な手段であり、次のテクノロジーでハイパーリンクについて徐々に詳しく学んでいきます。

ハイパーリンク

ハイパーリンクは、Web サイトで頻繁に使用される HTML 要素です。Web サイトのさまざまなページがハイパーリンクによって接続されており、ハイパーリンクによってページ間のジャンプが完了します。ハイパーリンクはブラウザとサーバー間の対話の主な手段であり、次のテクノロジーでハイパーリンクについて徐々に詳しく学んでいきます。

— 注: 画像はリンクとしても使用できます。詳細については、次の章「Web ページ内の画像」で説明します。

4.5.1 テキストへのリンクの追加ハイパーリンクのタグは、テキストへのハイパーリンクの追加は他の変更タグと同様です。リンクを追加した後のテキストには、他のテキストと区別するための独自の特別なスタイルがあり、デフォルトのリンクスタイルは下線付きの青色のテキストです。ハイパーリンクは別のページにジャンプします。3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed タグには、新しいページのアドレスを指定するための href 属性があります。 hrefで指定するアドレスは、通常は相対アドレスを使用します。

— 注: Web サイト開発では、ドキュメントの相対アドレスがより一般的に使用されます。

D:web ディレクトリに Web ページファイルを作成し、a.htm という名前を付け、コード 4.18 に示すようにコードを記述します。

コード 4.18 ハイパーリンク設定: a.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm">进入列表的设置页面</a>
</font>
</body>
</html>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、ブラウジング効果は図 4.19 に示すようになります。

図 4.19 ハイパーリンクの設定

読者は、図 4.19 からハイパーリンクのデフォルトのスタイルを確認できます。ページ上のリンクをクリックすると、同じディレクトリ内の ul_ol.htm ページにジャンプします。前のセクションのリスト設定ページ。ブラウザの「戻る」ボタンをクリックして a.htm ページに戻ると、テキストリンクの色が紫に変わり、このリンクにアクセスしたことが表示されます。

4.5.2 リンクのウィンドウを開く方法を変更するデフォルトでは、ハイパーリンクが新しいページを開く方法は、ハイパーリンク自体を上書きすることです。ブラウザのさまざまなニーズに応じて、読者はハイパーリンクの新しいウィンドウを開く他の方法を指定できます。ハイパーリンクタグは、設定対象の属性を提供します。値は、_self（自己上書き、デフォルト）、_blank（新しいウィンドウを作成して新しいページを開きます）、_top（ブラウザのウィンドウ全体で開きます、すべてのフレームで開きます）です。構造体は無視されます) )、_parent (前のウィンドウで開きます)。

— 注: _top メソッドと _parent メソッドはフレームページに使用され、次の章で詳しく説明されます。

4.5.3 リンクにプロンプトテキストを追加する多くの場合、ハイパーリンクのテキストではリンク先のコンテンツを説明するのに十分ではありません。ハイパーリンクタグは、閲覧者に簡単にプロンプトを表示できるタイトル属性を提供します。。 title 属性の値はプロンプトの内容です。ビューアのカーソルがハイパーリンク上にあると、プロンプトの内容が表示されます。これは、ページレイアウトのきれいさには影響しません。 a.htm Web ページファイルを変更し、コード 4.19 に示すようにコードを記述します。

コード 4.19 ハイパーリンク設定: a.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm" target="_blank" title="读者你好，现在你看到的是提示文字，单击本链接可以新开窗口跳转到ul_ol.htm页面。">进入列表的设置页面</a>
</font>
</body>
</html>

ブラウザのアドレスバーに http://localhost/a.htm と入力すると、ブラウジング効果は図 4.20 のようになります。

図 4.20 ハイパーリンクのプロンプトテキスト

4.5.4 アンカーとは何ですか? 多くの Web 記事には大量のコンテンツが含まれているため、ページが非常に長くなり、閲覧者は常にドラッグして閲覧する必要があります。ブラウザのスクロールバーを使用して、必要なコンテンツを見つけます。ハイパーリンクのアンカー機能は、アンカーを船のアンカーから導き出し、アンカーを落とした後、船が簡単に流されたり、迷ったりすることを防ぎます。実際、アンカーは 1 つのページ内の別の場所にジャンプするために使用され、ブックマークと呼ばれる場所もあります。ハイパーリンクタグのname属性はアンカーの名前を定義するために使用され、1つのページに複数のアンカーを定義でき、ハイパーリンクのhref属性は名前に基づいて対応するアンカーにジャンプできます。 D:web ディレクトリに Web ページファイルを作成し、a_anchor.htm という名前を付け、コード 4.20 に示すようにコードを記述します。コード 4.20 ハイパーリンクアンカー: a_anchor.htm

<html>
<head>
  <title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a name="top">这里是顶部的锚</a><br />
<a href="#1">第1任</a><br />
<a href="#2">第2任</a><br />
<a href="#3">第3任</a><br />
<a href="#4">第4任</a><br />
<a href="#5">第5任</a><br />
<a href="#6">第6任</a><br />
<h2>美国历任总统</h2>
●第1任(1789-1797)<a name="1">这里是第1任的锚</a><br />
姓名：乔治·华盛顿<br />
George Washington<br />
生卒：1732-1799<br />
政党：：联邦<br />
●第2任(1797-1801)<a name="2">这里是第2任的锚</a><br />
姓名：约翰·亚当斯<br />
John Adams<br />
生卒：1735-1826<br />
政党：：联邦<br />
●第3任(1801-1809)<a name="3">这里是第3任的锚</a><br />
姓名：托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒：1743-1826<br />
政党：：民共<br />
●第4任(1809-1817)<a name="4">这里是第4任的锚</a><br />
姓名：詹姆斯·麦迪逊<br />
James Madison<br />
生卒：1751-1836<br />
政党：民共<br />
●第5任(1817-1825)<a name="5">这里是第5任的锚</a><br />
姓名：詹姆斯·门罗<br />
James Monroe<br />
生卒：1758-1831<br />
政党：民共<br />
</font>
</body>
</html>l>

テストする前に、読者はコード 4.20 から、3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed タグがアンカーの定義にも使用されており、アンカーの名前が定義されていることがわかります。 name 属性を使用します (名前に制限はなく、カスタマイズできます)。アンカーリンクを検索する場合は、href 属性を使用して対応する名前を指定し、名前の前に # 記号を追加します。ブラウザのアドレスバーに http://localhost/a_anchor.htm と入力すると、ブラウジング効果は図 4.21 に示すようになります。

图4.21 超级链接的锚

当浏览者单击超级链接时，页面将自动滚动到href属性值名称的锚位置。

— 注意：定义锚的标签aaee7a1ed4a6a1c43f3bdc241aa9871e5db79b134e9f6b82c0b36e0489ee08ed内不一定需要具体内容，只是做一个定位。

4.5.5 电子邮件、FTP和Telnet的链接

超级链接还可以进一步扩展网页的功能，比较常用的有发电子邮件、FTP以及Telnet连接。完成以上的功能只需要修改超级链接的href值。发电子邮件的编写格式为：

<a href = "mailto:邮件地址">给我发email</a>

邮件地址必须完整，如intel@qq.com。

前面提到过，浏览网页采用http协议，而FTP服务器采用FTP协议连接，链接格式如下：

<a href = "ftp://服务器IP地址或域名">链接的文字</a>

FTP服务器链接和网页链接区别在于所用协议不同。FTP需要从服务器管理员处获得登录的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。同样，连接Telnet协议的服务器也是采用类似方法，格式如下：

<a href = "telnet://服务器IP地址或域名">链接的文字</a>

telnet协议应用非常少，使用http协议居多。在D:\web\目录下创建网页文件，命名为mail.htm，编写代码如代码4.21所示。

代码4.21 超级链接的其他设置：mail.htm

<html>
<head>
  <title>超级链接的其他设置</title>
</head>
<body>
<font size="5">
<a href="mailto:intel@qq.com" title="读者你好，单击这里可以发电子邮件。">给我发E-mail</a><br />
<a href="ftp://101.22.25.11" title="读者你好，欢迎进入FTP服务器。">连接FTP服务器</a><br />
<a href="telnet://101.22.25.11" title="读者你好，欢迎进入Telnet服务器。">连接Telnet服务器</a>
</font>
</body>
</html>s

在浏览器地址栏输入http://localhost/mail.htm，浏览效果如图4.22所示。

图4.22 超级链接的其他设置

HTMLハイパーリンクの詳しい説明

関連記事