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

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

一、内部链接

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

1、创建内部链接

1)语法:

<a href="链接地址">

……

</a>

2)举例应用: 

 3)实操代码:

<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、锚点演示代码:

<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、友情链接演示代码: 

<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、演示代码

<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、演示代码:

<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、演示代码:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/896127.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL后端返回给前端的时间变了(时区问题)

问题&#xff1a;MySQL里的时间例如为2025-01-10 21:19:30&#xff0c;但是返回到前端就变成了2025-01-10 13:19:30&#xff0c;会出现小时不一样或日期变成隔日的问题 一般来说设计字段时会使用datetime字段类型&#xff0c;这是一种用于时间的字段类型&#xff0c;而这个类型…

【算法与数据结构】单调队列

目录 单调队列 使用单调队列维护滑动窗口 具体过程&#xff1a; 代码实现&#xff1a; 复杂度分析&#xff1a; 使用单调队列优化动态规划 例题 单调队列 单调队列(deque)是一种特殊的队列&#xff0c;队列中的元素始终按严格递增或者递减排列。这样就可以保证队头元素…

AutoGen 技术博客系列 九:从 v0.2 到 v0.4 的迁移指南

本系列博文在掘金同步发布, 更多优质文章&#xff0c;请关注本人掘金账号&#xff1a; 人肉推土机的掘金账号 AutoGen系列一&#xff1a;基础介绍与入门教程 AutoGen系列二&#xff1a;深入自定义智能体 AutoGen系列三&#xff1a;内置智能体的应用与实战 AutoGen系列四&am…

深度学习每周学习总结Y1(Yolov5 调用官方权重进行检测 )

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客Y1中的内容 &#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 ** 注意该训练营出现故意不退押金&#xff0c;恶意揣测偷懒用假的结果冒充真实打卡记录&#xff0c;在提出能够拿到视频录像…

为AI聊天工具添加一个知识系统 之117 详细设计之58 思维导图及观察者效应 之2 概念全景图

&#xff08;说明&#xff1a;本文和上一篇问题基本相同&#xff0c;但换了一个模型 deepseek-r1&#xff09; Q1227、在提出项目“为使用AI聊天工具的聊天者加挂一个专属的知识系统”后&#xff0c;我们已经进行了了大量的讨论-持续了近三个月了。这些讨论整体淋漓尽致体现了…

2012年IMO几何预选题第6题

设有非等腰的 △ A B C \triangle ABC △ABC, O O O 和 I I I 分别为外心和内心. 在边 A C AC AC, A B AB AB 上分别存在两点 E E E 和 F F F, 使得 C D C E A B CDCEAB CDCEAB, B F B D A C BFBDAC BFBDAC. 设 ( B D F ) (BDF) (BDF) 和 ( C D E ) (CDE) (CDE)…

为Eclipse IDE安装插件IBM编程助手watsonx Code Assistant

从Eclipse IDE 安装 从Eclipse IDE 安装插件&#xff1a; _1、在Eclipse IDE 中&#xff0c;单击帮助菜单&#xff0c;然后选择EclipseMarketplace。 _2、根据您计划进行的工作类型选择安装方式&#xff1a; 有关代码建议、代码解释、代码文档和单元测试的集成生成式人工智能&a…

Linux基本指令(三)+ 权限

文章目录 基本指令grep打包和压缩zip/unzipLinux和windows压缩包互传tar&#xff08;重要&#xff09;Linux和Linux压缩包互传 bcuname -r常用的热键关机外壳程序 知识点打包和压缩 Linux中的权限用户权限 基本指令 grep 1. grep可以过滤文本行 2. 把包含9的文本行过滤出来了 …

【部署优化篇十四】【十万字全景拆解:GitHub Actions自动化流水线设计圣经(DeepSeek工业级实践大公开)】

一、从手工作坊到智能工厂:CI/CD的革命之路 想象一下,你所在的公司每天要手工组装1000台手机,每个环节都靠老师傅肉眼检查——这就是没有CI/CD的软件开发现状。GitHub Actions的出现,就像给软件交付装上了特斯拉的超级工厂流水线。 DeepSeek的CI/CD演进史就是一部血泪史:…

“死”循环(查漏补缺)

以下代码会死循环&#xff1a; #include<iostream> using namespace std; int n,res; int main(){cin>>n;for(int i1;i<n;i){int xi;while(i){int ti%10;i/10;if(t2||t0||t1||t9){resx;break;}}}cout<<res<<endl;return 0; } 你的代码中存在一个逻…

力扣LeetCode: 2506 统计相似字符串对的数目

题目&#xff1a; 给你一个下标从 0 开始的字符串数组 words 。 如果两个字符串由相同的字符组成&#xff0c;则认为这两个字符串 相似 。 例如&#xff0c;"abca" 和 "cba" 相似&#xff0c;因为它们都由字符 a、b、c 组成。然而&#xff0c;"aba…

关于Java 反射的简单易懂的介绍

目录 #0.总览 #1. 类的反射 ①介绍 ②获取 ③作用 获取构造函数&#xff1a; 创建实例&#xff1a; 字段操作&#xff1a; 方法操作&#xff1a; 获取修饰符&#xff1a; #2.总结 #0.总览 反射&#xff0c;官方是这样介绍它的&#xff1a; Reflection is a …

【精调】LLaMA-Factory 快速开始1: Meta-Llama-3.1-8B-Instruct

llamafactory-cli train examples/train_lora/llama3_lora_sft.yaml llamafactory-cli chat examples/inference/llama3_lora_sft.yaml llamafactory-cli export examples/merge_lora/llama3_lora_sft.yaml模型下载 git clone https://www.modelscope.cn/LLM-Research/Meta-Lla…

【07】区块链性能

7-1 基础性能优化 7-1-1 区块链性能瓶颈 总述 区块链性能指标 区块链的性能指标主要包括&#xff1a; 吞吐量&#xff1a;在固定时间内处理的交易数量 延时&#xff1a;对交易的响应和处理时间 主流区块链与中心化平台TPS对比 区块链与传统计算的对比 区块链可信且中立…

安全面试2

文章目录 简单描述一下什么是水平越权&#xff0c;什么是垂直越权&#xff0c;我要发现这两类漏洞&#xff0c;那我代码审计要注意什么地方水平越权&#xff1a;垂直越权&#xff1a;水平越权漏洞的审计重点垂直越权漏洞的审计重点 解释一下ssrf漏洞原理攻击场景修复方法 横向移…

【Linux 专栏】echo命令实验

风123456789&#xff5e;-CSDN博客 最近文章阅读排行榜 【爬虫基础】第一部分 网络通讯 P1/3-CSDN博客 【爬虫基础】第一部分 网络通讯-Socket套接字 P2/3-CSDN博客 【Linux专栏】find命令同步 实验-CSDN博客 【Linux运维】非root用户的单向免密登录_linux 单向免密-CSDN博客…

RTSP协议全解析

RTSP&#xff08;Real Time Streaming Protocol&#xff09;协议全解析 一、协议概述 定位&#xff1a;应用层协议&#xff0c;用于控制流媒体服务器&#xff08;播放、暂停、录制&#xff09;&#xff0c;媒体传输由 RTP/RTCP 实现。 特点&#xff1a; 基于文本&#xff08;…

第15届 蓝桥杯 C++编程青少组中/高级选拔赛 202401 真题答案及解析

第 1 题 【 单选题 】 表达式117 % 16 的结果是( )。 A:0 B:5 C:7 D:10 解析: % 是取模运算符,用于计算两个数相除后的余数。 计算 117 / 16,结果是 7,余数是 5。因此,117 % 16 = 5。答案: B 第 2 题 【 单选题 】 下列选项中,字符数组定义正确的是( …

qt5实现表盘的旋转效果,通过提升QLabel类

因为工作需要&#xff0c;需要实现温度的表盘展示效果 实现思路&#xff1a; 通过提示声QLabel控价类&#xff0c;实现报盘的旋转和展示效果 1. 编写一个QLabel的类MyQLabel,实现两个方法 1. void paintEvent(QPaintEvent *event); //重绘函数 2. void valueChanged(int va…

通信系统中物理层与网络层联系与区别

在通信系统中&#xff0c;物理层和网络层是OSI&#xff08;开放系统互连&#xff09;模型中的两个重要层次&#xff0c;分别位于协议栈的最底层和第三层。它们在功能、职责和实现方式上有显著的区别&#xff0c;但同时也在某些方面存在联系。以下是物理层与网络层的联系与区别的…