HTML <a> href Attribute

Paglilinaw at Paggamit

href Ang attribute na ito ay nagtutukoy sa URL ng pahina na inililink ng link.

href Ang halaga ng attribute ay maaaring maging anumang wastong URL ng dokumento, kasama ang fragment identifier at segment ng JavaScript. Kung pinili ng user ang nilalaman ng <a> tag, ang browser ay susubukan na hahanapin at ipakita: href Ang URL na tinukoy ng attribute ay dokumento, o listahan ng ekspresyon, paraan at function na gagawin gamit JavaScript.

Kung href Kung ang attribute ay hindi umiiral, ang <a> tag ay hindi magiging hyperlink.

提示:Maaari kang maglink sa itaas ng pahina gamit ang href="#top" o href="#"!

Gumawa ng Tekstong Link

Ang simple na <a> tag na nag-referensi sa ibang dokumento ay maaaring magkaroon ng ganitong porma:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Tutorial</a>

浏览器用特殊效果显示短语“CodeW3C.com 在线教程”(通常是带下划线的蓝色文本),这样用户就会知道它是一个可以链接到其他文档的超链接。就像这样:

CodeW3C.com Online Tutorial

用户还可以利用浏览器中的选项来自己指定文本颜色、设置链接前和链接后链接文本的颜色。

提示:可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

制作图像链接

更复杂的锚还可以包含图像。下面这个 LOGO 是一个图像链接,点击该图像,可以返回 W3school 的首页:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

上面的代码会为 CodeW3C.com 的 LOGO 添加一个返回首页的超链接:

CodeW3C.com Online Tutorial

大多数图形浏览器都会在作为锚的一部分的图像周围放置特殊的边框。通过在 <img> 标签中把图像的 border 属性设置为 0 可以删除超链接的边框。也可以使用 CSS 的边框属性来全局性地改变元素的边框样式。

实例

例子 1

href 属性规定链接的目的地:

<a href="https://www.codew3c.com">访问 CodeW3C.com</a>

ทดลองด้วยตัวเอง

例子 2

如何使用图像作为链接:

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

ทดลองด้วยตัวเอง

例子 3

如何链接到电子邮件地址:

<a href="mailto:someone@example.com">发送电子邮件</a>

ทดลองด้วยตัวเอง

例子 4

如何链接到电话号码:

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

ทดลองด้วยตัวเอง

例子 5

如何链接到同一页面上的另一个部分:

<a href="#section2">转到第二章</a>

ทดลองด้วยตัวเอง

例子 6

如何链接到 JavaScript:

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

ทดลองด้วยตัวเอง

ระบุ

<a href="URL">

ค่าของแอตทริบิวต

ค่า คำอธิบาย
URL

URL ของลิงก์

ค่าที่เป็นไปได้:

  • URL แบบทั่วไป - ใช้สำหรับเว็บไซต์อื่น (เช่น href="http://www.example.com/index.html")
  • URL แบบเฉพาะ - ใช้สำหรับไฟล์ด้านในเว็บไซต์ (เช่น href="index.html")
  • ลิงก์ไปยังองค์ประกอบที่มี id ที่กำหนด (เช่น href="#section2")
  • ข้อตกลงอื่น ๆ (เช่น https://、ftp://、mailto:、file: และอื่น ๆ)
  • สคริปต์ (เช่น href="javascript:alert('Hello');")

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน