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

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

news 2025/7/7 12:34:18

接上文

网络中的图片

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

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

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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/6/21 16:23:04

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/7/4 13:58:19

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/6/18 4:00:59

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/7/6 13:32:03

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/7/6 19:31:37

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/7 1:04:44

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/7/5 6:31:30

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/7/7 0:36:08