当前位置： 首页 > news >正文

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

news 2026/6/1 19:18:15

接上文

网络中的图片

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

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

其实在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"

相关文章：

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

接上文 网络中的图片 我们也可以在百度等网站搜索自己喜欢的图片。 此时对图片点击右键&#xff0c;选择【复制图片地址】&#xff0c;即可获得该图片的网络地址。 其实在HTML中&#xff0c;除了图片以外&#xff0c;我们还可以利用地址找到另一个网页。 如右图所示&#…...

编程日记 2024/10/18 0:04:51

Linux系统性能调优技巧

Linux系统性能调优是一个复杂而持续的过程&#xff0c;需要综合考虑硬件、软件、内核参数、进程管理等多个方面。以下是一些具体的调优技巧&#xff1a; 一、硬件优化 增加物理内存&#xff1a;内存不足时&#xff0c;系统会频繁进行交换&#xff08;swapping&#xff09;活动…...

编程日记 2024/10/18 0:03:49

数学建模算法与应用 第5章 插值与拟合方法

目录 5.1 插值方法 Matlab代码示例&#xff1a;线性插值 Matlab代码示例&#xff1a;样条插值 5.2 曲线拟合的线性最小二乘法 Matlab代码示例&#xff1a;线性拟合 5.3 最小二乘优化与多项式拟合 Matlab代码示例&#xff1a;多项式拟合 5.4 曲线拟合与函数逼近 Matlab代…...

编程日记 2024/10/18 0:02:47

3D Slicer 教程二 ---- 数据集

上一章下载3d slicer的软件,这章从加载数据集来弄清楚3dslicer怎么使用. 一. 加载数据集 如果没有数据集,也可用用样本数据. (1) "File" --> "add Data" 可以添加图片文件夹,(试了MP4不行,内镜的视频估计不支持),添加单个图片的话,会出现一些选项, …...

编程日记 2024/10/17 23:59:43

【建议收藏】30个Java异常的知识点，你能撑到第几个？

文章目录 问题1&#xff1a;Error 和 Exception 区别是什么&#xff1f;问题2&#xff1a;运行时异常和一般异常(受检异常)区别是什么&#xff1f;问题3&#xff1a;JVM 是如何处理异常的&#xff1f;问题4&#xff1a;throw 和 throws 的区别是什么&#xff1f;问题5&#xff…...

编程日记 2024/10/17 23:58:42

【Linux系统编程】环境基础开发工具使用

目录 1、Linux软件包管理器yum 1.1 什么是软件包 1.2 安装软件 1.3 查看软件包 1.4 卸载软件 2、Linux编辑器-vim 2.1 vim的概念 2.2 vim的基本操作 2.3 vim的配置 3、Linux编译器-gcc/g 3.1 gcc编译的过程​编辑​编辑​编辑 3.2 详解链接 动态链接 静态链接 4…...

编程日记 2024/10/17 23:57:41

滚雪球学Redis[6.2讲]：Redis脚本与Lua：深入掌握Redis中的高效编程技巧

全文目录&#xff1a; &#x1f4dd;前言&#x1f6a6;正文&#x1f31f;6.2.1 Lua脚本的优势&#x1f58b;️6.2.2 EVAL命令与Lua脚本编写&#x1f435;编写Lua脚本的基本步骤&#x1f436;示例&#xff1a;简单的GET和SET操作&#x1f431;示例&#xff1a;Lua实现自增和过期…...

编程日记 2024/10/17 23:54:39

上市不到一月，极氪7X交付破万台！论纯电，极氪真“遥遥领先”

承认吧&#xff0c;在纯电这条赛道上&#xff0c;极氪真就“遥遥领先”~ 推出的第一款原生纯电猎装极氪001&#xff0c;就常年霸榜25万级豪华纯电销冠 主打豪华大车的极氪009&#xff0c;成为40万以上高端“保姆车”的不二之选 第一次面向主流纯电市场推出的豪华大五座——极…...

编程日记 2024/10/17 23:53:38

【Linux】理解文件系统与软硬链接，观察inode号理解＜“软链接是包含路径的新文件“，“硬链接是关于文件名的机制“＞，最终明白＜什么是真正删除一个文件＞

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…...

编程日记 2024/10/17 23:50:34

Java高并发控制之按业务对象加同步锁

一、需求 最常见的一个场景&#xff0c;账户余额更新&#xff01; 业务场景稍复杂点&#xff0c;一个客户有多个虚拟余额账户&#xff0c;产生交易时&#xff0c;需要同时更新客户的多个余额账户&#xff0c;现在需要为余额更新做并发控制。 二、解决方案 1、依赖数据的乐观锁&…...

编程日记 2024/10/17 23:47:31

Python魔法函数__iter__的用法

下面是找到的一个比较好的科学解释&#xff1a; Python中可迭代对象(Iterable)并不是指某种具体的数据类型&#xff0c;它是指存储了元素的一个容器对象&#xff0c;且容器中的元素可以通过__iter__( )方法或__getitem__( )方法访问。 1.__iter__方法的作用是让对象可以用for…...

编程日记 2024/10/17 23:46:30

Redis-缓存一致性

缓存双写一致性 更新策略探讨 面试题 缓存设计要求 缓存分类&#xff1a; 只读缓存&#xff1a;&#xff08;脚本批量写入&#xff0c;canal 等&#xff09;读写缓存 同步直写&#xff1a;vip数据等即时数据异步缓写&#xff1a;允许延时&#xff08;仓库&#xff0c;物流&a…...

编程日记 2024/10/17 23:45:29

SAP学习笔记 - 豆知识13 - Msg 番号 NR751 - Object RF_BELEG R100、番号範囲間隔 49 不存在 FBN1

其实这种就是自动採番的番号没弄。 比如跨年了&#xff0c;那该新年度的番号范围没弄啊&#xff0c;就会出这种错误。 把番号范围给加一下就可以了。 1&#xff0c;现象 比如点 VL02N 出荷传票变更 画面&#xff0c;点 出库确认 就会出如下错误&#xff1a; Object RF_BEL…...

编程日记 2024/10/17 23:44:28

美摄科技云服务解决方案，方案成熟，接入简单

美摄科技作为视频处理领域的先锋&#xff0c;凭借其强大的技术实力和深厚的行业经验&#xff0c;推出了成熟的云服务解决方案&#xff0c;为轻量化视频制作开辟了全新的道路。 一、成熟方案&#xff0c;接入无忧 美摄科技云服务解决方案的最大亮点在于其成熟度和易用性。我们…...

编程日记 2024/10/17 23:41:25

【bug】paddleocr draw_ocr_box_txt ValueError: incorrect coordinate type

【bug】paddleocr draw_ocr_box_txt ValueError: incorrect coordinate type 环境 python 3.10.15pillow 10.4.0 paddleocr 2.8.1错误详情 错误文本 Traceback (most recent call last):....draw_left.polygon(box, fillcolor)ValueError: inco…...

编程日记 2024/10/17 23:40:25

python的多线程和多进程

首先需要明确的是&#xff0c;多进程和其他语言的一样&#xff0c;能够利用多核cpu&#xff0c;但是python由于GIL的存在&#xff0c;多线程在执行的时候&#xff0c;实际上&#xff0c;每一时刻只有一个线程在执行。相当于是单线程。然而多线程在某些情况下&#xff0c;还是能…...

编程日记 2024/10/17 23:39:24

基于SpringBoot+Vue+uniapp的时间管理小程序的详细设计和实现(源码+lw+部署文档+讲解等)

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

编程日记 2024/10/17 23:38:22

HMAC-MD5参数签名算法

更多中电联在线工具 HMAC-MD5 是一种基于 MD5 哈希函数的消息认证码&#xff08;MAC&#xff09;算法。它用于确保消息的完整性和认证&#xff0c;通常用于数据传输和 API 请求。其基本步骤如下&#xff1a; 密钥准备&#xff1a;选择一个密钥&#xff08;K&#xff09;&#…...

编程日记 2024/10/17 23:37:20

【word】文章里的表格边框是双杠

日常小伙伴们遇到word里插入的表格&#xff0c;边框是双杠的&#xff0c;直接在边框和底纹里修改边框的样式就可以&#xff0c;但我今天遇到的这个有点特殊&#xff0c;先看看表格在word里的样式是怎么样&#xff0c;然后我们聊聊如何解决。 这个双杠不是边框和底纹的设置原因…...

编程日记 2024/10/17 23:36:18

我常用的两个单例模式写法 （继承Mono和不继承Mono的）

不继承Mono 不继承Mono代表不用挂载到场景物体上面&#xff0c;因此直接饿汉式 加 合并空运算符判空创建实例 >(lambda表达式)的意思是get&#xff0c;就是将instance赋给Instance属性 //单例private static JsonDataManager instance new JsonDataManager();public stati…...

编程日记 2024/10/17 23:35:17

基于XGBoost与SHAP的分子气味预测：从特征工程到可解释性分析

1. 项目概述与核心价值在香水设计、食品风味工业乃至环境监测领域&#xff0c;一个核心且持久的挑战是&#xff1a;如何从分子的化学结构出发&#xff0c;准确预测其气味&#xff1f;这不仅仅是化学家或调香师的直觉游戏&#xff0c;更是一个复杂的、高维度的模式识别问题。传统…...

编程新知 2026/5/26 3:28:08

从社交关系到分子结构：图解GCN（图卷积网络）到底在‘看’什么？

从社交关系到分子结构&#xff1a;图解GCN&#xff08;图卷积网络&#xff09;到底在‘看’什么&#xff1f;想象一下&#xff0c;你刚搬到一个新社区&#xff0c;想快速了解周围的邻居。最直接的方式是什么&#xff1f;不是挨家挨户敲门&#xff0c;而是通过社区活动认识几位关…...

编程新知 2026/5/26 2:11:27

Redis分布式锁进阶第二十篇

一、本篇前置衔接 第二十篇我们完成了全系列终局复盘&#xff0c;整理了故障排查SOP与企业级落地铁律。常规单资源锁、热点分片锁、隔离锁全部讲透&#xff0c;但真实复杂业务永远不是单一资源&#xff1a;下单要扣库存、扣优惠券、扣积分、冻结余额&#xff0c;多资源并行争抢…...

编程新知 2026/5/26 1:37:09

对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比 Token Plan 与按量计费在 Taotoken 平台上的成本体感差异 对于个人开发者或项目管理者而言&#xff0c;在接入大模型服务时&a…...

编程新知 2026/5/26 1:13:04

37家金融客户紧急启用的DeepSeek扫描辅助加固包（含未公开API调用密钥策略）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek漏洞扫描辅助的背景与战略价值 近年来&#xff0c;大模型在安全领域的应用正从辅助问答向深度协同防御演进。DeepSeek系列模型凭借其开源、高推理精度及强代码理解能力&#xff0c;成为构建智能化漏洞…...

编程新知 2026/5/25 23:41:43

如何快速集成 react-native-bottom-sheet-behavior：5 分钟搞定 Android 底部弹窗

如何快速集成 react-native-bottom-sheet-behavior&#xff1a;5 分钟搞定 Android 底部弹窗 【免费下载链接】react-native-bottom-sheet-behavior react-native wrapper for android BottomSheetBehavior 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom…...

编程新知 2026/5/25 21:43:58

3分钟掌握JetBrains IDE试用期重置：终极完整指南

3分钟掌握JetBrains IDE试用期重置&#xff1a;终极完整指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一个开源项目&#xff0c;专…...

编程新知 2026/5/25 20:49:11

工业云脑：06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例

06 现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例 今天第九篇06小节——现在就能干：树莓派边缘盒子+PLC，10分钟缺陷检测小案例。新手照着做10分钟就能跑起来，老手一看就知道这玩意儿省了多少钱。以前想上AI检测，得花几万块买专业边缘盒子；现在？树莓派5（RPi 5）…...

编程新知 2026/5/25 20:28:07

DLA功耗优化验证：tegrastats实战指南

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/25 17:48:30

Java网络编程基础分享

在学习 Java 的过程中&#xff0c;网络编程是非常重要的一环。无论是后端开发、分布式系统、即时通讯、文件传输&#xff0c;还是游戏服务、物联网设备&#xff0c;都离不开网络通信一、计算机网络基础1.1 什么是计算机网络把不同地理位置、具有独立功能的计算机&#xff0c;通…...

编程新知 2026/5/25 17:34:28