HTML
Kotwice i hiperłącza

Wprowadzenie

Składnia

• <a href="URL or anchor">Link Text</a>

Parametry

Link do innej strony

Jest to podstawowy wykorzystanie <a> (a nchor element) elementu:

<a href="http://example.com/">Link to example.com</a>

Tworzy hiperłącze do adresu URL http://example.com/ zgodnie z atrybutem href (odnośnik hipertekstu) z tekstem kotwicy „Link do example.com”. Wyglądałoby to tak:

Link do example.com

Aby zaznaczyć, że ten link prowadzi do zewnętrznej strony internetowej, możesz użyć external typu linku:

<a href="http://example.com/" rel="external">example site</a>

Możesz utworzyć link do strony, która używa protokołu innego niż HTTP. Na przykład, aby utworzyć link do strony FTP, możesz:

<a href="ftp://example.com/">This could be a link to a FTP site</a>

W tym przypadku różnica polega na tym, że ten tag kotwicy żąda, aby przeglądarka użytkownika łączyła się z example.com przy użyciu protokołu przesyłania plików (FTP) zamiast protokołu przesyłania hipertekstu (HTTP).

Może to być link do strony FTP

Otwórz link w nowej karcie / oknie

<a href="example.com" target="_blank">Text Here</a>

Atrybut target określa, gdzie otworzyć łącze. Ustawiając na _blank , każesz przeglądarce otworzyć ją w nowej karcie lub oknie (zgodnie z preferencjami użytkownika).

BEZPIECZEŃSTWO WRAŻLIWOŚĆ OSTRZEŻENIE!

Korzystanie target="_blank" daje witryny otwarcie częściowego dostępu do window.opener obiektu za pomocą JavaScript, który umożliwia tę stronę do ówczesnego dostępu i zmienić window.opener.location swojej strony i potencjalnie przekierować użytkowników do zainfekowanych stron WWW lub phishingowych.

Ilekroć używasz tego do stron, którymi nie kontrolujesz, dodaj rel="noopener" do swojego linku, aby zapobiec wysłaniu obiektu window.opener z żądaniem.

Obecnie Firefox nie obsługuje noopener , więc dla maksymalnego efektu będziesz musiał użyć rel="noopener noreferrer" .

Link do kotwicy

Za pomocą kotwic można przeskakiwać do określonych tagów na stronie HTML. Znacznik <a> może wskazywać na dowolny element, który ma atrybut id . Aby dowiedzieć się więcej o identyfikatorach, odwiedź dokumentację dotyczącą klas i identyfikatorów . Kotwice są najczęściej używane do przeskakiwania do podsekcji strony i są używane w połączeniu z tagami nagłówka.

Załóżmy, że utworzyłeś stronę ( page1.html ) na wiele tematów:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

Po utworzeniu kilku sekcji możesz utworzyć spis treści u góry strony z szybkimi linkami (lub zakładkami) do określonych sekcji.

Jeśli podałeś temat id do swoich tematów, możesz połączyć się z nimi

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Teraz możesz użyć kotwicy w spisie treści:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Te kotwice są również dołączone do strony internetowej, na której się znajdują ( page1.html ). Możesz więc łączyć witryny z jednej strony do drugiej, odwołując się do strony i nazwy kotwicy.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Link, który uruchamia JavaScript

Po prostu użyj protokołu javascript: :, aby uruchomić tekst jako JavaScript zamiast otwierać go jako zwykły link:

<a href="javascript:myFunction();">Run Code</a>

Możesz również osiągnąć to samo za pomocą atrybutu onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

return false; jest konieczne, aby zapobiec przewijaniu strony do góry po kliknięciu linku do # . Pamiętaj, aby dołączyć cały kod, który chcesz uruchomić przed nim, ponieważ powrót spowoduje zatrzymanie wykonywania dalszego kodu.

Na uwagę zasługuje również wykrzyknik ! po hashtagu, aby zapobiec przewijaniu strony do góry. Działa to, ponieważ każdy nieprawidłowy ślimak spowoduje, że link nie będzie przewijał się nigdzie na stronie, ponieważ nie mógł znaleźć elementu, do którego się odwołuje (element o id="!" ). Możesz również użyć dowolnego nieprawidłowego ślimaka (takiego jak #scrollsNowhere ), aby uzyskać ten sam efekt. W takim przypadku return false; Nie jest wymagane:

<a href="#!" onclick="myFunction();">Run Code</a>

Czy powinieneś użyć któregoś z tych?

Odpowiedź jest prawie na pewno nie . Uruchamianie JavaScript w połączeniu z takim elementem jest dość złą praktyką. Zastanów się nad użyciem czystych rozwiązań JavaScript, które szukają elementu na stronie i zamiast tego wiążą z nim funkcję. Słuchanie wydarzenia

Zastanów się również, czy ten element jest tak naprawdę przyciskiem zamiast łącza . Jeśli tak, powinieneś użyć <button> .

Link do strony w tej samej witrynie

Możesz użyć ścieżki względnej do linku do stron w tej samej witrynie.

<a href="/example">Text Here</a>

Powyższy przykład przejdzie do example pliku w katalogu głównym ( / ) serwera.

Jeśli ten link znajdował się na stronie http://example.com , poniższe dwa linki doprowadziłyby użytkownika do tej samej lokalizacji

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Oba powyższe przejdą do pliku page w katalogu głównym example.com .

Link do klienta poczty e-mail

Podstawowe użycie

Jeśli wartość atrybutu href zaczyna się od mailto: spróbuje otworzyć klienta e-mail po kliknięciu:

<a href="mailto:[email protected]">Send email</a>

Spowoduje to umieszczenie adresu e-mail [email protected] jako adresata nowo utworzonego e-maila.

DW i UDW

Możesz także dodawać adresy odbiorców cc lub bcc, używając następującej składni:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Temat i treść

Możesz także wypełnić temat i treść nowego e-maila:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Te wartości muszą być zakodowane w adresie URL .

Kliknięcie linku za pomocą mailto: spróbuje otworzyć domyślnego klienta poczty e-mail określonego przez system operacyjny lub poprosi o wybranie klienta, którego chcesz użyć. Nie wszystkie opcje określone po adresie odbiorcy są obsługiwane we wszystkich klientach e-mail.

Link, który wybiera numer

Jeśli wartość atrybutu href zaczyna się od tel: :, urządzenie wybierze numer po jego kliknięciu. Działa to na urządzeniach mobilnych lub komputerach / tabletach z oprogramowaniem - takim jak Skype lub FaceTime - które może nawiązywać połączenia telefoniczne.

<a href="tel:11234567890">Call us</a>

Większość urządzeń i programów w jakiś sposób poprosi użytkownika o potwierdzenie numeru, który zamierzają wybrać.