Web前端开发——超链接与浮动框架(下)

news2025/4/18 20:44:27

本节说明:

上一节,我们了解了超链接概述与超链接的语法、路径及分类两大部分内容,本节我们将了解超链接的应用与浮动框架。

三、超链接的应用

在网络上能够通过链接访问不同的资源或网页。链接对象多种多样,可分为文件、FTP站点、图像、电子邮件及书签等。

3.1 创建HTTP文档下载超链接

网站经常提供软件、文件等资料的下载,下载文件的链接指向文件所在的相对路径或绝对路径,文件类型为*.doc、*.pdf、*.exe、*.rar等。其基本语法如下:

<a href"url">链接内容</a>

 3.2   创建FTP站点访问超链接

FTP服务器链接和网贡链接的区别在于所用协议不同,浏览网页采用btp协议,而间FTP服务器采用P协议。FTP需要从服务器管理员处获得登录的权限,不过部分服务器可以腔名访问,从而获得一些公开的文件。其基本语法如下:

<a href="ftp://服务器IP地址或域名">链接的文字</a>

3.3  创建图像超链接

将链接标题替换为一幅图像,在浏览时单击该图像,就可以打开链接的目标文件。其基
本语法如下:

<a href = "URL"><img src ="" alt=""></a>

3.4   创建电子邮件超链接

一般网站上都会设置“联系我们”这样的栏目或超链接,目的是方便用户及时与网站管理员进行沟通与联系,这就是人们常说的电子邮件链接。其基本语法如下:

<a href="mailto:E-mail地址[?subject=邮件主题[&参数=参数值]]">链接内容</a>

 邮件地址必须完整,例如intel@qq.com。其参数有cc(抄送)、bcc(密送)、subject(主题)、body。多个收件人用分号“;”分隔;多个参数用“&”连接,“&”与关键字之间不能留空格;空格用“%20”代替。

例如:

<a href ="mailto:some@mysoft.com;jlchu@163.com?cc = xyz@163.com&bcc=anbo@sina,com&subject=Hello820again&body=下周二开会讨论">发送邮件</a>

3.5 创建页面书签链接

书签是指到文章内部的链接,可以实现段落间的任意跳。实现这样的链接要先定义一个书签作为目标端点,再定义到书签的链接。链接到书签分为两种,即链接到同一页面中的书签和链接到不同页面中的书签。

3.5.1 定义书签

通过设置超链接a标记的name性来定义书签。

<a name="书签名">书签标题</a>

 name属性的值是定义书签的名称,供书签链接引用。超链接<a></a>之间的信息为书签的标题。

3.5.2 定义书签链接

通过设置超链接a标记的bref属性来定义书签链接。

基本语法:

<a href="#书签名">书签标题</a>     <!-- 同一页面内 -->
<a href="URL#书签名">书签标题</a>  <!-- 不同页面内 -->

第一种是同一页面内的书签,第二种是不同页面内的书签,其中URL设置HTML文件名称,“#书签名”表示引用名称为“书签名”的书签。 

四、浮动框架

浏览器窗口中含有的孤立的子窗口称为浮动框架,也称为内联框架。在浏览器窗口中嵌入浮动框架可使用i{rame标记,该标记为成对标记,必须插人在 body 标记中,而不能插人在frameset 标记中。

基本语法:

<iframe 属性名称="value" name="iframename"></iframe>
<a href ="target.html" target="iframename">链接标题</a>

语法说明:

属性名称及相关说明如下表:

属性说明属性说明
src设置源文件属性height设置浮动框架窗口高度
name设置框架名称frameborder设置框架边框
width设置浮动框架窗口高度scrolling设置框架滚动条

ps:本节学习就到这里,有问题欢迎大家指出。下节更新图像与多媒体文件。

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

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

相关文章

【后端开发】初识Spring IoC与SpringDI、图书管理系统

文章目录 图书管理系统用户登录需求分析接口定义前端页面代码服务器代码 图书列表展示需求分析接口定义前端页面部分代码服务器代码Controller层service层Dao层modle层 Spring IoC定义传统程序开发解决方案IoC优势 Spring DIIoC &DI使用主要注解 Spring IoC详解bean的存储五…

git在IDEA中使用技巧

git在IDEA中使用技巧 merge和rebase 参考&#xff1a;IDEA小技巧-Git的使用 git回滚、强推、代码找回 参考&#xff1a;https://www.bilibili.com/video/BV1Wa411a7Ek?spm_id_from333.788.videopod.sections&vd_source2f73252e51731cad48853e9c70337d8e cherry pick …

榕壹云无人共享系统:基于SpringBoot+MySQL+UniApp的物联网共享解决方案

无人共享经济下的技术革新 随着无人值守经济模式的快速发展&#xff0c;传统共享设备面临管理成本高、效率低下等问题。榕壹云无人共享系统依托SpringBootMySQLUniApp技术栈&#xff0c;结合物联网与移动互联网技术&#xff0c;为商家提供低成本、高可用的无人化运营解决方案。…

ARCGIS PRO DSK 利用两期地表DEM数据计算工程土方量

利用两期地表DEM数据计算工程土方量需要准许以下数据&#xff1a; 当前地图有3个图层&#xff0c;两个栅格图层和一个矢量图层 两个栅格图层&#xff1a;beforeDem为工程施工前的地表DEM模型 afterDem为工程施工后的地表DEM模型 一个矢量图层&#xf…

考研408参考用书:计算机组成原理(唐朔飞)介绍,附pdf

我用夸克网盘分享了「《计算机组成原理》第2,3版 唐朔飞」&#xff0c; 链接&#xff1a;https://pan.quark.cn/s/6a87d10274a3 1. 书籍定位与适用对象 定位&#xff1a;计算机组成原理是计算机科学与技术、软件工程等专业的核心基础课程&#xff0c;涉及计算机硬件的底层工作原…

国网B接口云镜控制接口流程详解以及检索失败原因(电网B接口)

文章目录 一、B接口协议云镜控制接口介绍B.8.1 接口描述B.8.2 接口流程B.8.3 接口参数B.8.3.1 SIP头字段B.8.3.2 SIP响应码B.8.3.3 XML Schema参数定义 B.8.4 消息示例B.8.4.1 云镜控制请求B.8.4.2 云镜控制请求响应 二、B接口云镜控制失败常见问题&#xff08;一&#xff09;网…

vue3使用keep-alive缓存组件与踩坑日记

目录 一.了解一下KeepAlive 二.使用keep-alive标签缓存组件 1.声明Home页面名称 三.在路由出口使用keep-alive标签 四.踩坑点1&#xff1a;可能需要配置路由&#xff08;第三点完成后有效可忽略&#xff09; 五.踩坑点2&#xff1a;没有找到正确的路由出口 一.了解一下Kee…

gpt2 本地调用调用及其调用配置说明

gpt2 本地调用调用及其调用配置说明 环境依赖安装&#xff0c;模型下载 在大模型应用开发中&#xff0c;需要学会本地调用模型&#xff0c; 要在本地环境调用gpt2 模型需要将模型下载到本地&#xff0c;这里记录本地调用流程&#xff1a; 在huggingface 模型库中查找到需要使…

【Abstract Thought】【Design Patterns】python实现所有个设计模式【下】

前言 彼岸花开一千年&#xff0c;花开花落不相见。 若问花开叶落故&#xff0c;彼岸缘起缘又灭——《我欲封天》 \;\\\;\\\; 目录 前言简单的设计模式复杂的设计模式13责任链14迭代器15备忘录16状态机17模板方法18访问者19观察者20命令Shell21策略22调解23解释器 简单的设计模…

【物联网】PWM控制蜂鸣器

文章目录 一、PWM介绍1.PWM的频率2.PWM的周期 二、PWM工作原理分析三、I.MX6ull PWM介绍1.时钟信号2.工作原理3.FIFO 四、PWM重点寄存器介绍1.PWM Control Register (PWMx_PWMCR)2.PWM Counter Register (PWMx_PWMCNR)3.PWM Period Register (PWMx_PWMPR)4.PWM Sample Register…

Python----机器学习(基于PyTorch的乳腺癌逻辑回归)

Logistic Regression&#xff08;逻辑回归&#xff09;是一种用于处理二分类问题的统计学习方法。它基于线性回归 模型&#xff0c;通过Sigmoid函数将输出映射到[0, 1]范围内&#xff0c;表示概率。逻辑回归常被用于预测某个实 例属于正类别的概率。 一、数据集介绍 在本例中&…

5分钟学会接口自动化测试框架

今天&#xff0c;我们来聊聊接口自动化测试。 接口自动化测试是什么&#xff1f;如何开始&#xff1f;接口自动化测试框架如何搭建&#xff1f; 自动化测试 自动化测试&#xff0c;这几年行业内的热词&#xff0c;也是测试人员进阶的必备技能&#xff0c;更是软件测试未来发…

基于FreeRTOS和LVGL的多功能低功耗智能手表(APP篇)

目录 一、简介 二、软件框架 2.1 MDK工程架构 2.2 CubeMX框架 2.3 板载驱动BSP 1、LCD驱动 2、各个I2C传感器驱动 3、硬件看门狗驱动 4、按键驱动 5、KT6328蓝牙驱动 2.4 管理函数 2.4.1 StrCalculate.c 计算器管理函数 2.4.2 硬件访问机制-HWDataAccess 2.4.3 …

布局决定终局:基于开源AI大模型、AI智能名片与S2B2C商城小程序的战略反推思维

摘要&#xff1a;在商业竞争日益激烈的当下&#xff0c;布局与终局预判成为企业成功的关键要素。本文探讨了布局与终局预判的智慧性&#xff0c;强调其虽无法做到百分之百准确&#xff0c;但能显著提升思考能力。终局思维作为重要战略工具&#xff0c;并非一步到位的战略部署&a…

告别循环!用Stream优雅处理集合

什么是stream&#xff1f; 也叫Stream流&#xff0c;是jdk8新增的一套API&#xff08;java.util.stream.*&#xff09;可以用于操作集合或者数组的数据。 优势&#xff1a;Stream流大量的结合了Lambda语法的风格编程&#xff0c;提供了一种更加强大&#xff0c;更加简单的方式…

Linux电源管理、功耗管理 和 发热管理 (CPUFreq、CPUIdle、RPM、thermal、睡眠 和 唤醒)

1 架构图 1.1 Linux内核电源管理的整体架构 《Linux设备驱动开发详解&#xff1a;基于最新的Linux4.0内核》图19.1 1.2 通用的低功耗软件栈 《SoC底层软件低功耗系统设计与实现》 1.3 低功耗系统的架构设计&#xff1b;图1-3 2 系统级睡眠和唤醒管理 Linux系统的待机、睡眠…

OSCP - Proving Grounds -FunboxEasy

主要知识点 弱密码路径枚举文件上传 具体步骤 首先是nmap扫描一下&#xff0c;虽然只有22&#xff0c;80和3306端口&#xff0c;但是事情没那么简单 Nmap scan report for 192.168.125.111 Host is up (0.45s latency). Not shown: 65532 closed tcp ports (reset) PORT …

Vue 3 国际化实战:支持 Element Plus 组件和语言持久化

目录 Vue 3 国际化实战&#xff1a;支持 Element Plus 组件和语言持久化实现效果&#xff1a;效果一、中英文切换效果二、本地持久化存储效果三、element Plus国际化 vue3项目国际化实现步骤第一步、安装i18n第二步、配置i18n的en和zh第三步&#xff1a;使用 vue-i18n 库来实现…

1.阿里云快速部署Dify智能应用

一、宝塔面板 宝塔面板是一款功能强大且易于使用的服务器管理软件&#xff0c;支持Linux和Windows系统&#xff0c;通过web端可视化操作&#xff0c;优化了建站流程&#xff0c;提供安全管理、计划任务、文件管理以及软件管理等功能。 1.1 宝塔面板的特点与优势 易用性 宝塔面…

在pycharm配置虚拟环境和jupyter,解决jupyter运行失败问题

记录自己pycharm环境配置和解决问题的流程。 解决pycharm无法运行jupyter代码&#xff0c;仅运行import板块显示运行失败&#xff0c;但是控制台不输出任何错误信息&#xff0c;令人困惑。 遇到的问题是&#xff1a;运行代码左下角显示运行失败但是有没有任何的输出错误信息。 …