web前端学习(四)——HTML5的超链接标签设置(页面间链接、锚链接以及邮件链接)

简介: web前端学习(四)——HTML5的超链接标签设置(页面间链接、锚链接以及邮件链接)

1.HTML5的超链接——页面间链接


<a href ="链接网址" target=“目标窗口位置”>文本或图像</a>
这里的 href代表的是链接路径(#代表空链接)。
target
后面跟的如果是 -self,则打开自身窗口;如果是 -blank,则打开新建窗口。
下面我们来看一个页面间链接的小实例:👇👇👇

实例一:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>超链接的基本用法</title>
  </head>
  <body>
    <a href="hetao.html" target="_blank">无漂白薄皮核桃</a><br/><br/>
    <a href="hetao.html" target="_blank"><img src="image\hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a><br><br>
    <a href="https://www.tencent.com" target="_blank">腾讯</a><br><br/>
    <a href="#" target="_self">首页</a><br><br>
    <a href="https://blog.csdn.net/weixin_43823808" target="_blank"><img src="D:\1.jpg" width="600" height="400" alt="美国队长" title="美国队长"/></a><br><br><hr>
  </body>
</html>

运行结果如下: 


2.HTML5的超链接——锚链接


锚链接主要有两种方式:

①从位置甲跳转到本页的位置乙。

②从位置甲跳转到其他页的位置乙。 

锚链接的创建步骤如下:

①创建跳转标记:

<a name="maker">位置乙</a>

②创建跳转链接:

<a href="#maker">位置甲</a>

下面来看一个实例:👇👇👇


实例二: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>锚链接</title>
  </head>
  <body>
    <!-- href="..."中设置的是跳转链接 -->
    <p>
      <img src="E:\计算机专业学习资料和文件\HTML\image\logo.jpg" width="305" height="104" alt="logo"/>
      [<a href="#register" target="_self">新用户注册</a>]
      [<a href="#login" target="_blank">用户登录帮助</a>]
    </p>
    <h1>新手指南 - 登录或注册</h1>
    <h2>购物流程</h2>
    <img src="E:\计算机专业学习资料和文件\HTML\image\help_steps.jpg" width="752" height="67" />
    <!-- name="..."中设置的是跳转标记 -->
    <!-- 这里将直接跳转到当前网页中 “新用户注册” 的位置
       name="..."这其中的内容必须与第12行 href="#..."中的内容保持一致 -->
    <h2><a name="register">新用户注册</a></h2>
    <h4>Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。</h4>
    <img src="E:\计算机专业学习资料和文件\HTML\image\login_step1.jpg" width="550" height="132" />
    <h4>Step 2 注册前请仔细阅读《聚美优品用户协议》,如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。</h4>
    <img src="E:\计算机专业学习资料和文件\HTML\image\signup_step2.jpg" width="716" height="588" />
    <p>注册成功后系统将自动登录您的账号,并转至聚美优品首页。</p>
    <!-- 这里将直接跳转到新建网页(与原网页相同)中 “登录” 的位置
       name="..."这其中的内容必须与第13行 href="#..."中的内容保持一致 -->
    <h2><a name="login">登录</a></h2>
    <h4>Step 1 如您已经拥有聚美账号,请点击页面右上方的“登录”按钮</h4>
    <img src="E:\计算机专业学习资料和文件\HTML\image\login_step1.jpg" width="550" height="132" />
    <h4>Step 2 在登录页面的信息栏内填入对应信息,点击“登录”按钮进行登录,或通过选择登录框下方的合作账号进行快速登录。登录成功后,系统将自动跳转至聚美优品首页。</h4>
    <img src="E:\计算机专业学习资料和文件\HTML\image\login_step2.jpg" width="716" height="528"/>
  </body>
</html>

运行结果如下:

这其中的 href="#A" 和 name="B",如果想实现点击跳转链接可以跳转到相应的跳转记的位置,那么A和B必须设置为一样的值(可以理解为字符串);否则将不会实现跳转。

下面是博主正确设置了跳转链接和跳转标记,之后跳转到相应的位置的截图:👇👇👇

 

3.HTML5的超链接—— 邮件链接


这里的邮件链接可以为电子邮件、QQ、MSN等。其相应的地址在这里就不做说明了。

直接来看下面的实例吧!!!

实例三: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>邮件链接</title>
  </head>
  <body>
    <p>
      <img src="E:\计算机专业学习资料和文件\HTML\image\logo.jpg" width="305" height="104" alt="logo"/>
      [<a href="https://mail.qq.com">发邮件</a>]
    </p>
  </body>
</html>

运行结果如下:

 

相关文章
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
472 61
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
1675 10
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1870 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
847 23
|
SQL 安全 前端开发
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
1106 2
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
1281 10
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
519 5
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
1152 1
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
8774 0