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

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

news 2026/4/6 22:03:26

接上文

网络中的图片

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

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

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

2025届最火的降AI率神器推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 近期&#xff0c;知网发布了有关人工智能生成内容&#xff0c;也就是AIGC的检测服务以及使用…...

编程新知 2026/4/6 21:30:01

告别网络延迟！AutoGLM-Phone-9B本地化部署实战，手机也能流畅对话AI

告别网络延迟&#xff01;AutoGLM-Phone-9B本地化部署实战&#xff0c;手机也能流畅对话AI 1. AutoGLM-Phone-9B简介与核心优势 1.1 专为移动端设计的轻量级大模型 AutoGLM-Phone-9B是一款革命性的多模态大语言模型&#xff0c;专为移动设备和边缘计算场景优化。与传统的云端…...

编程新知 2026/4/6 21:13:44

5个实用场景展示：用Phi-3-mini轻松搞定文本改写与摘要整理

5个实用场景展示&#xff1a;用Phi-3-mini轻松搞定文本改写与摘要整理 1. 引言&#xff1a;为什么选择Phi-3-mini进行文本处理 在日常工作和学习中&#xff0c;我们经常需要处理各种文本任务&#xff1a;改写句子使其更专业、总结长篇文章的要点、快速生成内容草稿等。传统方…...

编程新知 2026/4/6 21:13:44

如何实现Vuetify与GraphQL Code Generator的完美结合：终极类型安全数据获取指南

如何实现Vuetify与GraphQL Code Generator的完美结合&#xff1a;终极类型安全数据获取指南 【免费下载链接】vuetify &#x1f409; Vue Component Framework 项目地址: https://gitcode.com/gh_mirrors/vu/vuetify 在现代Web开发中&#xff0c;Vuetify组件框架与Graph…...

编程新知 2026/4/6 20:43:31

如何使用unbuild在5分钟内搭建现代化JavaScript项目：终极快速指南

如何使用unbuild在5分钟内搭建现代化JavaScript项目&#xff1a;终极快速指南 【免费下载链接】unbuild &#x1f4e6; A unified JavaScript build system 项目地址: https://gitcode.com/gh_mirrors/un/unbuild 在当今快速发展的JavaScript生态系统中&#xff0c;构建…...

编程新知 2026/4/6 20:27:24

直接上干货，这个方案最香的就是省掉PLC还能玩转两台变频器。实测施耐德ATV312配MCGS屏的RTU通讯稳得一批，咱们先从最关键的接线开整

mcgs rtu方式通讯两台施耐德ATV312变频器示例 &#xff0c;通讯实现触摸屏控制监控变频器&#xff0c;中间不需要plc&#xff0c;功能多而且使用方便&#xff0c;关键还节约成本。 所需硬件:施耐德atv312变频器&#xff0c;mcgs触摸屏&#xff08;没屏也可&#xff0c;电脑在线…...

编程新知 2026/4/6 20:11:14

Multisim仿真进阶指南：从零构建PWM调光电路（附波形分析与调试秘籍）

1. PWM调光电路&#xff1a;从原理到Multisim实现 第一次接触PWM调光电路时&#xff0c;我被它精准的亮度控制能力惊艳到了。相比简单的呼吸灯电路&#xff0c;PWM调光可以通过调节占空比来实现LED从完全熄灭到最大亮度的无级调节&#xff0c;这在实际项目中特别实用。比如智能…...

编程新知 2026/4/6 18:40:28

AutoUnipus终极指南：2025年最简单快速的U校园全自动答题工具

AutoUnipus终极指南&#xff1a;2025年最简单快速的U校园全自动答题工具 【免费下载链接】AutoUnipus U校园脚本,支持全自动答题,百分百正确 2024最新版 项目地址: https://gitcode.com/gh_mirrors/au/AutoUnipus 还在为U校园平台的繁重网课任务而烦恼吗&#xff1f;Aut…...

编程新知 2026/4/6 17:01:17

DAMOYOLO-S在智慧农业中的应用：无人机农田监测分析

DAMOYOLO-S在智慧农业中的应用&#xff1a;无人机农田监测分析 1. 引言 想象一下&#xff0c;你站在一片广阔的农田边&#xff0c;想要知道这片地里有多少棵玉米苗&#xff0c;有没有生病&#xff0c;长势怎么样。靠人眼去数、去看&#xff0c;不仅费时费力&#xff0c;还容易…...

编程新知 2026/4/6 16:00:47

从FLOPS到TOPS：深入解析算力单位及其在AI芯片中的应用

1. 算力单位&#xff1a;从FLOPS到TOPS的进化史 第一次接触FLOPS这个术语时&#xff0c;我正试图比较两款显卡的性能。当时完全被各种"FLOP"搞晕了头&#xff0c;直到后来在实际项目中调试AI模型时&#xff0c;才真正理解了这些算力单位背后的意义。FLOPS&#xff0…...

编程新知 2026/4/6 15:42:33