HTML 链接

什么是 HTML 链接？

HTML 链接是通过 <a> 标签定义的，用于连接到其他网页、文件、位置或电子邮件地址。

HTML 链接的基本语法

<a href="url">链接文本</a>

HTML 链接示例

<a href="https://www.example.com">访问示例网站</a>

链接的 target 属性

target 属性用于指定链接在何处打开。

_self - 在当前窗口打开（默认）
_blank - 在新窗口或标签页中打开
_parent - 在父框架中打开
_top - 在整个窗口中打开

<a href="https://www.example.com" target="_blank">在新窗口中打开示例网站</a>

链接到本地文件

您可以链接到同一网站中的本地文件。

<a href="about.html">关于我们</a> 


<a href="products/item1.html">产品详情</a>

链接到页面内的锚点

您可以链接到同一页面中的特定位置，使用锚点。

<!-- 在页面顶部添加链接 -->
<a href="#section1">跳转到第一部分</a> 



<!-- 在页面下方添加锚点 -->
<h2 id="section1">第一部分</h2>

链接到电子邮件地址

您可以创建链接，点击后会打开用户的电子邮件客户端。

<a href="mailto:[email protected]">发送电子邮件</a> 



<a href="mailto:[email protected]?subject=咨询">发送带主题的电子邮件</a>

链接到电话号码

在移动设备上，您可以创建链接，点击后会拨打指定的电话号码。

<a href="tel:+8612345678901">拨打电话</a>

链接的样式

默认情况下，链接会有下划线，并且颜色会根据状态变化：

未访问的链接 - 蓝色
已访问的链接 - 紫色
悬停的链接 - 红色
激活的链接 - 红色

您可以使用 CSS 来自定义链接的样式。

<style> /* 内部样式表，定义链接的自定义样式 */
a { /* 为所有 a 元素设置默认样式 */
    color: #333; /* 设置链接文本颜色为深灰色 */
    text-decoration: none; /* 移除链接默认的下划线 */
}

a:hover { /* 为鼠标悬停时的 a 元素设置样式 */
    color: #0066cc; /* 设置鼠标悬停时的文本颜色为蓝色 */
    text-decoration: underline; /* 添加鼠标悬停时的下划线 */
}

a:active { /* 为鼠标点击时的 a 元素设置样式 */
    color: #003366; /* 设置鼠标点击时的文本颜色为深蓝色 */
}
</style> /* 结束内部样式表 */

<a href="https://www.example.com">自定义样式的链接</a>

图像链接

您可以使用图像作为链接。

<a href="https://www.example.com"> 
    <img src="button.png" alt="访问示例网站"> 
    
    
</a>