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

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

news 文章来源：https://blog.csdn.net/fmc121104/article/details/142980143 2025/5/14 9:48:19

接上文

网络中的图片

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

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

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

Android 自定义Toast显示View

1、创建一个tosat显示的布局文件&#xff1a;toast_custom.xml <?xml version"1.0" encoding"utf-8"?> <com.hjq.shape.layout.ShapeLinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width&…...

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

SCRM呼叫中心高保真Axure原型 源文件分享

在数字化时代&#xff0c;客户关系管理&#xff08;CRM&#xff09;对于企业的成功至关重要。SCRM呼叫中心后台作为一款专为CRM设计的软件原型&#xff0c;致力于为企业提供高效、智能的客户沟通解决方案。本文将详细介绍该产品的核心功能及其对企业提升客户满意度和销售业绩的…...

编程日记 2024/10/17 23:33:15

Ubuntu（Linux）tcpdump使用方法详解

tcpdump命令 1.从所有网卡获取数据包 tcpdump -i any2.从指定网卡获取数据包 tcpdump -i eth03.指定网卡&#xff0c;IP&#xff0c;写文件 tcpdump -i eth0 host 192.168.16.101 -w ./tcp.dat //host 后面是发送方的地址4.指定网卡&#xff0c;源IP且目的IP&#xff0c;写入…...

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

Centos安装Nginx 非Docker

客户的机器属于 Centos7 系列&#xff0c;由于其较为陈旧&#xff0c;2024开始众多镜像和软件源都已失效。此篇文章将详细记录在 Centos7 操作系统上从零开始安装 Nginx 的整个流程。 本文Nginx是安装在/usr/local/nginx下 详细步骤如下&#xff1a; 准备Nginx安装包&#x…...

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

免费版的音频剪辑软件：这四款有没有你的菜？

随着音频编辑需求的日益增长&#xff0c;免费的音频剪辑软件逐渐成为许多创作者、学生和普通用户的心头好。今天&#xff0c;就让我为大家介绍几款热门的免费音频剪辑软件&#xff0c;并分享一下我的使用感受吧&#xff01; 一、福昕音频剪辑 直通车&#xff08;复制粘贴到网站…...

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

Facebook的隐私之战：数据保护的挑战与未来

在数字化时代&#xff0c;隐私保护成为了公众关注的焦点&#xff0c;尤其是在社交媒体巨头Facebook身上。随着用户数据泄露事件的频发&#xff0c;Facebook面临着日益严峻的隐私挑战。这些挑战不仅涉及法律法规的遵循&#xff0c;还影响着用户信任、公司声誉以及未来的发展方向…...

编程日记 2024/10/17 23:27:08

自定义注解和组件扫描在Spring Boot中动态注册Bean（二）

在Spring Boot中&#xff0c;自定义注解和组件扫描是实现动态注册Bean的两种重要手段。通过它们&#xff0c;开发者可以灵活地管理Spring容器中的Bean&#xff0c;提高开发效率和代码的可维护性。本文将详细讲解自定义注解和组件扫描在Spring Boot中如何动态注册Bean。 自定义…...

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

常见网络协议的介绍、使用场景及 Java 代码样例

以下是几种常见网络协议的介绍、使用场景及 Java 代码样例&#xff1a; 一、HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09; 介绍&#xff1a; HTTP 是用于在 Web 浏览器和 Web 服务器之间传输超文本的应用层协议。基于请求 - 响应模式…...

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

音视频好文总结

RTSP play同步 ffplay播放器研究分析 ffplay播放器 暂停、逐帧、音量、快进快退seek功能分析 RTSP RTP RTCP SDP基础知识 flv格式分析与解复用 TS格式详解 m3u8格式详解 FLV格式详解 MP4格式详解 HLS协议详解 RTMP协议详解 HTTP-FLV协议详解 H.264 SPS、PPS详解 H…...

编程日记 2024/10/17 23:21:00

云服务器磁盘满了，清理docker无用缓存、容器等清理

docker system prune 命令用于清理 Docker 系统中的各种未使用资源。根据你提供的警告信息&#xff0c;这条命令将会移除以下内容&#xff1a; 所有已停止的容器&#xff08;all stopped containers&#xff09; 所有未被至少一个容器使用的网络&#xff08;all networks no…...

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