参考资料

  1. Html转PHP代码有哪些
  2. HTML 字体, 字体颜色 ,字体大小
  3. HTML 文本对齐方式
  4. HTML 预期格式文本
  5. HTML 有序列表
  6. HTML 内部样式表
  7. HTML 表格高度和宽度
  8. 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>
  1. 邮件链接

<a href="mailto:contact@example.com">联系我们</a>
  1. 电话链接

<a href="tel:+1234567890">拨打电话</a>
  1. 锚点链接

<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>
  1. 打开特定应用

<a href="whatsapp://send?text=Hello">WhatsApp分享</a>
  1. 社交媒体分享

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