生日快乐祝福网页制作教程
原文：https://www.w3cschool.cn/article/88229685.html
（本文非我原创，请标记为付费文章，也请勿将我标记为原创）
一、引言
生日是每个人一年中最特别的日子之一。在这个特别的日子里，我们都希望能够给亲朋好友送上最温馨、最独特的祝福。在互联网时代，一份电子生日祝福网页不仅能传达我们的心意，还能带来惊喜和新鲜感。今天，编程狮将手把手教你用简单的 HTML、CSS 和 JavaScript 制作一个精美的生日祝福网页。
二、基础 HTML 结构搭建
首先，我们需要搭建一个基本的 HTML 页面框架。这是后续所有元素和效果的基础。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生日快乐祝福 - 编程狮教程</title><style>/* 在这里添加 CSS 样式 */</style>
</head>
<body><div class="container"><h1>生日快乐！</h1><div class="card"><div class="message">祝你生日快乐，幸福永远！</div><div class="signature">来自编程狮</div></div></div><script>// 在这里添加 JavaScript 代码</script>
</body>
</html>
三、添加 CSS 样式美化页面
让我们的祝福网页更加美观和有吸引力是关键。我们使用 CSS 来设计一个漂亮的卡片样式，并添加一些氛围装饰元素。
<style>/* 设置页面基础样式 */body {font-family: 'Arial', sans-serif;background-color: #f8e8ff; /* 柔和的紫色背景 */margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;overflow: hidden; /* 隐藏溢出的装饰元素 */position: relative; /* 用于定位装饰元素 */}/* 添加背景渐变效果 */body::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, #f8e8ff 0%, #e6f7ff 100%);z-index: -1; /* 确保渐变在最底层 */}/* 添加彩带装饰 */.ribbon {position: absolute;width: 200px;height: 20px;background-color: #ff6b6b;border-radius: 10px;animation: float 3s ease-in-out infinite;}.ribbon:nth-child(1) {top: 10%;left: 10%;animation-delay: 0s;}.ribbon:nth-child(2) {top: 30%;right: 15%;animation-delay: 0.5s;background-color: #4ecef7;}.ribbon:nth-child(3) {bottom: 20%;left: 20%;animation-delay: 1s;background-color: #ffd166;}.ribbon:nth-child(4) {bottom: 40%;right: 10%;animation-delay: 1.5s;background-color: #63f7c2;}/* 彩带飘动动画 */@keyframes float {0% {transform: translateY(0) rotate(0deg);}50% {transform: translateY(-20px) rotate(10deg);}100% {transform: translateY(0) rotate(0deg);}}/* 添加礼物装饰 */.gift {position: absolute;width: 40px;height: 40px;background-color: #ffd166;border-radius: 5px;display: flex;justify-content: center;align-items: center;font-weight: bold;color: white;animation: bounce 2s ease-in-out infinite;}.gift:nth-child(1) {top: 20%;left: 15%;animation-delay: 0s;}.gift:nth-child(2) {top: 60%;right: 20%;animation-delay: 0.5s;background-color: #4ecef7;}.gift:nth-child(3) {bottom: 25%;left: 25%;animation-delay: 1s;background-color: #ff6b6b;}/* 礼物弹跳动画 */@keyframes bounce {0% {transform: translateY(0);}50% {transform: translateY(-15px);}100% {transform: translateY(0);}}/* 添加生日蜡烛装饰 */.candle {position: absolute;width: 6px;height: 30px;background-color: #ff9e00;border-radius: 5px;}.candle::after {content: '';position: absolute;top: -8px;left: 50%;transform: translateX(-50%);width: 12px;height: 12px;background-color: #ffff00;border-radius: 50%;box-shadow: 0 0 10px #ffff00;animation: flicker 1.5s ease-in-out infinite;}.candle:nth-child(1) {top: 15%;left: 30%;animation-delay: 0s;}.candle:nth-child(2) {top: 25%;right: 25%;animation-delay: 0.2s;}.candle:nth-child(3) {bottom: 20%;left: 40%;animation-delay: 0.5s;}.candle:nth-child(4) {bottom: 35%;right: 30%;animation-delay: 0.7s;}/* 蜡烛火焰闪烁动画 */@keyframes flicker {0% {opacity: 0.8;transform: scale(1);}50% {opacity: 1;transform: scale(1.2);}100% {opacity: 0.8;transform: scale(1);}}/* 添加礼花装饰 */.firework {position: absolute;width: 10px;height: 10px;border-radius: 50%;box-shadow: 0 0 20px 5px currentColor;animation: explode 2s ease-out infinite;}.firework:nth-child(1) {top: 10%;left: 20%;color: #ff6b6b;animation-delay: 0s;}.firework:nth-child(2) {top: 20%;right: 30%;color: #4ecef7;animation-delay: 0.5s;}.firework:nth-child(3) {bottom: 15%;left: 25%;color: #ffd166;animation-delay: 1s;}.firework:nth-child(4) {bottom: 25%;right: 20%;color: #63f7c2;animation-delay: 1.5s;}/* 礼花爆炸动画 */@keyframes explode {0% {transform: scale(0);opacity: 1;}100% {transform: scale(2);opacity: 0;}}/* 设置容器样式 */.container {width: 100%;max-width: 600px;text-align: center;position: relative;z-index: 1; /* 确保内容在装饰元素之上 */}/* 设置卡片样式 */.card {background-color: white;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);padding: 30px;margin: 20px auto;transform: scale(0); /* 初始时卡片缩小 */animation: popIn 0.5s ease forwards; /* 使用动画让卡片弹出 */position: relative;overflow: hidden; /* 隐藏溢出的内容 */}/* 卡片弹出动画 */@keyframes popIn {to {transform: scale(1);}}/* 设置标题样式 */h1 {color: #ff6b6b;margin-bottom: 30px;font-size: 2.5rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}/* 设置祝福语样式 */.message {font-size: 24px;color: #333;margin-bottom: 20px;line-height: 1.5;}/* 设置签名样式 */.signature {font-style: italic;color: #777;margin-top: 20px;}/* 添加生日蛋糕装饰 */.cake {width: 150px;height: 150px;margin: 20px auto;background-color: #ffd166;border-radius: 5px;position: relative;display: flex;justify-content: center;align-items: center;overflow: hidden;}.cake::before {content: ''; /* 使用蛋糕 emoji */font-size: 120px;position: absolute;z-index: 2;}.cake::after {content: '';position: absolute;width: 100%;height: 15px;background-color: #ff6b6b;bottom: 0;z-index: 3;}/* 添加按钮样式 */.btn {padding: 10px 20px;background-color: #ff6b6b;color: white;border: none;border-radius: 5px;cursor: pointer;margin-top: 20px;font-size: 16px;transition: background-color 0.3s;}.btn:hover {background-color: #ff5252;}/* 添加祝福语切换效果 */.message {transition: all 0.5s ease;}
</style>
四、添加 JavaScript 动画效果
为了让祝福网页更具互动性和惊喜感，我们可以使用 JavaScript 来添加一些简单的动画效果。
<script>// 定义祝福语数组const messages = ["生日快乐！愿你笑口常开。","祝你生日快乐，心想事成！","生日快乐！愿你天天快乐。","祝你生日快乐，万事如意！","生日快乐！愿你青春永驻。"];// 获取祝福语元素const messageElement = document.querySelector('.message');// 切换祝福语的函数function changeMessage() {// 随机选择一个祝福语const randomMessage = messages[Math.floor(Math.random() * messages.length)];// 更新祝福语内容messageElement.textContent = randomMessage;}// 页面加载完成后执行document.addEventListener('DOMContentLoaded', function() {// 每隔 3 秒自动切换祝福语setInterval(changeMessage, 3000);// 初始调用一次，确保页面加载时显示一个祝福语changeMessage();// 输出调试信息console.log('生日快乐网页加载完成 - 来自编程狮');});
</script>五、使用编程狮的 HTML 在线工具进行实时预览
在制作过程中，你可以使用编程狮提供的 HTML 在线运行工具 进行实时预览和调试。这个工具可以帮助你快速看到代码修改后的效果，方便及时调整。
六、完整代码预览
以下是完整的代码，你可以直接复制到你的 HTML 文件中运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生日快乐祝福 - 编程狮教程</title><style>/* 设置页面基础样式 */body {font-family: 'Arial', sans-serif;background-color: #f8e8ff; /* 柔和的紫色背景 */margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;overflow: hidden; /* 隐藏溢出的装饰元素 */position: relative; /* 用于定位装饰元素 */}/* 添加背景渐变效果 */body::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, #f8e8ff 0%, #e6f7ff 100%);z-index: -1; /* 确保渐变在最底层 */}/* 添加彩带装饰 */.ribbon {position: absolute;width: 200px;height: 20px;background-color: #ff6b6b;border-radius: 10px;animation: float 3s ease-in-out infinite;}.ribbon:nth-child(1) {top: 10%;left: 10%;animation-delay: 0s;}.ribbon:nth-child(2) {top: 30%;right: 15%;animation-delay: 0.5s;background-color: #4ecef7;}.ribbon:nth-child(3) {bottom: 20%;left: 20%;animation-delay: 1s;background-color: #ffd166;}.ribbon:nth-child(4) {bottom: 40%;right: 10%;animation-delay: 1.5s;background-color: #63f7c2;}/* 彩带飘动动画 */@keyframes float {0% {transform: translateY(0) rotate(0deg);}50% {transform: translateY(-20px) rotate(10deg);}100% {transform: translateY(0) rotate(0deg);}}/* 添加礼物装饰 */.gift {position: absolute;width: 40px;height: 40px;background-color: #ffd166;border-radius: 5px;display: flex;justify-content: center;align-items: center;font-weight: bold;color: white;animation: bounce 2s ease-in-out infinite;}.gift:nth-child(1) {top: 20%;left: 15%;animation-delay: 0s;}.gift:nth-child(2) {top: 60%;right: 20%;animation-delay: 0.5s;background-color: #4ecef7;}.gift:nth-child(3) {bottom: 25%;left: 25%;animation-delay: 1s;background-color: #ff6b6b;}/* 礼物弹跳动画 */@keyframes bounce {0% {transform: translateY(0);}50% {transform: translateY(-15px);}100% {transform: translateY(0);}}/* 添加生日蜡烛装饰 */.candle {position: absolute;width: 6px;height: 30px;background-color: #ff9e00;border-radius: 5px;}.candle::after {content: '';position: absolute;top: -8px;left: 50%;transform: translateX(-50%);width: 12px;height: 12px;background-color: #ffff00;border-radius: 50%;box-shadow: 0 0 10px #ffff00;animation: flicker 1.5s ease-in-out infinite;}.candle:nth-child(1) {top: 15%;left: 30%;animation-delay: 0s;}.candle:nth-child(2) {top: 25%;right: 25%;animation-delay: 0.2s;}.candle:nth-child(3) {bottom: 20%;left: 40%;animation-delay: 0.5s;}.candle:nth-child(4) {bottom: 35%;right: 30%;animation-delay: 0.7s;}/* 蜡烛火焰闪烁动画 */@keyframes flicker {0% {opacity: 0.8;transform: scale(1);}50% {opacity: 1;transform: scale(1.2);}100% {opacity: 0.8;transform: scale(1);}}/* 添加礼花装饰 */.firework {position: absolute;width: 10px;height: 10px;border-radius: 50%;box-shadow: 0 0 20px 5px currentColor;animation: explode 2s ease-out infinite;}.firework:nth-child(1) {top: 10%;left: 20%;color: #ff6b6b;animation-delay: 0s;}.firework:nth-child(2) {top: 20%;right: 30%;color: #4ecef7;animation-delay: 0.5s;}.firework:nth-child(3) {bottom: 15%;left: 25%;color: #ffd166;animation-delay: 1s;}.firework:nth-child(4) {bottom: 25%;right: 20%;color: #63f7c2;animation-delay: 1.5s;}/* 礼花爆炸动画 */@keyframes explode {0% {transform: scale(0);opacity: 1;}100% {transform: scale(2);opacity: 0;}}/* 设置容器样式 */.container {width: 100%;max-width: 600px;text-align: center;position: relative;z-index: 1; /* 确保内容在装饰元素之上 */}/* 设置卡片样式 */.card {background-color: white;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);padding: 30px;margin: 20px auto;transform: scale(0); /* 初始时卡片缩小 */animation: popIn 0.5s ease forwards; /* 使用动画让卡片弹出 */position: relative;overflow: hidden; /* 隐藏溢出的内容 */}/* 卡片弹出动画 */@keyframes popIn {to {transform: scale(1);}}/* 设置标题样式 */h1 {color: #ff6b6b;margin-bottom: 30px;font-size: 2.5rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}/* 设置祝福语样式 */.message {font-size: 24px;color: #333;margin-bottom: 20px;line-height: 1.5;transition: all 0.5s ease;}/* 设置签名样式 */.signature {font-style: italic;color: #777;margin-top: 20px;}/* 添加生日蛋糕装饰 */.cake {width: 150px;height: 150px;margin: 20px auto;background-color: #ffd166;border-radius: 5px;position: relative;display: flex;justify-content: center;align-items: center;overflow: hidden;}.cake::before {content: ''; /* 使用蛋糕 emoji */font-size: 120px;position: absolute;z-index: 2;}.cake::after {content: '';position: absolute;width: 100%;height: 15px;background-color: #ff6b6b;bottom: 0;z-index: 3;}/* 添加按钮样式 */.btn {padding: 10px 20px;background-color: #ff6b6b;color: white;border: none;border-radius: 5px;cursor: pointer;margin-top: 20px;font-size: 16px;transition: background-color 0.3s;}.btn:hover {background-color: #ff5252;}</style>
</head>
<body><!-- 彩带装饰 --><div class="ribbon"></div><div class="ribbon"></div><div class="ribbon"></div><div class="ribbon"></div><!-- 礼物装饰 --><div class="gift"></div><div class="gift"></div><div class="gift"></div><!-- 生日蜡烛装饰 --><div class="candle"></div><div class="candle"></div><div class="candle"></div><div class="candle"></div><!-- 礼花装饰 --><div class="firework"></div><div class="firework"></div><div class="firework"></div><div class="firework"></div><div class="container"><h1>生日快乐！</h1><div class="cake"></div><div class="card"><div class="message">祝你生日快乐，幸福永远！</div><div class="signature">来自编程狮</div></div><button class="btn" onclick="changeMessage()">切换祝福语</button></div><script>// 定义祝福语数组const messages = ["生日快乐！愿你笑口常开。","祝你生日快乐，心想事成！","生日快乐！愿你天天快乐。","祝你生日快乐，万事如意！","生日快乐！愿你青春永驻。"];// 获取祝福语元素const messageElement = document.querySelector('.message');// 切换祝福语的函数function changeMessage() {// 随机选择一个祝福语const randomMessage = messages[Math.floor(Math.random() * messages.length)];// 更新祝福语内容messageElement.textContent = randomMessage;}// 页面加载完成后执行document.addEventListener('DOMContentLoaded', function() {// 每隔 3 秒自动切换祝福语setInterval(changeMessage, 3000);// 初始调用一次，确保页面加载时显示一个祝福语changeMessage();// 输出调试信息console.log('生日快乐网页加载完成 - 来自编程狮');});</script>
</body>
</html>
七、代码详细注释
HTML 部分
- 文档类型和基础标签 ：使用标准的
<!DOCTYPE html>声明文档类型，并包含基本的html、head和body标签。 - 元信息 ：在
head中设置字符编码和视口信息，确保页面正确显示。 - 标题设置 ：设置页面标题为 "生日快乐祝福 - 编程狮教程"。
- 装饰元素 ：在
body中添加彩带、礼物、蜡烛、礼花等装饰元素，使用 CSS 进行定位和动画效果设置。 - 内容容器 ：创建一个内容容器，包含标题、生日蛋糕、卡片和按钮等元素。
CSS 部分
- 基础样式 ：设置页面背景颜色、字体、布局等基础样式。
- 背景渐变 ：为页面添加渐变背景效果，增加视觉吸引力。
- 装饰元素样式 ：分别为彩带、礼物、蜡烛、礼花等装饰元素设置样式和动画效果。
- 内容样式 ：为标题、卡片、祝福语、签名和按钮设置样式，确保内容美观且易于阅读。
- 动画效果 ：定义多种动画效果，如彩带飘动、礼物弹跳、蜡烛火焰闪烁、礼花爆炸、卡片弹出等。
JavaScript 部分
- 祝福语数组 ：定义一个包含多个祝福语的数组。
- 获取元素 ：使用
document.querySelector获取祝福语元素。 - 切换祝福语函数 ：定义一个函数，随机选择祝福语数组中的一个元素并更新祝福语内容。
- 页面加载事件 ：在页面加载完成后，设置定时器每隔 3 秒自动切换祝福语，并初始化显示一个祝福语。
- 调试信息 ：在控制台输出调试信息，帮助开发者了解页面加载状态。
八、推荐编程狮相关课程
如果你想学习更多关于 HTML、CSS 和 JavaScript 的知识，编程狮平台上有很多适合初学者的课程：
- HTML 基础入门：学习 HTML 的基本结构和常用标签。
- CSS 入门课程：掌握 CSS 的选择器、样式属性和页面布局技术。
- JavaScript 入门课程：了解如何使用 JavaScript 添加页面交互效果。
九、总结与拓展
通过以上详细的代码和注释，你可以轻松理解和修改这个生日祝福网页。希望这个教程能帮助你为亲朋好友制作一份特别的生日祝福。如果你有任何问题或需要进一步的帮助，欢迎访问编程狮平台，探索更多相关教程和资源。
相关文章：
生日快乐祝福网页制作教程
原文：https://www.w3cschool.cn/article/88229685.html （本文非我原创，请标记为付费文章，也请勿将我标记为原创） 一、引言 生日是每个人一年中最特别的日子之一。在这个特别的日子里，我们都希望能够给亲…...
Spring MVC @RequestHeader 注解怎么用？
我们来详细解释一下 Spring MVC 中的 RequestHeader 注解。 RequestHeader 注解的作用 RequestHeader 注解用于将 HTTP 请求中的**请求头（Request Headers）**的值绑定到 Controller 方法的参数上。 请求头是 HTTP 请求的一部分，包含了关于…...
【Linux深入浅出】之全连接队列及抓包介绍
【Linux深入浅出】之全连接队列及抓包介绍 理解listen系统调用函数的第二个参数简单实验实验目的实验设备实验代码实验现象 全连接队列简单理解什么是全连接队列全连接队列的大小 从Linux内核的角度理解虚拟文件、sock、网络三方的关系回顾虚拟文件部分的知识struct socket结构…...
Linux C++ JNI封装、打包成jar包供Java调用详细介绍
在前面 Android专栏 中详细介绍了如何在Android Studio中调用通过jni封装的c库。 在Android使用 opencv c代码，需要准备opencv4android，也就是c的任何代码，是使用Android NDK编译的，相当于在windows/mac上使用Android stdido交叉…...
CPO-BP+NSGA，豪冠猪优化BP神经网络+多目标遗传算法！（Matlab完整源码和数据）
目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.CPO-BPNSGA，豪冠猪优化BP神经网络多目标遗传算法！（Matlab完整源码和数据），豪冠猪算法优化BP神经网络的权值和阈值，运行环境Matlab2020b及以上…...
组件通信-v-model
概述：实现 父↔子 之间相互通信。 前序知识 —— v-model的本质 <!-- 使用v-model指令 --> <input type"text" v-model"userName"><!-- v-model的本质是下面这行代码 --> <input type"text" :value"use…...
使用PyMongo连接MongoDB的基本操作
MongoDB是由C语言编写的非关系型数据库，是一个基于分布式文件存储的开源数据库系统，其内容存储形式类似JSON对象，它的字段值可以包含其他文档、数组及文档数组。在这一节中，我们就来回顾Python 3下MongoDB的存储操作。 常用命令:…...
010302-oss_反向代理_负载均衡-web扩展2-基础入门-网络安全
文章目录 1 OSS1.1 什么是 OSS 存储？1.2 OSS 核心功能1.3 OSS 的优势1.4 典型使用场景1.5 如何接入 OSS？1.6 注意事项1.7 cloudreve实战演示1.7.1 配置cloudreve连接阿里云oss1.7.2 常见错误1.7.3 安全测试影响 2 反向代理2.1 正向代理和反向代理2.2 演示…...
PyQt 或 PySide6 进行 GUI 开发文档与教程
一、官网文档 Qt 官方文档：Porting to Qt 6 | Qt 6.9Qt 维基：Qt WikiQt for Python (PySide6) ：Qt for Python - Qt WikiPySide6 快速上手指南：Getting Started - Qt for Python PyS…...
【东枫科技】AMD / Xilinx Alveo™ V80计算加速器卡
AMD / Xilinx Alveo™ V80计算加速器卡 AMD/Xilinx Alveo ™ V80计算加速器卡是一款功能强大的计算加速器，基于7nm Versal™ 自适应SoC架构而打造。 AMD/Xilinx Alveo V80卡设计用于内存密集型任务。 这些任务包括HPC、数据分析、网络安全、传感器处理、计算存储和…...
C++ 动态内存管理
operator new和operator delete函数是两个全局函数，编译器在编译new和delete时会调用这两个函数，其底层分别是封装malloc和free 1.new new 内置类型 内置类型没有构造函数，所以使用new就是调operator new函数开空间，如果要初始化…...
（11）Vue-Router路由的详细使用
本系列教程目录：Vue3Element Plus全套学习笔记-目录大纲 文章目录 第2章 路由 Vue-Router2.1 Vue路由快速入门2.1.1 创建项目2.1.2 路由运行流程 2.2 传递参数-useRoute2.2.1 路径参数-params1）普通传参2）传递多个参数3）对象方式传…...
RISCV的smstateen-ssstateen扩展
RISC-V 的 Smstateen / Ssstateen 扩展是为了解决安全性和资源隔离性问题而设计的，尤其是针对在多个上下文（如用户线程、多个虚拟机）之间 潜在的隐蔽信道(covert channel) 风险。 🌐 背景：隐蔽信道与上下文切换问题 当…...
C++ 与 Lua 联合编程
在软件开发的广阔天地里，不同编程语言各有所长。C 以其卓越的性能、强大的功能和对硬件的直接操控能力，在系统开发、游戏引擎、服务器等底层领域占据重要地位，但c编写的程序需要编译，这往往是一个耗时操作，特别对于大型…...
瑞萨 EZ-CUBE2 调试器
瑞萨 EZ-CUBE2 调试器 本文介绍了瑞萨 EZ-CUBE2 调试器的基本信息、调试方式、环境搭建、硬件连接、软件测试等。 包装展示 调试器展示 开关选项 详见：EZ-CUBE2 | Renesas 瑞萨电子 . 环境搭建 使用 Renesas 公司的 e2 studio 开发工具，下载 并安装该…...
MATLAB滤波工具箱演示——自定义维度、滤波方法的例程演示与绘图、数据输出
使用 M A T L A B MATLAB MATLAB的界面做了一个 M A T L A B MATLAB MATLAB滤波工具箱 d e m o demo demo，本文章给出演示：自定义维度、滤波方法的例程演示与绘图、数据输出 文章目录 编辑界面使用方法优势待改进点部分代码 编辑界面 使用 M A T L A B …...
数据库索引优化实战: 如何设计高效的数据库索引
数据库索引优化实战: 如何设计高效的数据库索引 一、理解数据库索引的核心原理 1.1 B树索引的结构特性 数据库索引（Database Index）的本质是通过特定数据结构加速数据检索。现代关系型数据库普遍采用B树（B Tree）作为默认索引结构&…...
TS 安装
TS较JS优势 1 TS静态类型编程语言。编译时发现错误 2 类型系统 强化变量类型概念 3 支持新语法 4 类型推断机制 可以和React框架中的各种hook配合 5 任何地方都有代码提示 tsc 命令 将TS转为JS 1 tsc 文件.ts 生成 js文件 2 执行JS代码...
CMake separate_arguments用法详解
separate_arguments 是 CMake 中用于将字符串分割成参数列表的命令，适用于处理包含空格的参数或复杂命令行参数。以下是其用法详解： 基本语法 separate_arguments(<variable> [UNIX|WINDOWS_COMMAND] [PROGRAM <program>] [ARGS <args&…...
【AI科技】AMD ROCm 6.4 新功能：突破性推理、即插即用容器和模块化部署，可在 AMD Instinct GPU 上实现可扩展 AI
AMD ROCm 6.4 新功能：突破性推理、即插即用容器和模块化部署，可在 AMD Instinct GPU 上实现可扩展 AI 现代 AI 工作负载的规模和复杂性不断增长，而人们对性能和部署便捷性的期望也日益提升。对于在 AMD Instinct™ GPU 上构建 AI 和 HPC 未来…...
2025年- H20-Lc128-240. 搜索二维矩阵 II（矩阵）---java版
1.题目描述 2.思路 遍历矩阵，然后如果遇到矩阵中的值正好等于target，输出true。否则，输出false。 3.代码 public class H240 {public boolean searchMatrix(int[][] matrix, int target) {//1.计算出总的行值，总的列值。int mm…...
LearningFlow：大语言模型城市驾驶的自动化策略学习工作流程
《LearningFlow: Automated Policy Learning Workflow for Urban Driving with Large Language Models》2025年1月发表，来自香港科技大学广州分校的论文。 强化学习（RL）的最新进展表明了自动驾驶的巨大潜力。尽管有这一前景，但奖励…...
C语言数据类型与内存布局
C语言数据类型内存占用 类型32位系统64位系统格式说明符char1字节1字节%cint4字节4字节%dfloat4字节4字节%fdouble8字节8字节%lflong long8字节8字节%lld...
从原理到实战讲解回归算法！！!
哈喽，大家好，我是我不是小upper, 今天系统梳理了线性回归的核心知识，从模型的基本原理、参数估计方法，到模型评估指标与实际应用场景，帮助大家深入理解这一经典的机器学习算法，助力数据分析与预测工作。 …...
linux指令中的竖线（“|”）是干啥的？【含实例展示】
文章目录 一、管道符的基本概念二、管道符的核心作用三、常用实例展示四、进阶技巧五、注意事项总结 实操展示**案例1：统计日志中特定错误的数量****案例2：查找当前运行的进程****案例3：合并排序并去重****案例4：实时监控CPU占用前…...
[HOT 100] 0124. 二叉树中的最大路径和
文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 124. 二叉树中的最大路径和 - 力扣（LeetCode） 2. 题目描述 二叉树中的 路径 被定义为一条节点序列，序列中每对相邻节点之间都存在一条边。同一…...
[SoC]AXI总线Performance验证方案
AXI总线Performance验证方案 测试 AXI (Advanced eXtensible Interface) 的性能是 SoC 验证中的重要任务，旨在评估其在不同负载和配置下的表现是否满足设计要求。以下详细说明如何测试 AXI 的性能、需要统计的变量、计算方法、在验证环境中动态计算性能的方法，以及如何…...
EMC PowerStore存储学习之一NVMe磁盘的命名规则
PowerStore的日志中经常会看到类似于/dev/nvme1n1的磁盘，在svc_diag list --show_drives中也可以看到类似这样的输出，如下图： 这里的Drives的显示都是 /dev/nvmeXnY的形式，那么这个磁盘命名规则怎么解读呢？ 在Linux系…...
apt-mirror搭建ubuntu本地离线源
参考资料 4 Steps to Setup Local Repository in Ubuntu using APT-mirror 使用 APT-mirror 四步配置 Ubuntu 本地软件仓库 ubuntu下的apt-get内网本地源的搭建...
【记录】新Ubuntu20配置voxelmap的环境安装
因为系统总出问题，仅用于个人纪录。 1. 升级CMake到3.28及以上版本（Sophus依赖） wget https://github.com/Kitware/CMake/releases/download/v3.28.3/cmake-3.28.3-linux-x86_64.sh chmod x cmake-3.28.3-linux-x86_64.sh sudo ./cmake-3.2…...
Python全流程开发实战：基于IMAP协议安全下载个人Gmail邮箱内所有PDF附件
在日常办公场景中，面对成百上千封携带PDF附件的邮件，手动逐一下载往往耗时耗力，成为效率瓶颈。如何通过代码实现“一键批量下载”？本文将以**“Gmail全量PDF附件下载工具”**开发为例，完整拆解从需求分析到落地交付的P…...
CPU：AMD的线程撕裂者（Threadripper）和霄龙（EPYC）的区别
AMD的**线程撕裂者（Threadripper）和霄龙（EPYC）**虽然都是面向高性能市场的处理器，但它们在定位、功能和技术规格上有显著区别。以下是两者的主要差异： 1. 目标市场 线程撕裂者（Threadripper&…...
【五一培训】Day 2
注： 1. 本次培训内容的记录将以“Topic”的方式来呈现，用于记录个人对知识点的理解。 2. 由于培训期间，作者受限于一些现实条件，本文的排版及图片等相关优化，需要过一段时间才能完成。 3. 关于老板点评的一些思考 你…...
shell_plus
python manage.py shell_plus 是由 django-extensions 提供的一个增强版的 Django shell，它自动导入你的所有模型和其他一些便捷功能，使得交互式开发更加方便。 如果你遇到配置或运行问题，特别是与 RQ_SHOW_ADMIN_LINK 相关的 ImproperlyCon…...
基于C++、JsonCpp、Muduo库实现的分布式RPC通信框架
⭐️个人主页：小羊 ⭐️所属专栏：RPC框架 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 项目介绍JsonCpp库简单介绍Muduo库简单介绍C11异步操作——std::future1. 使用 std::async 关联异步任务2. std::packaged_task…...
Redis TLS 加密对性能的影响分析
Redis TLS 加密对性能的影响分析 是的，Redis 启用 TLS 加密确实会对性能产生一定影响，但影响程度取决于多种因素。以下是详细分析： 一、性能影响的主要来源 加密/解密开销： TLS 握手过程中的非对称加密（如 RSA、…...
树与二叉树完全解析：从基础到应用
目录 一、树形结构的基础认知 1.1 树的定义与特点 1.2 核心术语解析 二、二叉树的深度解析 2.1 二叉树定义 2.2 特殊二叉树类型 2.3 重要性质总结 三、二叉树的存储与遍历 3.1 存储方式对比 3.2 遍历算法精讲 四、经典题型训练 4.1 相同树判断（LeetCode…...
PostgreSQL：pgJDBC 下载和安装
PostgreSQL 的 pgJDBC 是用于 Java 程序连接和操作 PostgreSQL 数据库的 JDBC 驱动程序。 PostgreSQL：pgJDBC v42.7 下载和安装 点击【Application Stack Builder】 安装目录： 运行 cmd cd D:\PostgreSQL\pgJDBC copy postgresql-42.7.2.jar D:\groovy-…...
正则表达式与文本三剑客grep、sed、awk
目录 一、正则表达式 1.1、字符匹配 1.2、次数匹配 1.3、位置锚定 1.4、分组或其他 二、扩展正则表达式 三、grep 四、awk 4.1、常用命令选项 4.2、工作原理 4.3、基础用法 4.4、内置变量 4.5、模式 4.6、条件判断 4.7、awk中的循环语句 4.8、数组 4.9、脚本 …...
（35）VTK C++开发示例 ---将图片映射到平面2
文章目录 1. 概述2. CMake链接VTK3. main.cpp文件4. 演示效果 更多精彩内容👉内容导航 👈👉VTK开发 👈 1. 概述 与上一个示例不同的是，使用vtkImageReader2Factory根据文件扩展名或内容自动创建对应的图像文件读取器&a…...
每日一题洛谷P8635 [蓝桥杯 2016 省 AB] 四平方和c++
P8635 [蓝桥杯 2016 省 AB] 四平方和 - 洛谷 (luogu.com.cn) 直接暴力枚举，不做任何优化的话最后会TLE一个，稍微优化一下就过了（数据给的还是太良心了） 优化：每层循环用if判断一下，如果大于n就直接跳 当然…...
【python】【UV】一篇文章学完新一代 Python 环境与包管理器使用指南
🐍 UV：新一代 Python 环境与包管理器使用指南 一、UV 是什么？ UV 是由 Astral 团队开发的高性能 Python 环境管理器，旨在统一替代 pyenv、pip、venv、pip-tools、pipenv 等工具。 1.1 UV 的主要功能 🚀 极速包安装&…...
6.10.单源最短路径问题-Dijkstra算法
一.BFS算法的局限性： 如上图，BFS算法可以解决无权图的单源最短路径问题， 如果是解决带权图的单源最短路径问题，BFS算法就不适用了，如下图： 如上图，比如求G港到其他顶点的最短路径， …...
Python基于深度学习的网络舆情分析系统（附源码，部署）
大家好，我是Python徐师兄，一个有着7年大厂经验的程序员，也是一名热衷于分享干货的技术爱好者。平时我在 CSDN、掘金、华为云、阿里云和 InfoQ 等平台分享我的心得体会。 🍅文末获取源码联系🍅 2025年最全的计算机软件毕…...
mysql--索引
索引作为一种数据结构，其用途是用于提升检索数据的效率。 分类 普通索引（INDEX）：索引列值可重复 唯一索引（UNIQUE）：索引列值必须唯一，可以为NULL 主键索引（PRIMARY KEY&a…...
【算法题】荷兰国旗问题[力扣75题颜色分类] - JAVA
一、题目 二、文字解释 1.1 前言 本题是经典的「荷兰国旗问题」，由计算机科学家 Edsger W. Dijkstra 首先提出。如同图中所示的荷兰国旗，其由红、白、蓝三色水平排列组成。在算法领域，该问题可类比为将一个由特定的三种元素（可…...
【数据结构】堆的完整实现
堆的完整实现 堆的完整实现GitHub地址前言堆的核心功能实现重温堆的定义堆结构定义1. 堆初始化与销毁2. 元素交换函数3. 堆化操作向上调整（子→父）向下调整（父→子） 4. 堆元素插入5. 堆元素删除6. 辅助功能函数堆的判空获取堆顶元…...
软考 系统架构设计师系列知识点之杂项集萃（51）
接前一篇文章：软考 系统架构设计师系列知识点之杂项集萃（50） 第80题 设三个煤场A1、A2、A3分别能供应煤7、12、11万吨，三个工厂B1、B2、B3分别需要10、10、10万吨，从各煤场到各工厂运煤的单价（百元/吨&…...
patch命令在代码管理中的应用
patch 是一个用于将差异文件（补丁）应用到源代码的工具，常用于修复 bug、添加功能或调整代码结构。在您提供的代码中，patch 命令通过一系列补丁文件（.patch）修改了 open-amp 库的源代码。 patch 命令的核心作…...
Qt结构体运算符重载指南
在 Qt 中，结构体（struct）或类（class）中重载运算符是一种常见的做法，用于实现自定义类型的逻辑操作（如比较、算术运算等）。以下是一些常见的运算符重载示例和注意事项： 1.…...