Explication détaillée des hyperliens HTML-tutoriel HTML-php.cn

Cet article présente principalement l'explication détaillée des hyperliens HTML. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Les hyperliens sont des liens HTML fréquemment utilisés dans les sites Web. Élément, car les différentes pages du site Web sont reliées par des hyperliens et les hyperliens complètent le saut entre les pages. Les hyperliens sont le principal moyen d'interaction entre les navigateurs et les serveurs, et nous en apprendrons progressivement plus sur eux dans les technologies suivantes. Hyperlien

L'hyperlien est un élément HTML fréquemment utilisé dans les sites Web, car différentes pages du site Web sont reliées par des hyperliens et les hyperliens complètent la connexion entre les pages. Les hyperliens sont le principal moyen d'interaction entre les navigateurs et les serveurs, et nous en apprendrons progressivement plus sur eux dans les technologies suivantes.

— Remarque : les images peuvent également être utilisées comme liens. Vous en apprendrez davantage à leur sujet dans le prochain chapitre "Images dans les pages Web".

4.5.1 Ajouter un lien vers le texte

Le libellé de l'hyperlien est , ajouter un super lien vers le texte Les liens sont similaires aux autres balises de modification. Le texte après l'ajout du lien a son propre style spécial pour le distinguer des autres textes. Le style de lien par défaut est le texte bleu souligné. Un lien hypertexte renvoie vers une autre page. La balise a un attribut href chargé de spécifier l'adresse de la nouvelle page. L'adresse spécifiée par href utilise généralement une adresse relative.

— Remarque : dans le développement de sites Web, les adresses relatives des documents sont plus couramment utilisées.

Créez un fichier de page Web dans le répertoire D:web, nommez-le a.htm et écrivez le code comme indiqué dans le code 4.18.

Code 4.18 Paramètres du lien hypertexte : a.htm

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

Copier après la connexion

Entrez http://localhost/a.htm dans la barre d'adresse du navigateur et l'effet de navigation est tel qu'illustré dans la figure 4.19.

Figure 4.19 Paramètres des hyperliens

Les lecteurs peuvent voir le style par défaut des hyperliens à partir de la figure 4.19 Lorsqu'un lien est cliqué sur la page, la page apparaîtra. accédez à la page ul_ol.htm dans le même répertoire, qui est la page de configuration de la liste dans la section précédente. Lorsque vous cliquez sur le bouton « Retour » du navigateur pour revenir à la page a.htm, la couleur du lien texte devient violette pour indiquer au spectateur que ce lien a été visité.

4.5.2 Modifier la méthode d'ouverture de la fenêtre du lien

Par défaut, la façon dont un lien hypertexte ouvre une nouvelle page est de s'écraser . Selon les différents besoins du navigateur, le lecteur peut spécifier d'autres manières d'ouvrir une nouvelle fenêtre pour l'hyperlien. La balise hyperlink fournit l'attribut cible à définir. Les valeurs sont _self (auto-écrasement, par défaut), _blank (créer une nouvelle fenêtre pour ouvrir une nouvelle page), _top (ouvrir dans toute la fenêtre du navigateur, tout le cadre. les structures seront ignorées) ), _parent (ouvert dans la fenêtre précédente).

— Remarque : les méthodes _top et _parent sont utilisées pour les pages de cadre et seront expliquées en détail dans les chapitres suivants.

4.5.3 Ajouter un texte d'invite au lien

Dans de nombreux cas, le texte du lien hypertexte ne suffit pas à décrire le contenu à être lié. Le lien hypertexte La balise fournit un attribut de titre qui peut facilement inciter le spectateur. La valeur de l'attribut title correspond au contenu de l'invite. Lorsque le curseur du spectateur reste sur le lien hypertexte, le contenu de l'invite apparaîtra. Cela n'affectera pas la netteté de la mise en page. Modifiez le fichier de page Web a.htm et écrivez le code comme indiqué dans le code 4.19.

Code 4.19 Paramètres du lien hypertexte : 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>

Copier après la connexion

Entrez http://localhost/a.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.20.

Figure 4.20 Texte d'invite de lien hypertexte

4.5.4 Qu'est-ce qu'une ancre

De nombreux articles Web ont beaucoup de contenu, ce qui donne lieu à des pages très longues, et les internautes doivent constamment faire glisser la barre de défilement du navigateur pour trouver le contenu dont ils ont besoin. La fonction d'ancre du lien hypertexte peut résoudre ce problème. L'ancre est dérivée de l'ancre du navire, une fois l'ancre jetée, le navire ne dérivera pas ou ne se perdra pas facilement. En fait, les ancres sont utilisées pour accéder à différents emplacements au sein d’une même page. Certains endroits sont appelés signets.

L'attribut name de la balise hyperlien est utilisé pour définir le nom de l'ancre. Une page peut définir plusieurs ancres, et l'attribut href de l'hyperlien peut accéder à l'ancre correspondante en fonction du nom. Créez un fichier de page Web dans le répertoire D:web, nommez-le a_anchor.htm et écrivez le code comme indiqué dans le code 4.20.

Code 4.20 Ancre de lien hypertexte : 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>

Copier après la connexion

Avant de tester, les lecteurs peuvent voir à partir du Code 4.20 que l'ancre est également définie à l'aide de la balise

图4.21 超级链接的锚

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

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

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

图4.22 超级链接的其他设置