HTML5超详细知识点笔记4---超链接核心知识点总结

超链接核心知识点总结

1. 超链接定义

• 超链接（hyperlink）是HTML中实现页面间连接的核心技术
• **链接目标类型：**网页/同页面位置/图片/邮箱/文件/应用程序
• **链接载体：**文本或图片

2. 路径类型

绝对路径

• 示例：D:/images/a.png
• **局限性：**依赖本地具体路径，部署时需保持服务器路径一致

相对路径

• 类型：
  1. 同级目录：./link.html
  2. 下级目录：./下级目录名/文件
  3. 上级目录：../上级目录名/文件

3. 超链接实现

核心标签

• 语法：

  <a href=" ">链接元素</a >
  

• **链接元素：**文本/图片/页面元素

• 示例：

  <a href="https://blog.youkuaiyun.com/">优快云</a >
  

文本链接

• 语法：

  <a href="链接地址">链接文字</a >
  

• **路径优先级：**相对路径 > 绝对路径

目标窗口控制

• 属性：target
• 参数表：
  • _blank：新窗口打开
  • _self：当前窗口（默认）
  • _parent：父框架打开
  • _top：顶级窗口打开

4. 内部链接

• 定义：同一网站内HTML页面间的链接
• 关键：构建清晰的导航结构
• 路径规范：
  • 上级目录：../index.html
  • 同级目录：./link1.html

5. 书签链接

实现步骤

1. 创建书签

   <a name="书签名">锚点位置</a >
   

2. 设置跳转

   • 同页面：

     <a href="#书签名">文字</a >  
     

   • 跨页面：

     <a href="页面路径#书签名">文字</a >
     

5.5 外部链接

5.5.1 HTTP协议链接

• 格式：

  <a href="http(s)://域名">文字</a >
  

5.5.2 邮件链接

• 基础格式：

  <a href="mailto:邮箱">文字</a >
  

• 扩展参数：

  • 抄送：mailto:xx?cc=抄送邮箱
  • 主题：&subject=主题
  • 正文：&body=内容

5.5.3 文件下载

• 格式：

  <a href="文件路径">文字</a >
  

• **路径支持：**相对/绝对路径

5.6 特殊链接

5.6.1 脚本链接

• 格式：

  <a href="javascript:代码">文字</a >
  

• 示例：

  <a href="javascript:window.close()">关闭窗口</a >
  

5.6.2 空链接

• **作用：**保持页面状态

• 格式：

  <a href="#">文字</a >