HTML <a> Etiketi

Tanım ve Kullanım

<a> Bağlantıyı tanımlar, bir sayfadan diğerine bağlantı kurmak için kullanılır.

<a> Elementin en önemli özelliği href özelliğibağlantının amacını belirtir.

Varsayılan olarak, bağlantılar tüm tarayıcılar arasında aşağıdaki gibi görünecektir：

  • Ziyaret edilmemiş bağlantılar alt çizgili ve maviye sahiptir
  • Ziyaret edilmiş bağlantılar alt çizgili ve mora sahiptir
  • Ziyaret edilen bağlantılar alt çizgili ve kırmızıdır

Tip:Muhtemelen fark etmişsinizdir, CodeW3C.com sitesindeki bağlantılar varsayılan bağlantı görünümünden çok farklı. Kullanabilirsiniz CSS Pseudo-class Metin üst bağlantılarına karmaşık ve çeşitli stiller ekleyin。

Ayrıca bakınız：

HTML Eğitimi：HTML Bağlantısı

HTML DOM Referans Kılavuzu：Anchor Objesi

CSS Eğitimi：Bağlantı Stili

Terim Açıklamaları

Nasıl超文本？

Örnek

Örnek 1

codew3c.com'a yönlendirme oluşturma：

<a href="https://www.codew3c.com">codew3c.com'u ziyaret edin!</a>

Try it yourself

Örnek 2

Resmi bir bağlantı olarak nasıl kullanılır：

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

Try it yourself

Örnek 3

Yeni bir tarayıcı penceresinde bağlantıyı nasıl açarım：

<a href="https://www.codew3c.com" target="_blank">codew3c.com'u ziyaret edin!</a>

Try it yourself

Örnek 4

E-posta adresine nasıl bağlanılır：

<a href="mailto:someone@example.com">E-posta gönder</a>

Try it yourself

Örnek 5

Telefon numarasına nasıl bağlanılır：

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Try it yourself

Example 6

How to link to another part of the same page:

<a href="#section2">Go to Chapter 2</a>

Try it yourself

Example 7

How to link to JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Try it yourself

Tips and comments

Tip:If the <a> tag does not have an href attribute, it is just a placeholder for a hyperlink.

Tip:The linked page is usually displayed in the current browser window unless you specify another target (using the target attribute).

Tip:Use CSS settings to set the link style:CSS Bağlantısı and CSS Düğme.

Attribute

Attribute Value Description
download Filename Specifies what the target will be downloaded when the user clicks on the hyperlink.
href URL Specifies the URL of the page to which the link points.
hreflang Language code Specifies the language of the linked document.
media Media query Specifies for which type of media/device the linked document is optimized.
ping URL list Specifies a space-separated list of URLs. When the link is accessed, the browser will send a POST request with a ping body (sent in the background). Usually used for tracking.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Specifies the reference information to be sent with the link.
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 Specifies the relationship between the current document and the linked document.
target
  • _blank
  • _parent
  • _self
  • _top
 Specifies where the linked document should be opened.
type Media type Specifies the media type of the linked document.

Global attributes

<a> The tag also supports Global attributes in HTML.

Event attributes

<a> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <a> Element:

a:link, a:visited {
  color: (dahili değer);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (dahili değer);
}

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek