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>

运行结果如下:

 

相关文章
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
简约404错误页面HTML源码
简约404错误页面HTML源码
190 12
|
8月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
474 77
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
316 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
173 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
176 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
138 34
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1015 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!

热门文章

最新文章