网页制作06-html,css,javascript初认识のhtml如何建立超链接

embedded/2025/2/24 11:56:37/
htmledit_views">

超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接

一、内部链接

与自身网站页面有关的链接被称为内部链接

1、创建内部链接

1)语法:

<a href="链接地址">

……

</a>

2)举例应用: 

 3)实操代码:

html"><body>计算:
<p>
1.<a href="1"> 1+1=?</a></p>
<p>
2.<a href="2">2+2=?</a></p>
<p>
3.<a href="3">3+3=?</a></p>
</body>

 2、链接的目标窗口

简介:在创建网页的过程中,默认情况下超链接在原来的浏览器窗口中打开,可以使用 target属性来控制打开的目标窗口

1)语法:

_self  在当前页面中打开链接

_blank  在一个全新的空白窗口中打开链接

_top  在顶层框架中打开链接,也可以理解为在跟框架中打开链接

_parent  在当前框架的上一层里打开链接

new  在一个全新的空白窗口中打开链接

二、锚点链接 

网站中经常会有一些文档页面由于文本或者图像内容过多,。导致页面过长,为了方便用户查看文档中的内容在文档中需要进行锚点链接。

1、情景模拟:点击2+2的链接,跳转到答案4

2、步骤和语法:

1)建立锚点

<a name="锚点的名称”></a>

2、链接同一页面中的锚点 

<a href="#锚点的名称”></a>

3、链接到其他页面的锚点

首先在同一个目录下新建一个答案页面的html文件:

 <a href="链接的文件地址#锚点的名称”></a>

 3、锚点演示代码:

html"><hr>
计算:
<p>
1.<a href="#1" > 1+1=?</a></p>
<p>
2.<a href="#2" target="_parent">2+2=?</a></p>
<p>
3.<a href="答案页面.html#3" target="new">3+3=?</a></p>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a name="1">2</a>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a name="2">4</a>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
<a name="3">6</a>

三、外部链接

简介:外部链接是指跳转到当前网站之外的资源:网页中最常用的是利用HTTP协议进行的外部链接是设置友情链接

1、基本语法

<a href="http://……">……</a>

2、友情链接演示效果: 

3、友情链接演示代码: 

html"><hr>
<p>友情链接:</p>
<p><a href="http://www.baidu.com">百度</a></p>
<p><a href="http://www.sina.com">新浪</a></p>
<p><a href="https://www.csdn.net/">CSDN</a></p>	

四、链接到Email

1、简介:

在网页上创建Email链接,当浏览者点击Email链接时,收件人的邮件地址有Email超链接中指定的地址自动更新无需浏览者输入

2、语法:

<a href="mailto:邮件地址”……</a>

 3、点击结果:

4、演示代码

html"><hr>
<p> Email链接</p>
<p><a href="mailto:CYDBUSINESS@OUTLOOK.COM">感谢您的收看,点击此处可以联系小编</a></p>

五、链接到ftp

1、简介:

Ftp是指文件传输协议,一个ftp站点通常包含一些容易上传和下载文件的文件目录。大部分的ftp网站需要一个用户名和密码来进入网站

2、语法:

<a href="ftp://ftp地址">……</a>

3、点击结果:

4、演示代码:

html"><a href="ftp://ftp.tsinghua.edu.cn">进入清华大学的ftp网站</a>

六、链接到telnet

1、简介:

telnet,常常用来登录一些bbs网站也是一种远程登录方式

2、语法:

<p><a href="telnet://地址">……</a></p>

七、下载文件

1、简介:

如果要在网站中提供下载资料,就是要为文件提供下载链接。如果超链接指向的不是一个网页文件,而是其他zip,mp3,a4v,exe等文件,单机链接的时候就会下载文件

2、语法

<p><a href="文件地址"></a></p>

3、 效果:

4、演示代码:

html"><hr><p><a href="MOHA.mp3">MOHA音乐</a></p>


http://www.ppmy.cn/embedded/164815.html

相关文章

SQL笔记#数据更新

一、数据的插入(INSERT语句的使用方法) 1、什么是INSERT 首先通过CREATE TABLE语句创建表&#xff0c;但创建的表中没有数据&#xff1b;再通过INSERT语句向表中插入数据。 --创建表ProductIns CREATE TABLE ProductIns (product_id CHAR(4) NOT NULL,product_name …

Day26 第七章 回溯算法part05

一. 学习文章及资料 491.递增子序列46.全排列47.全排列 II 二. 学习内容 1. 递增子序列 (1) 题目要点&#xff1a; 递增子序列&#xff0c;数组中可能含有重复元素 (2) 解题思路&#xff1a; 如下一选取元素不是递增或使用过&#xff0c;则跳过这一分支&#xff0c;用set记…

DeepSeek生成思维导图

一、准备阶段 工具准备 安装思维导图软件&#xff08;推荐XMind/MindMaster/在线工具如ProcessOn&#xff09; 打开DeepSeek官网或集成平台&#xff08;https://www.deepseek.com/&#xff09; 明确需求 确定思维导图核心主题&#xff08;如"碳中和实施方案"&…

开源一个可以调RGB三色的小灯棒子

开源一个可以调灯的小灯棒子。 主控用的STC8G1K08A-SOP8&#xff0c;RGB三色灯是WS2812B。 开源到立创开源广场了&#xff0c;可以直接进入下方链接&#xff0c;那边可以直接查看原理图和PCB。 一个可调RGB三色的小灯棒子 - 立创开源硬件平台一个可调RGB三色的小灯棒子https…

Git版本控制系统---本地操作(万字详解!)

目录 git基本配置 认识工作区、暂存区、版本库 添加文件--情况一&#xff1a; 添加文件-情况二: 修改文件: 版本回退&#xff1a; git基本配置 1.初始化本地仓库&#xff0c;注意&#xff1a;一定要在一个目录下进行&#xff0c;一般都是新建一个文件夹&#xff0c;在文件…

Vulhub靶机 Apache Druid(CVE-2021-25646)(渗透测试详解)

一、开启vulhub环境 docker-compose up -d 启动 docker ps 查看开放的端口 1、漏洞范围 在Druid0.20.0及更低版本中 二、访问靶机IP 8888端口 1、点击Load data进入新界面后&#xff0c;再点击local disk按钮。 2、进入新界面后&#xff0c;在标红框的Base directory栏写上…

财务运营域——电子影像系统设计

摘要 文章主要介绍了电子影像系统的设计与应用。随着企业规模扩大和业务复杂化&#xff0c;传统纸质文档管理方式暴露出诸多问题&#xff0c;电子影像技术应运而生。它通过数字化扫描、存储和管理纸质文档&#xff0c;实现高效检索、实时共享、安全存储和流程自动化&#xff0…

视觉应用工程师(面试)

视觉应用工程师&#xff08;面试&#xff09; 1.自我介绍、会的技能、项目 2.相机和机械手调试过程 检查硬件&#xff0c;看软件驱动是否链接&#xff0c;调节相机和镜头保证能够识别这个物料&#xff0c;看接口和通讯是否正常&#xff0c;如&#xff1a;波特率&#xff0c;数…