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，一经查实，立即删除！

相关文章

24上半年报考人数“不增反降”？备考下半年软考的难了......

24上半年报考人数“不增反降”？备考下半年软考的难了......

近日&#xff0c;工信教考发布了一篇《2024年上半年计算机软件资格考试顺利举行》的文章&#xff0c;公布了2024年上半年软考报考人数共计52.77万人&#xff0c;其中&#xff0c;初级资格5.12万人、中级资格24.37万人、高级资格23.28万人。 软考高级占总报名人数的44%&#xf…
阅读更多...
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…
阅读更多...
基于STM32的毕业设计示例

基于STM32的毕业设计示例

**基于STM32的毕业设计示例** 一、引言 在当前的电子工程领域&#xff0c;STM32微控制器因其高性能、低功耗和丰富的外设接口而备受青睐。本次毕业设计旨在展示基于STM32微控制器的系统设计与实现能力&#xff0c;通过构建一个具有实际应用价值的系统&#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("…
阅读更多...
python安装Django

python安装Django

转国内源 添加链接描述 安装 pip install setuptools安装Django 添加链接描述 pip install django3.2 查看版本 python -m django --version 我的django安装路径&#xff1a;安装python的路径 C:\Program Files\Python38\Lib\site-packages\django\bin 配置django环境变量…
阅读更多...
邦芒支招：4招减轻工作压力让你工作更轻松

邦芒支招：4招减轻工作压力让你工作更轻松

​​“弱肉强食&#xff0c;适者生存”&#xff0c;这是现代社会唯一的生存法则。就拿公司而言&#xff0c;可能昨天还市值几百亿&#xff0c;今天就能宣告破产。而身在职场的你&#xff0c;也不得不时时刻刻绷着一根弦&#xff0c;不然就有可能被淘汰&#xff0c;每个职场人都…
阅读更多...
解析！领先的Web应用程序安全测试工具—Burp Suite

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

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

学习Python的基础知识

目录 摘要 Python 的主要特点 基本语法 1. 变量和数据类型&#xff1a; 2. 条件语句&#xff1a; 3. 循环&#xff1a; 4. 函数&#xff1a; 5. 类和对象&#xff1a; 6. 列表和字典&#xff1a; 7. 文件I/O&#xff1a; Python 的学习路线 如何高效使用 Python 的…
阅读更多...
Docker面试整理-如何优化Docker容器的性能？

Docker面试整理-如何优化Docker容器的性能？

优化Docker容器的性能可以从多个方面入手，以下是一些建议： 选择合适的基础镜像：使用轻量级的基础镜像，如基于Alpine Linux的镜像，可以减少镜像的大小和启动时间。避免使用过于庞大的操作系统镜像。优化Dockerfile：减少Dockerfile中的不必要指令和层，以最小化镜像的大小。…
阅读更多...
go中的指针详解

go中的指针详解

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

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

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

CentOS 7.8上安装ClamAV

在CentOS 7.8上安装ClamAV涉及几个步骤&#xff0c;包括安装ClamAV本身以及其命令行扫描工具和守护进程。以下是详细的安装指南&#xff1a; 1. 添加EPEL仓库 首先&#xff0c;确保已经安装了Extra Packages for Enterprise Linux (EPEL)仓库&#xff0c;因为ClamAV包在CentO…
阅读更多...
最新文章

Copyright @ 2022~2023