suchen
HeimWeb-FrontendHTML-TutorialTutorial zur Verwendung von Hyperlink-Tags bei der Erstellung von XHTML_HTML/Xhtml_Webseiten


Hyperlink, auch „Link“ genannt. Man kann sagen, dass sich Hyperlinks überall auf den Webseiten befinden, die wir durchsuchen. Wenn wir auf eine Linkadresse auf einer Webseite klicken, wird auf eine andere Webseite verwiesen.
Verwenden Sie das Tag , um einen Hyperlink zu definieren. Syntax:
Angezeigter Text oder Bild
Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. a href="http://www .baidu.com/">Link zu Baidua>

Browser-Anzeigeeffekt:
Link zu Baidu
Wenn wir oben auf die Worte „Link zu Baidu“ klicken, leitet der Browser zur Baidu-Homepage weiter.


Hyperlink-Attribut
Hyperlink-Attribut:
href-Link-Adresse. Dabei kann es sich um eine absolute Webadresse oder eine relative Adresse handeln.
Ziel-Link-Ziel. Der Wert _blank öffnet die Linkadresse in einem neuen Fenster. Standardmäßig wird das aktuelle Fenster zum Öffnen der Linkadresse verwendet.
Benennen Sie den Ankerlink, wir werden weiter unten separat darüber sprechen.

Relative Weblink-Adresse:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. a href="/css" Ziel="_blank">DIV-CSS-Tutorial a> 

In diesem Beispiel wird eine relative Adresse verwendet, während im obigen Beispiel, das auf Baidu verlinkt, eine absolute Adresse verwendet wird.

Beispiel für hinzugefügtes Zielattribut:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. a href="http://www .baidu.com/" Ziel="_blank">Link Nach Baidu a>

Wenn Sie erneut auf den Link klicken, ermöglicht der Browser das Öffnen einer neuen Seite unter der Linkadresse, während das ursprüngliche Seitenfenster erhalten bleibt.
Tipps
Wenn eine Linkadresse nicht sehr eng mit dem aktuellen Thema oder Prozess zusammenhängt, ist das Attribut „target="_blank" normalerweise aktiviert. Versuchen Sie andernfalls, kein neues Fenster zu öffnen, um den Zuschauern eine freundlichere Atmosphäre zu bieten Surferlebnis.
Wenn die Seite aus mehreren Seitenrahmen besteht, kann das Zielattribut auch andere Werte haben

E-Mail-Hyperlink
Beispiel für einen E-Mail-Link:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. a href="mailto:admin@xyz .com">Kontaktieren Sie den Webmaster von xyz stationa>

Wenn Sie auf diesen Link klicken, können Sie E-Mails in Ihrem Standard-E-Mail-Client verfassen.

Ankerlink
Ankerlink bezieht sich auf den Link innerhalb der Seite, aber mittlerweile bezeichnen viele Leute auch Text-Hyperlinks als Ankerlinks.
Nehmen wir ein Beispiel, um die Rolle von Ankern zu erklären:
Wir haben zum Beispiel einen gut geschriebenen Artikel und viele Leute haben am Ende des Artikels Kommentare abgegeben, und das Fenster zum Kommentieren befindet sich normalerweise unten des Kommentars. Die Website legt einen Ankerlink fest, auf dem der Kommentar gepostet wird, und entwirft einen Link zu dem Ankerlink, auf dem der Kommentar angezeigt wird, z. B. „Kommentar posten“. Wenn jemand die von anderen hinterlassenen Kommentare nicht sehen möchte und sofort zum Kommentareingabefenster springen möchte, dann klickt er auf „Kommentar posten“, um schnell zum Kommentareingabefenster innerhalb der Branche zu springen. Dieses Design verbessert zweifellos das Benutzererlebnis für die Zuschauer.
Beispiel für die Verwendung eines Ankerlinks
Anker erstellen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. p>a Name="Kommentar">a >p>

Erstellen Sie eine Hyperlink-Adresse, die auf den Anker verweist:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. p>a href="#comment">Link zum Kommentarankera>p> 

Wie Sie dem Beispiel entnehmen können, fügen Sie zum Zugriff auf einen Anker einfach das „#“-Zeichen und den Namen des Ankers nach der Linkadresse hinzu. Da es sich im obigen Beispiel um einen Anker handelt, der auf diese Seite verlinkt, wird die vorherige Linkadresse ignoriert (Hinweis: Die relative Adresse wird tatsächlich ignoriert und wird hier nicht besprochen).
Tipp
Wenn Sie mit der Verwendung dieses Anker-Tags experimentieren möchten, achten Sie darauf, dass zwischen dem Hyperlink zum Anker und dem Anker-Tag genügend Webspace bleibt, um den Effekt zu sehen. Sie können die Zeilenumbruch-Tags, die wir oben kennengelernt haben, verwenden, um oben und unten genügend Leerraum zum Testen zu schaffen.
Sie können auch ein Anker-Tag erstellen, das auf andere Seiten verweist, zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. p>a href="http://www.abc.com/#test">Link zum Ankera>p>

Natürlich muss die Seite www.abc.com über das Test-Anker-Tag verfügen, sonst wird nur auf die Seite www.abc.com verlinkt und das Anker-Tag ignoriert.

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Was sind Boolesche Attribute in HTML? Geben Sie einige Beispiele an.Was sind Boolesche Attribute in HTML? Geben Sie einige Beispiele an.Apr 25, 2025 am 12:01 AM

Boolesche Attribute sind spezielle Attribute in HTML, die ohne Wert aktiviert werden. 1. Das boolesche Attribut steuert das Verhalten des Elements dadurch, ob es existiert oder nicht, z. B. deaktiviert das Eingabefeld. 2. Das Arbeitsprinzip besteht darin, das Elementverhalten gemäß der Existenz von Attributen zu ändern, wenn sich der Browser analysiert. 3. Die grundlegende Verwendung besteht darin, Attribute direkt hinzuzufügen, und die erweiterte Verwendung kann über JavaScript dynamisch gesteuert werden. 4. Häufige Fehler denken fälschlicherweise, dass Werte festgelegt werden müssen, und die richtige Schreibmethode sollte präzise sein. 5. Die beste Praxis ist es, den Code präzise zu halten und boolesche Eigenschaften vernünftig zu verwenden, um die Leistung und Benutzererfahrung von Webseiten zu optimieren.

Wie können Sie Ihren HTML -Code validieren?Wie können Sie Ihren HTML -Code validieren?Apr 24, 2025 am 12:04 AM

HTML -Code kann mit Online -Validatoren, integrierten Tools und automatisierten Prozessen sauberer sein. 1) Verwenden Sie W3CmarkupValidationService, um den HTML -Code online zu überprüfen. 2) Installieren und konfigurieren Sie die HTMLHINT-Erweiterung in VisualStudioCode zur Echtzeitüberprüfung. 3) Verwenden Sie HTMLTIDY, um HTML -Dateien im Bauprozess automatisch zu überprüfen und zu reinigen.

HTML vs. CSS und JavaScript: Vergleich von WebtechnologienHTML vs. CSS und JavaScript: Vergleich von WebtechnologienApr 23, 2025 am 12:05 AM

HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.

HTML als Markup -Sprache: seine Funktion und ihren ZweckHTML als Markup -Sprache: seine Funktion und ihren ZweckApr 22, 2025 am 12:02 AM

Die Funktion von HTML besteht darin, die Struktur und den Inhalt einer Webseite zu definieren, und der Zweck besteht darin, eine standardisierte Möglichkeit zur Anzeige von Informationen bereitzustellen. 1) HTML organisiert verschiedene Teile der Webseite über Tags und Attribute wie Titel und Absätze. 2) Es unterstützt die Trennung von Inhalten und Leistung und verbessert die Wartungseffizienz. 3) HTML ist erweiterbar, sodass benutzerdefinierte Tags SEO verbessern können.

Die Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsDie Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsApr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

HTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenHTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenApr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML: Evolution und Trends im WebdesignDie Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickHTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft