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",如果想实现点击跳转链接可以跳转到相应的跳转记的位置,那么AB必须设置为一样的值(可以理解为字符串);否则将不会实现跳转。

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

 

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


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

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

实例三: 

<!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>

运行结果如下:

 

相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
2月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
157 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
10月前
|
前端开发
HTML基本标签使用详解
HTML基本标签使用详解
|
数据采集 前端开发 JavaScript
【 ⑤】HTML概述与基本标签详解
【 ⑤】HTML概述与基本标签详解
79 0
|
前端开发 JavaScript Java
【HTML】基本标签介绍
HTML基本标签介绍 1. HTML是什么? HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言
97 0
|
程序员 编译器 Windows
HTML中的基本标签
HTML中的基本标签
178 1
|
移动开发 前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第二节 基本标签
Web前端开发笔记——第二章 HTML语言 第二节 基本标签
Web前端开发笔记——第二章 HTML语言 第二节 基本标签