Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der HTML-Hyperlinks

Ausführliche Erläuterung der HTML-Hyperlinks

不言Original: 2018-04-27 14:25:471817Durchsuche

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von HTML-Hyperlinks vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Hyperlinks sind HTML-Codes, die häufig auf Websites verwendet werden. Element, da verschiedene Seiten der Website durch Hyperlinks verbunden sind und Hyperlinks den Sprung zwischen Seiten vervollständigen. Hyperlinks sind das Hauptinteraktionsmittel zwischen Browsern und Servern, und wir werden in den folgenden Technologien nach und nach mehr über sie erfahren. Hyperlink

Hyperlink ist ein häufig verwendetes HTML-Element in Websites, da verschiedene Seiten der Website durch Hyperlinks verbunden sind und Hyperlinks die Verbindung zwischen Seiten vervollständigen. Hyperlinks sind das Hauptinteraktionsmittel zwischen Browsern und Servern, und wir werden in den folgenden Technologien nach und nach mehr über sie erfahren.

– Hinweis: Bilder können auch als Links verwendet werden. Mehr darüber erfahren Sie im nächsten Kapitel „Bilder in Webseiten“.

4.5.1 Einen Link zum Text hinzufügen

Die Bezeichnung des Hyperlinks lautet 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed, hinzufügen ein Superlink zum Text Links ähneln anderen Änderungs-Tags. Der Text hat nach dem Hinzufügen des Links einen eigenen speziellen Stil, um ihn von anderem Text zu unterscheiden. Der Standard-Linkstil ist blauer Text mit Unterstreichung. Ein Hyperlink springt zu einer anderen Seite. Das 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed-Tag verfügt über ein href-Attribut, das für die Angabe der Adresse der neuen Seite verantwortlich ist. Die von href angegebene Adresse verwendet im Allgemeinen eine relative Adresse.

– Hinweis: Bei der Website-Entwicklung werden häufiger dokumentenbezogene Adressen verwendet.

Erstellen Sie eine Webseitendatei im Verzeichnis D:web, nennen Sie sie a.htm und schreiben Sie den Code wie in Code 4.18 gezeigt.

Code 4.18 Hyperlink-Einstellung: a.htm

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

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein, und der Browsing-Effekt ist wie in Abbildung 4.19 dargestellt.

Abbildung 4.19 Hyperlink-Einstellungen

Leser können den Standardstil von Hyperlinks aus Abbildung 4.19 sehen. Wenn auf einen Link auf der Seite geklickt wird, wird die Seite angezeigt Springen Sie zur Seite ul_ol.htm im selben Verzeichnis, bei dem es sich um die Seite mit den Listeneinstellungen im vorherigen Abschnitt handelt. Wenn Sie auf die Schaltfläche „Zurück“ des Browsers klicken, um zur a.htm-Seite zurückzukehren, wird die Farbe des Textlinks lila, um dem Betrachter mitzuteilen, dass dieser Link besucht wurde.

4.5.2 Fensteröffnungsmethode des Links ändern

Standardmäßig überschreibt sich ein Hyperlink beim Öffnen einer neuen Seite selbst . Je nach den unterschiedlichen Anforderungen des Browsers können Leser andere Möglichkeiten zum Öffnen neuer Fenster für Hyperlinks festlegen. Das Hyperlink-Tag stellt das Zielattribut zum Festlegen bereit. Die Werte sind _self (selbst überschreibend, Standard), _blank (neues Fenster erstellen, um eine neue Seite zu öffnen), _top (im gesamten Fenster des Browsers öffnen, alle Frames). Strukturen werden ignoriert) ), _parent (im vorherigen Fenster öffnen).

– Hinweis: Die Methoden _top und _parent werden für Frameseiten verwendet und in späteren Kapiteln ausführlich erläutert.

4.5.3 Eingabeaufforderungstext zum Link hinzufügen

In vielen Fällen reicht der Text des Hyperlinks nicht aus, um den Inhalt zu beschreiben Der Hyperlink Das Tag stellt ein Titelattribut bereit, das den Betrachter leicht dazu auffordern kann. Der Wert des Titelattributs ist der Inhalt der Eingabeaufforderung. Wenn der Cursor auf dem Hyperlink bleibt, wird der Inhalt der Eingabeaufforderung angezeigt. Dies hat keinen Einfluss auf die Übersichtlichkeit des Seitenlayouts. Ändern Sie die a.htm-Webseitendatei und schreiben Sie den Code wie in Code 4.19 gezeigt.

Code 4.19 Hyperlink-Einstellung: 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>

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein, und der Browsing-Effekt ist wie in Abbildung 4.20 dargestellt.

Abbildung 4.20 Hyperlink-Eingabeaufforderungstext

4.5.4 Was ist ein Anker

Viele Webartikel haben viel Inhalt, was zu sehr langen Seiten führt, und Zuschauer müssen ständig die Bildlaufleiste des Browsers ziehen, um den benötigten Inhalt zu finden. Die Ankerfunktion des Hyperlinks kann dieses Problem lösen. Der Anker wird vom Anker auf dem Schiff abgeleitet, sodass das Schiff nicht so leicht abdriftet oder verloren geht. Tatsächlich werden Anker verwendet, um zu verschiedenen Stellen innerhalb einer einzelnen Seite zu springen. Einige Stellen werden Lesezeichen genannt.

Das Namensattribut des Hyperlink-Tags wird verwendet, um den Namen des Ankers zu definieren. Eine Seite kann mehrere Anker definieren, und das href-Attribut des Hyperlinks kann basierend auf dem Namen zum entsprechenden Anker springen. Erstellen Sie eine Webseitendatei im Verzeichnis D:web, nennen Sie sie a_anchor.htm und schreiben Sie den Code wie in Code 4.20 gezeigt.

Code 4.20 Hyperlink-Anker: 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>

Vor dem Test können Leser anhand von Code 4.20 erkennen, dass das Tag 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed auch zum Definieren des Ankers verwendet wird. , der Name des Ankers wird mit dem Namensattribut definiert (der Name ist nicht beschränkt und kann angepasst werden). Wenn Sie nach Ankerlinks suchen, verwenden Sie das href-Attribut, um den entsprechenden Namen anzugeben, und fügen Sie vor dem Namen ein #-Symbol hinzu. Geben Sie http://localhost/a_anchor.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt ist wie in Abbildung 4.21 dargestellt.

图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 超级链接的其他设置

In Verbindung stehende Artikel

Mehr sehen