HTML 链接语法

HTML 链接语法

基本语法

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

主要属性

• href: 指定链接目标URL

• target: 控制打开方式

• _self: 当前窗口(默认)

• _blank: 新窗口

• _parent: 父框架

• _top: 顶层窗口

• rel: 定义链接与当前文档的关系

• nofollow: 告诉搜索引擎不要追踪

• noopener: 防止新窗口访问原窗口

• noreferrer: 隐藏来源信息

• download: 提示下载目标资源

• title: 鼠标悬停时显示的提示文本

常见用法

1. 普通链接

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

2. 邮件链接

<a href="mailto:contact@example.com">联系我们</a>

3. 电话链接

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

4. 锚点链接

<a href="#section2">跳转到第二节</a>
...
<h2 id="section2">第二节</h2>

CSS扩展样式

/* 基础样式 */
a {
  color: #0066cc;
  text-decoration: none;
}

/* 悬停效果 */
a:hover {
  color: #004499;
  text-decoration: underline;
}

/* 已访问链接 */
a:visited {
  color: #660099;
}

/* 活动链接(点击时) */
a:active {
  color: #ff0000;
}

/* 按钮样式链接 */
a.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s;
}

a.button:hover {
  background-color: #004499;
}

高级功能

1. 下载文件

<a href="/files/document.pdf" download>下载PDF</a>

2. 打开特定应用

<a href="whatsapp://send?text=Hello">WhatsApp分享</a>

3. 社交媒体分享

<a href="https://twitter.com/share?url=YOUR_URL">分享到Twitter</a>