HTML跨年烟花

图片

目录

写在前面

关于小编

HTML简介

程序设计

系列文章

写在后面

写在前面

学会了这个html烟花秀，跨年就不缺文案喽~

关于小编

平易近人，慈眉善目，爱交朋友，舍己为人，和蔼可亲，能说会道，善解人意，乐于助人，开朗豁达……哈哈哈没错，这些都是小编的优点！总结一下下就是：小编炒鸡滴有趣~

⭐CSDN年度社区之星

⭐CSDN年度博客之星

⭐CSDNPython领域优质创作者

⭐阿里云乘风者计划专家博主

⭐51CTO特邀博主

⭐极星会KOL

⭐口袋方舟游戏创作者

……（此处省略99+条头衔）

HTML简介

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它描述了网页的结构，并使用标签来定义各种元素的样式和功能。HTML可以被浏览器解析和显示，使用户能够访问和浏览网页内容。

HTML最初由CERN（欧洲核子研究组织）的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年开发。它是互联网的基石之一，也是构建世界广泛分布的网页的基本技术。

HTML是一个标记语言，它使用标签来构建网页的结构。标签是由尖括号包围的关键词，如<html>、<head>和<body>。这些标签描述了网页的不同部分，例如标题、段落、图像、链接等。

HTML标签还可以包含属性，用于进一步定义标签的行为和样式。属性是标签的附加信息，以键值对的形式出现，如<a href="https://www.example.com">。属性可以用于指定链接的目标、图像的源文件、文本的颜色等。

除了结构和样式，HTML还支持网页的交互功能。通过使用表单元素，用户可以在网页上输入数据并将其提交到服务器进行处理。表单可以包含输入字段、复选框、单选按钮和提交按钮等元素。

HTML的版本有多个。最早的版本是HTML 1.0，随后发展到HTML 2.0、HTML 3.2和HTML 4.01。然而，这些版本的HTML存在一些限制和问题，因此W3C（万维网联盟）于1999年发布了HTML 4.01的继任者 - XHTML（eXtensible HyperText Markup Language）。

XHTML将HTML与XML（eXtensible Markup Language）结合起来，使网页更符合XML标准。然而，由于XHTML的语法较严格且不容易编写，它并没有成为主流的标记语言。

随着互联网的快速发展，HTML 5于2014年成为W3C的正式标准。HTML 5引入了许多新的功能和元素，如音频和视频播放、绘图和动画等。此外，它还提供了更好的语义化标记，使搜索引擎和屏幕阅读器能够更好地理解和解释网页的内容。

HTML不仅是构建网页的基础，还与CSS（层叠样式表）和JavaScript等技术一起使用，实现了网页的丰富功能和交互性。通过HTML，开发人员可以创建各种各样的网页，并为用户提供丰富的在线体验。

程序设计

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>跨年烟花秀</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="theme-color" content="#000000"><link rel="shortcut icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="apple-touch-icon-precomposed"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-TileImage"content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="./style.css"></head><body><div style="height: 0; width: 0; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></symbol><symbol id="icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></symbol><symbol id="icon-close" viewBox="0 0 24 24"><pathd="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></symbol><symbol id="icon-settings" viewBox="0 0 24 24"><pathd="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" /></symbol><symbol id="icon-sound-on" viewBox="0 0 24 24"><pathd="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" /></symbol><symbol id="icon-sound-off" viewBox="0 0 24 24"><pathd="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" /></symbol></svg></div><div class="container"><div class="loading-init"><div class="loading-init__header">Loading</div><div class="loading-init__status">Assembling Shells</div></div><div class="stage-container remove"><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">Settings</div><div class="menu__subheader">For more info, click any label.</div><form><div class="form-option form-option--select"><label class="shell-type-label">Shell Type</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">Shell Size</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">Quality</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">Sky Lighting</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">Scale</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">Auto Fire</label><input class="auto-launch" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">Finale Mode</label><input class="finale-mode" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">Hide Controls</label><input class="hide-controls" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">Fullscreen</label><input class="fullscreen" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">Open Shutter</label><input class="long-exposure" type="checkbox" /></div></form><div class="credits">Passionately built by <a href="https://cmiller.tech/" target="_blank">Caleb Miller</a>.</div></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">Close</button></div></div></div><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script><script src="./script.js"></script></body></html>

完整文件需要在公众回复 html003 领取哦~

注：整个文件夹都要下载下来哦

系列文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心HTML跳动的爱心-CSDN博客
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞HTML大雪纷飞-CSDN博客
14HTML跨年烟花https://want595.blog.csdn.net/article/details/139428881
15
16
17
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/23322.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux网络编程：回顾网络通信

Linux网络编程：回顾网络通信

1.数据从应用层到数据链路层的本质 数据的封装&#xff1a; 用户在用户级缓冲区输入数据&#xff0c;经过应用层协议进行序列化成字节流数据&#xff0c;拷贝到传输层的缓冲区。而操作系统在传输层维护了sk_buff这一个结构体&#xff0c;然后data指针指向这段数据的开头&#x…
阅读更多...
api网关kong对高频的慢接口进行熔断

api网关kong对高频的慢接口进行熔断

一、背景 在生产环境&#xff0c;后端服务的接口响应非常慢&#xff0c;是因为数据库未创建索引导致。 如果QPS低的时候&#xff0c;因为后端服务有6个高配置的节点&#xff0c;虽然接口慢&#xff0c;还未影响到服务的正常运行。 但是&#xff0c;当QPS很高的时候&#xff0c…
阅读更多...
vue3 递归循环展示下级盒子

vue3 递归循环展示下级盒子

index.vue主文件 <template><div><RecursiveCard :data"rootTask" /></div> </template><script> import { reactive } from vue; import RecursiveCard from ./test.vue; // 递归组件的路径export default {components: {Recu…
阅读更多...
广东智慧物流2024年端午节放假安排

广东智慧物流2024年端午节放假安排

广东智慧物流2024年端午节放假安排
阅读更多...
使用HTML、CSS和JavaScript编写一个注册界面（一）

使用HTML、CSS和JavaScript编写一个注册界面（一）

倘若文章或代码中有任何错误或疑惑&#xff0c;欢迎提出交流哦~ HTML和CSS 首先&#xff0c;我们需要编写一个简洁的注册界面。 简单编写下&#xff0c;如下&#xff1a; 呈现效果为&#xff1a; <!DOCTYPE html> <html lang"en"><head><me…
阅读更多...
从普通篮球场到高端气膜馆：全新运动体验的打造—轻空间

从普通篮球场到高端气膜馆：全新运动体验的打造—轻空间

在现代体育设施的发展中&#xff0c;气膜馆以其独特的优势和创新设计&#xff0c;正在改变我们对运动场所的传统认知。将一片普通的篮球场转变为高逼格的气膜馆&#xff0c;不仅可行&#xff0c;而且能提供极大的便利和众多的好处&#xff0c;让运动体验更上一层楼。 气膜馆的优…
阅读更多...
巨详细Linux卸载Redis教程

巨详细Linux卸载Redis教程

巨详细Linux卸载Redis教程 1、检查系统残留redis数据2、卸载系统残留redis数据 1、检查系统残留redis数据 redis等数据相关中间件安装前一定要进行残留数据检查&#xff0c;排除后期存在的各种隐患。 #检查有没有残留客户端 whereis redis-cli #检查有没有残留服务 whereis r…
阅读更多...
Git 版本控制系统详解

Git 版本控制系统详解

目录 Git 版本控制系统详解一、Git 的作用1. 版本控制2. 分支管理3. 分布式开发4. 协作开发 二、Git 的安装和基本使用1. 安装 Git1.1 Windows1.2 macOS1.3 Linux 2. 配置 Git3. 创建和克隆仓库3.1 创建本地仓库3.2 克隆远程仓库 4. 基本操作4.1 添加文件到暂存区4.2 提交更改4…
阅读更多...
开发项目功能开发设计模板

开发项目功能开发设计模板

功能开发设计是一个系统化的过程&#xff0c;旨在确保新功能的开发既满足用户需求又符合技术标准。以下是一个适用于大多数软件开发项目功能开发设计模板&#xff1a;
阅读更多...
94、python-第三阶段-4-数据计算-map方法

94、python-第三阶段-4-数据计算-map方法

直接运行会报错&#xff0c;需要配置下python环境变量 from pyspark import SparkConf,SparkContext import os os.environ[PYSPARK_PYTHON]"D:/Program Files/Python/Python3.13/python.exe" conf SparkConf().setMaster("local[*]").setAppName("…
阅读更多...
解析！领先的Web应用程序安全测试工具—Burp Suite

解析！领先的Web应用程序安全测试工具—Burp Suite

Burp Suite 是一款领先的Web应用程序安全测试工具。它被广泛用于识别和修复Web应用程序中的漏洞。 通过使用Burp Suite&#xff0c;组织可以显著提升其Web应用程序的安全性&#xff0c;及时发现并修复漏洞&#xff0c;保障业务的持续运行和数据安全。 Burp Suite 最新版下载h…
阅读更多...
go中的指针详解

go中的指针详解

因为大一的时候c语言没学好,所以看到指针很心烦 ,后来速成了一遍go ,每每写道指针部分就开始遗忘 ,所以专门对指针部分做了此笔记 概念 在 Go 语言中&#xff0c;指针是一种变量类型&#xff0c;它存储的是另一个变量的内存地址。通过指针&#xff0c;你可以访问和修改它指向…
阅读更多...
商业代理：利用代理服务器进行市场研究和竞争分析

商业代理：利用代理服务器进行市场研究和竞争分析

代理是一种转换设备网络流量并从技术上使用户隐形的工具。个人使用它们来隐藏他们的在线活动并绕过地理限制。企业使用它们来支持他们的市场和竞争对手研究等。 继续阅读以了解代理的特点以及它们为企业研究工作带来的优势。 代理的主要功能 代理服务器是设备和网站服务器之间…
阅读更多...
Transformer学习(4)

Transformer学习(4)

上篇文章完成了Transformer剩下组件的编写&#xff0c;因此本文就可以开始训练。 本文主要介绍训练时要做的一些事情&#xff0c;包括定义损失函数、学习率调整、优化器等。 下篇文章会探讨如何在多GPU上进行并行训练&#xff0c;加速训练过程。 数据集简介 从网上找到一份中…
阅读更多...
出图效率倍增！47个高质量的 Stable Diffusion 常用模型推荐

出图效率倍增！47个高质量的 Stable Diffusion 常用模型推荐

“选用适当的模型&#xff0c;随随便便出个图&#xff0c;都要比打上一堆提示词的效果要好。” 事实如此&#xff0c;高质量的模型&#xff0c;能够成倍提升出图质量。目前 CivitAI&#xff08;俗称 C 站&#xff0c; https://civitai.com/ &#xff09;是业内比较成熟的一个 …
阅读更多...
E10:流程主表表单字段值变化触发事件

E10:流程主表表单字段值变化触发事件

效果– //window.WeFormSDK.showMessage("这是一个E10的提示", 3, 2); const onClickCreate () > console.log("create"); const onClickSave () > console.log("save"); const onClickCancel () > dialogComponent?.destroy();/…
阅读更多...
如何学习提示词？

如何学习提示词？

随着人工智能技术的飞速发展&#xff0c;AI已经成为我们生活中不可或缺的一部分。从智能助手到专业领域的应用&#xff0c;AI正在以前所未有的速度和规模改变着我们的工作与生活。而在AI的众多应用中&#xff0c;提示词&#xff08;Prompt&#xff09;的作用日益凸显。提示词&a…
阅读更多...
【Python】 Python应用的最佳项目结构解析

【Python】 Python应用的最佳项目结构解析

基本原理 在Python开发中&#xff0c;一个清晰且结构化良好的项目布局对于项目的可维护性、可扩展性和团队协作至关重要。项目结构不仅影响代码的组织方式&#xff0c;还影响到开发流程和部署策略。一个优秀的项目结构应该能够方便地进行模块化开发&#xff0c;易于理解&#…
阅读更多...
47、Flink 的 Data Source 原理

47、Flink 的 Data Source 原理

1.Data Source 原理 a&#xff09;核心组件 一个数据 source 包括三个核心组件&#xff1a;分片&#xff08;Splits&#xff09;、分片枚举器&#xff08;SplitEnumerator&#xff09; 以及 源阅读器&#xff08;SourceReader&#xff09;。 分片&#xff08;Split&#xff…
阅读更多...
第二证券炒股知识：美股的交易规则有哪些？

第二证券炒股知识：美股的交易规则有哪些？

在经济全球化的浪潮中&#xff0c;美股以其开放的商场体系和完善的买卖规则吸引了不少出资者的关注。关于美股的买卖规则有哪些&#xff0c;第二证券下面就为大家详细介绍一下。 1、美股的买卖时刻&#xff1a;美股的买卖时刻依照美国东部时刻核算&#xff0c;分为夏令时和冬令…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023