参考资料

1. HTML 自定义列表
2. HTML 图像
3. 用于长引用的 HTML
4. HTML 使用<div> 元素布局
5. HTML 符号实体
6. html表单标签详细说明以及案例
7. HTML 链接语法
8. HTML 中最常用的<div>容器元素

HTML 超链接

基本标签

<a> 标签用于创建超链接

主要属性

• href: 指定链接目标URL

• target: 控制链接打开方式

• _self: 当前窗口(默认)

• _blank: 新窗口

• _parent: 父框架

• _top: 顶层框架

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

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

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

• noreferrer: 隐藏来源信息

基本用法

<a href="https://example.com">示例链接</a>
<a href="page.html" target="_blank">新窗口打开</a>
<a href="#section-id">页面锚点</a>

功能扩展

1. 邮件链接

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

2. 电话链接

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

3. 下载链接

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

CSS 扩展样式

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

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

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

/* 活动状态(点击时) */
a:active {
  color: #cc0000;
}

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

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

高级用法

1. 链接预加载

<link rel="prefetch" href="page.html">

2. 链接预连接

<link rel="preconnect" href="https://example.com">

3. 链接预加载资源

<link rel="preload" href="font.woff2" as="font">

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。