web
1 干啥的
Web，全称World Wide Web（万维网），可以想象成一个巨大的图书馆，只不过这个图书馆不在实体空间里，而是在互联网上。在这个虚拟的图书馆里，你可以找到各种各样的信息，从文章、图片、视频到音乐、游戏和应用程序，几乎无所不包。
1.1 核心组成
Web服务器：存储和提供Web文档（如HTML、图像、视频等）的计算机系统。
Web客户端（通常指的是Web浏览器）：用户用于查看和与Web文档交互的软件，如Google Chrome、Mozilla Firefox、Safari和Microsoft Edge等。
Web文档：使用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript等技术编写的文档，可以包含文本、图像、音频、视频和动态内容。
超链接：允许从一个文档跳转到另一个文档或资源的链接，可以是文本、图片或其他元素。
HTTP协议：超文本传输协议，用于在Web浏览器和Web服务器之间传输数据。
URL：统一资源定位符，用于标识Web上的资源位置。
1.2用途
信息检索：用户可以通过搜索引擎或直接输入URL来查找和阅读信息。
在线教育：提供在线课程、教程和学习资源。
电子商务：在线购物、支付、广告和市场营销。
社交媒体：如Facebook、Twitter和Instagram，用于社交互动、分享和交流。
娱乐：在线电影、音乐、游戏和新闻。
企业应用：企业内部的管理信息系统（MIS）、客户关系管理（CRM）和供应链管理（SCM）。
个人博客和网站：个人表达和分享兴趣、爱好和专业知识的平台。
在线服务：如电子邮件、云存储、在线办公工具等。
2 html
2.1 干啥的
HTML，全称为HyperText Markup Language（超文本标记语言），是构成网页的主要语言之一。想象一下，HTML就像是构建网页的蓝图或脚本，它告诉浏览器如何显示文本、图片、视频等元素，以及如何布局这些元素。
2.2 资源
语法： w3schools
ps:这个网站虽然是英文，但是语法都很简单，文字简洁易懂，且UI观感舒适啊！！！（个别单词不会的就直接查，no怕怕）
3 css
3.1 干啥的
CSS，全称Cascading Style Sheets（层叠样式表），是一种用于描述网页内容外观和样式的语言。简单来说，CSS就像是网页的“化妆师”，负责美化HTML文档，使网页看起来更吸引人，布局更合理。
3.2 资源
语法： w3schools
小技术点
💡打字动画——typed.js
干啥的
Typed.js 是一个轻量级的JavaScript库，它可以帮助你在网页上实现自动打字效果，就像模拟打字机一样逐个字符显示文本。这个库非常适用于创建动态的标题或者简短的文本动画，常被用在个人简历页面、作品集网站或者其他需要引人注目的文字展示场景。
使用步骤
step1：.html文件中引入Typed.js库(通常通过在<head>标签中加入CDN链接来完成)：
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
step2：.html文件中添加需要使用打字动画效果的文本：
<!--打字动画效果的欢迎文字-->
<p class="p1" id="typed-text"> </p>
step3：.css文件定义自己喜欢的样式并引入到.html文件。
<!--.html<head>中引入.css文件-->
<link rel="stylesheet" type="text/css" href="xxxxxx.css">
step4：.js文件中初始化Typed.js：
//打字动画效果
var typed = new Typed('#typed-text', {
strings: ['hi~欢迎来到yddblog'],
typeSpeed: 100, // 字符出现速度（毫秒）
backSpeed: 80, // 字符消失速度（毫秒）
loop: true, // 是否循环显示字符串列表
showCursor: false, // 是否显示光标
cursorChar: '|' // 光标字符
});
step5：.html文件中引入刚编写的js文件：
<script src="xxxxxxx.js"></script>
资源
Typed.js的GitHub存储库：https://github.com/mattboldt/typed.js?spm=5176.28103460.0.0.32c03da2M0hA3G&file=typed.js
ps：登陆不上github的可以试试使用微软商店的WattToolkit:
💡下拉/收回二级菜单
效果
实现步骤
step1：.html文件<head>中引入JQuery库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
step2：.html文件中添加需要二级菜单结构：
<li class="use">
<a href="#use">
干啥的
<svg xmlns="http://www.w3.org/2000/svg" width="1.5vw" viewBox="0 0 320 512">
<path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
</svg>
</a>
<ul class="ul-nav2 ul-nav2-use">
<li><a href="#use-contain">核心组成</a></li>
<li><a href="#use-example">用途</a></li>
</ul>
</li>
step3：.css文件定义自己喜欢的样式并引入到.html文件。
<!--.html<head>中引入.css文件-->
<link rel="stylesheet" type="text/css" href="xxxxxx.css">
step4：.js文件中添加逻辑：
$(document).ready(function() {
$('.use').each(function() {
var $link = $(this);
var $svg = $link.find('svg');
var $subMenu = $link.find('.ul-nav2-use');
// 处理SVG的点击事件
$svg.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggleSubMenu($subMenu);
});
// 处理链接本身的点击事件（除了SVG）
$link.on('click', function(e) {
if (!$(e.target).is($svg) && !$(e.target).closest('.ul-nav2-use').length) {
toggleSubMenu($subMenu);
}
});
// 处理子菜单内的点击事件，允许链接跳转，但不关闭子菜单
$subMenu.on('click', 'a', function(e) {
e.stopPropagation(); // 阻止事件冒泡到父元素
// 不调用 preventDefault() 允许链接跳转
// 在这里可以添加处理子菜单项点击的逻辑
console.log($(this).text() + " was clicked.");
});
});
function toggleSubMenu(subMenu) {
if (subMenu.is(':visible')) {
subMenu.slideUp('fast');
} else {
subMenu.slideDown('fast');
}
}
});
step5：.html文件中引入刚编写的.js文件：
<script src="xxxxxxx.js"></script>
💡音乐波形可视化1——wavesurfer.js
干啥的
Wavesurfer.js是一个开源的JavaScript库，它允许你在网页上创建互动式的音频波形可视化。这个库使用Web Audio API和 HTML5 Canvas技术来实时渲染音频文件的波形图像，同时提供了音频播放、暂停、跳转等功能。
使用步骤
step1：.html文件引入wavesurfer.js库：
<script src="https://unpkg.com/wavesurfer.js"></script>
step2：.html添加元素结构：
<div id="waveform"></div>
<button id="play-pause-btn">Play</button>
<audio id="audio-elem" src="path/to/audio/file.mp3"></audio>
step3：.js文件添加逻辑：
// 创建 wavesurfer 实例
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
responsive: true,
fillParent: true
});
// 加载音频文件
wavesurfer.load('../../resources/music/trytrytry.mp3');
// 获取播放/暂停按钮
var playPauseBtn = document.getElementById('play-pause-btn');
// 添加点击事件监听器
playPauseBtn.addEventListener('click', function() {
if (wavesurfer.isPlaying()) {
// 如果正在播放，则暂停
wavesurfer.pause();
this.textContent = 'Play'; // 更新按钮文本
} else {
// 否则，开始播放
wavesurfer.play();
this.textContent = 'Pause'; // 更新按钮文本
}
});
// 监听 ready 事件，确保在音频加载完成后再操作播放/暂停
wavesurfer.on('ready', function() {
// 音频加载完成后，你还可以设置其他初始化行为，如设置按钮初始状态等
});
step4：.html文件引入刚编写好的.js文件：
<script src="xxxxxxx.js"></script>
step5：.css添加自己喜欢的样式并引入到.html文件。
<!--.html<head>中引入.css文件-->
<link rel="stylesheet" type="text/css" href="xxxxxx.css">
💡音乐波形可视化2——canvas画布
效果：
使用步骤
step1：.html文件代码：
<button class="play-button" id="play-pause-btn">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id=playing d="M12.5 8.89001V18.5M12.5 8.89001V5.57656C12.5 5.36922 12.5 5.26554 12.5347 5.17733C12.5653 5.09943 12.615 5.03047 12.6792 4.97678C12.752 4.91597 12.8503 4.88318 13.047 4.81761L17.447 3.35095C17.8025 3.23245 17.9803 3.17319 18.1218 3.20872C18.2456 3.23982 18.3529 3.31713 18.4216 3.42479C18.5 3.54779 18.5 3.73516 18.5 4.10989V7.42335C18.5 7.63069 18.5 7.73436 18.4653 7.82258C18.4347 7.90048 18.385 7.96943 18.3208 8.02313C18.248 8.08394 18.1497 8.11672 17.953 8.18229L13.553 9.64896C13.1975 9.76746 13.0197 9.82671 12.8782 9.79119C12.7544 9.76009 12.6471 9.68278 12.5784 9.57512C12.5 9.45212 12.5 9.26475 12.5 8.89001ZM12.5 18.5C12.5 19.8807 10.933 21 9 21C7.067 21 5.5 19.8807 5.5 18.5C5.5 17.1192 7.067 16 9 16C10.933 16 12.5 17.1192 12.5 18.5Z" stroke="#5c4d4c" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path id=pausing display="none" d="M12.5 6.8935V5.57661C12.5 5.36926 12.5 5.26559 12.5347 5.17738C12.5653 5.09948 12.615 5.03052 12.6792 4.97682C12.752 4.91601 12.8503 4.88323 13.047 4.81766L17.447 3.35099C17.8025 3.23249 17.9803 3.17324 18.1218 3.20877C18.2456 3.23987 18.3529 3.31718 18.4216 3.42484C18.5 3.54783 18.5 3.7352 18.5 4.10994V7.42339C18.5 7.63074 18.5 7.73441 18.4653 7.82262C18.4347 7.90052 18.385 7.96948 18.3208 8.02318C18.248 8.08399 18.1497 8.11677 17.953 8.18234L14.8192 9.22692M12.5 12.5V18.5M12.5 18.5C12.5 19.8807 10.933 21 9 21C7.067 21 5.5 19.8807 5.5 18.5C5.5 17.1193 7.067 16 9 16C10.933 16 12.5 17.1193 12.5 18.5ZM3 3L21 21" stroke="#5c4d4c" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/> /* 暂停图标 */
</svg>
</button>
<audio id="audio-element" src="../resources/music/trytrytry.mp3"></audio>
<!--充当背景的音乐波形画布-->
<canvas id="waveform-canvas"></canvas>
step2：.css文件代码：
.play-button{
width:5vw;
height:5vw;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background-color:#b6eddb;
border:none;
cursor: pointer;
}
step3：.js文件代码：
//音乐波形可视化
const canvas = document.getElementById('waveform-canvas');
const context = canvas.getContext('2d');
const audioElement = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
let audioCtx;
let sourceNode;
let analyserNode;
let dataArray;
let playing = false;
function initAudio() {
try {
audioCtx = new AudioContext();
sourceNode = audioCtx.createMediaElementSource(audioElement);
analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 2048;
dataArray = new Uint8Array(analyserNode.frequencyBinCount);
sourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);
// 开始绘制波形图
drawWaveform();
} catch (e) {
console.error('Error initializing audio:', e);
}
}
function drawWaveform() {
if (playing) {
analyserNode.getByteTimeDomainData(dataArray);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, canvas.height / 2);
let sliceWidth = canvas.width * 1.0 / dataArray.length;
let x = 0;
for (let i = 0; i < dataArray.length; i++) {
let v = dataArray[i] / 128.0;
let y = v * canvas.height / 2;
context.lineTo(x, canvas.height / 2 + y);
x += sliceWidth;
}
context.stroke();
}
requestAnimationFrame(drawWaveform);
}
playPauseBtn.addEventListener('click', () => {
if (playing) {
audioElement.pause();
document.getElementById('playing').style.display = 'block';
document.getElementById('pausing').style.display = 'none';
} else {
audioElement.play();
document.getElementById('playing').style.display = 'none';
document.getElementById('pausing').style.display = 'block';
}
playing = !playing;
});
audioElement.addEventListener('ended', () => {
document.getElementById('playing').style.display = 'block';
document.getElementById('pausing').style.display = 'none';
playing = false;
});
initAudio();
step4：.html文件中引入刚编写好的.css和.js文件。
资源整合
语法/技术
样式/美化
颜色：color-hex
svg图标：SVG
图标：fontawesome
