【前端】如何制作一个自己的网页(6)

接上文

网络中的图片

我们也可以在百度等网站搜索自己喜欢的图片。

此时对图片点击右键,选择【复制图片地址】,即可获得该图片的网络地址。

其实在HTML中,除了图片以外,我们还可以利用地址找到另一个网页。

如右图所示,将两个html文档用地址链接起来。

为了实现这一功能,我们需要一个新的元素——超链接。

             

超链接的作用

超链接(或简称链接),是指从一个网页指向另一个目标的连接关系。

超链接就像网页中的传送门,只需轻轻一点,就能带你进入另一个网站。

比如右边的网页就是利用超链接制作的导航栏。

通常情况下,网页不会独立存在。

一个完整的网站应该由多个不同的html文档相互链接而成。

超链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>超链接</title>

</head>

<body>

    <img src="images/head.png" alt="头像">

    <a href="./aboutme.html">点击此处了解我</a>

</body>

</html>

第一个网页

第二个网页

关于代码的具体解释:

<a>

<a>标签表示一个超链接,它是一个双标签,内容以</a>结束。

与<img>相同,它是一个行内元素。

全称:anchor - 锚

href属性

href属性用来设定链接的目标地址。与src属性不同的是,src 只可以设置图片文件的地址;

而href属性中的地址可以包含:

1、另一个网页;

2、网页中的某个元素;

3、一张图片;

4、一个JS程序;...

例如右边的代码,将href设置为“aboutme.html”的地址。

全称:Hypertext Reference - 引用超文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>超链接</title>

</head>

<body>

    <img src="images/head.png" alt="头像">

    <a href="./aboutme.html">点击此处了解我</a>

</body>

</html>

无效的地址

当 href属性中的地址无效时,浏览器通常会显示404页面,表示文件不存在。

点击右边的超链接试试。

描述内容

一段被超链接标记的文字。

用户通过点击这段文字进入超链接。

该文字在不同的状态下有不同的表现方式:

1、未点击链接时,使用带有下划线的蓝色字体。

2、点击链接后,使用带有下划线的紫色字体。

总结:

target

当超链接被点击时,浏览器默认直接从当前页面进入目标页面。

利用target属性可以修改这项规则。

该属性常用的值有两种:

_blank,浏览器会在新的页面中打开文档;

_self,浏览器会在当前页面打开文档(默认)。

注意单词前的下划线_

<a href="https://np.baicizhan.com/" target="_blank">新页面打开夜曲官网</a>

<a href="https://np.baicizhan.com/" target="_self">本页面打开夜曲官网</a>

代码展示:

页面内跳转

使用超链接不仅能够指向一个html文档,还可以链接一个含有id属性的元素。

我们只要将id值作为href的地址即可,格式为href="#元素的id"

内部超链接

例如右边的代码,将第24行的a元素指向第11行的h1元素。

这样,点击超链接就会自动回到“第一本书”的位置。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>锚点</title>

</head>

<body>

    <!-- 为h1设定一个id属性,值为top-->

    <h1 id="top">第一本书</h1>

    <p>Python</p>

    <h1>第二本书</h1>

    <p>MySQL</p>

    <h1>第三本书</h1>

    <p>JavaScript</p>

    <h1>第四本书</h1>

    <p>C语言</p>

    <h1>第五本书</h1>

    <p>CSS</p>

    <h1>第六本书</h1>

    <p>HTML</p>

    <!--设置href中的地址为#top-->

    <a href="#top">回到头部</a>

</body>

</html>

内部超链接需要将目标元素的id值作为href的地址,格式为href="#元素的id"

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

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

相关文章

spring/springboot获取resource目录下的文件

1.正常情况springbot项目的resource目录下会反正项目使用到的很多文件所以这里编写一个读取demo目录如下图所示 2.复制代码直接运行 import org.springframework.core.io.ClassPathResource; import java.nio.file.Files; import java.util.stream.Stream;/*** spring/spring…

第十四章 RabbitMQ延迟消息之延迟队列

目录 一、引言 二、死信队列 三、核心代码实现 四、运行效果 五、总结 一、引言 什么是延迟消息&#xff1f; 发送者发送消息时指定一个时间&#xff0c;消费者不会立刻收到消息&#xff0c;而是在指定时间后收到消息。 什么是延迟任务&#xff1f; 设置在一定时间之后才…

深入探讨C++多线程性能优化

深入探讨C多线程性能优化 在现代软件开发中&#xff0c;多线程编程已成为提升应用程序性能和响应速度的关键技术之一。尤其在C领域&#xff0c;多线程编程不仅能充分利用多核处理器的优势&#xff0c;还能显著提高计算密集型任务的效率。然而&#xff0c;多线程编程也带来了诸…

大模型微调实战指南:从零开始手把手教你微调大模型

文末有福利&#xff01; 今天分享一篇技术文章&#xff0c;你可能听说过很多大模型的知识&#xff0c;但却从未亲自使用或微调过大模型。 今天这篇文章&#xff0c;就手把手带你从零微调一个大模型。 大模型微调本身是一件非常复杂且技术难度很高的任务&#xff0c;因此本篇…

为什么在Anaconda中会报错‘chcp‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件?

首先&#xff0c;我们需要知道,这意味着chcp 命令在系统路径中找不到。chcp&#xff08;Change Code Page&#xff09;是一个Windows命令行工具&#xff0c;用于查看或设置活动控制台窗口的代码页。 经过统计整合了一些原因如下: 1.系统环境变量被错误地修改 可能导致系统命…

LeetCode 每日一题 最小元素和最大元素的最小平均值

最小元素和最大元素的最小平均值 你有一个初始为空的浮点数数组 averages。另给你一个包含 n 个整数的数组 nums&#xff0c;其中 n 为偶数。 你需要重复以下步骤 n / 2 次&#xff1a; 从 nums 中移除 最小 的元素 minElement 和 最大 的元素 maxElement。 将 (minElement ma…

什么政府网站一定要安装SSL证书吗?应该选择哪种SSL证书?

根据最新数据显示&#xff0c;我国31个省市自治区政府网站中申请的有效SSL证书数量达到1801张&#xff0c;比上一季度增加了 1.87%&#xff0c;实现三个季度的连续增长&#xff0c;SSL证书已经成为我国政府网站提升信息安全防护能力的重要手段。 为什么政府网站一定要安装SSL证…

nerd bug:VPG多次计算vnetloss的计算图报错的解决

待更 Reference https://www.cnblogs.com/StarZhai/p/15495292.htmlhttps://github.com/huggingface/transformers/issues/12613https://discuss.pytorch.org/t/inplace-operation-errors-when-implementing-a2c-algorithm/145406/6

【closerAI ComfyUI】真人秒变卡通,相似度爆表!炫酷工作流,让你的卡通写真秒变朋友圈焦点!快来试试吧!

【closerAI ComfyUI】真人卡通化&#xff0c;超像&#xff01;这个工作流真棒&#xff01;用个人写真照片转卡通风格去轰炸你的朋友圈吧&#xff01; 这期我们主要讨论如何使用stable diffusion comfyUI 制作定制写真卡通照片工作流。也就是真人照片转卡通形象。 closerAI工作…

AI赋能网络安全:十大专业场景深度解析与实战应用

引言 随着信息技术的飞速发展&#xff0c;网络安全已成为企业运营和个人隐私保护的重中之重。面对日益复杂多变的网络威胁&#xff0c;传统的人工防御手段已难以满足当前的安全需求。在此背景下&#xff0c;人工智能&#xff08;AI&#xff09;技术的引入为网络安全领域带来了革…

什么是乐观锁、悲观锁?

什么是乐观锁、悲观锁&#xff1f; 乐观锁&#xff1a;乐观锁和悲观锁是并发控制的两种方式&#xff0c;用来确保在多线程或多用户访问共享资源时&#xff0c;数据的一致性和完整性。 悲观锁&#xff08;Pessimistic Lock&#xff09; 悲观锁假设并发操作会经常发生&#xf…

GitLab CVE-2024-6678、CVE-2024-8640 漏洞解决方案

极狐GitLab 近日发布安全补丁版本17.3.2, 17.2.5, 17.1.7&#xff0c;修复了17个安全漏洞&#xff0c;本分分享 CVE-2024-6678、CVE-2024-8640 两个漏洞详情。 极狐GitLab 正式推出面向 GitLab 老旧版本免费用户的专业升级服务&#xff0c;为 GitLab 老旧版本进行专业升级&…

【漏洞复现】SpringBlade menu/list SQL注入漏洞

》》》产品描述《《《 致远互联智能协同是一个信息窗口与工作界面,进行所有信息的分类组合和聚合推送呈现。通过面向角色化、业务化、多终端的多维信息空间设计,为不同组织提供协同门户,打破组织内信息壁垒,构建统一协同沟通的平台。 》》》漏洞描述《《《 致远互联 FE协作办公…

【PyTorch】DataLoader 设置 num_workers > 0 时,出现 CUDA with multiprocessing 相关报错

【PyTorch】DataLoader 设置 num_workers > 0 时&#xff0c;出现 CUDA with multiprocessing 相关报错 1 报错信息2 报错分析2.1 原因2.2 结论 3 解决方法 1 报错信息 RuntimeError: Caught RuntimeError in DataLoader worker process 0.RuntimeError: Cannot re-initial…

mac安装homebrew和git

简介 由于把自己的新mac拿来撸代码&#xff0c;开始环境搭建&#xff0c;安装各种工具和依赖&#xff0c;安装 git 需要先安装 homebrew&#xff0c;然后就遇到了 homebrew 安装失败的问题。 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection…

bat弹出提示对话框

::多种提示框样式自己按需选择 mshta vbscript:msgbox("提示内容1",1,"提示窗口1")(window.close) mshta vbscript:msgbox("提示内容2",2,"提示窗口2")(window.close) mshta vbscript:msgbox("提示内容3",3,"提示窗口3…

linux 中lsof 命令详解

目录 简介输出信息含义输出示例 常用参数示例命令 使用实例查找文件系统使用情况安全审计与其他工具结合使用性能考虑 实用命令总结 简介 lsof&#xff08;List Open Files&#xff09;是一个用于列出当前系统打开文件的强大工具。在 Linux 环境下&#xff0c;几乎所有事物都以…

基于SpringBoot+Vue+uniapp的C语言在线评测系统的详细设计和实现

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…

NewStarCTF2024-Week2-Web-WP

目录 1、复读机 2、你能在一秒内打出八句英文吗 3、遗失的拉链 4、谢谢皮蛋 plus 5、PangBai 过家家&#xff08;2&#xff09; 1、复读机 测了下存在 ssti 没什么说的 fenjing 秒了 2、你能在一秒内打出八句英文吗 每次出来的需要提交的内容都不一样 exp&#xff1a; …