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

HTML5学习系列之项目实战1

HTML5学习系列之项目实战1

  • 前言
  • 代码
  • 记录问题
  • 总结


前言

学习记录


代码

<div id="player"><audio id="musicbox"></audio><div id="controls" class="clearfix controls"><div id="play" class="playing"></div><div id="next"></div><div id="progress"><div></div><p id="time">00:00/00:00</p></div><div id="volume"><div></div></div></div><div class="bar"><button>重置列表</button><button>随机打乱</button><button>清空列表</button></div><ul id="musiclist"></ul><div class="bar buttom"><span>播放模式:</span><span id="mode">全部</span></div>
</div>

在这里插入图片描述

记录问题

  • 对于<div>必须搭配</div>,不能投简单去改成<div xxxx />,否则会出问题。
  • 在本阶段涉及到css与JavaScript,很多还不太懂,后续应下载对应的编译器进行编译。

总结

学习记录。
后续学习到css与JavaScript再继续扩充吧!

相关文章:

HTML5学习系列之项目实战1

HTML5学习系列之项目实战1 前言代码记录问题总结 前言 学习记录 代码 <div id"player"><audio id"musicbox"></audio><div id"controls" class"clearfix controls"><div id"play" class"…...

git 提交成了LFS格式,如何恢复

平常习惯使用sourceTree提交代码&#xff0c;某次打开时弹出了一个【是否要使用LFS提交】的确认弹窗&#xff0c;当时不知道LFS是什么就点了确认&#xff0c;后续提交时代码全变成了这个样子 因为是初始化的项目首次提交&#xff0c;将近四百个文件全被格式化成了这个样子&…...

【ISP图像处理】Demosaic去马赛克概念介绍以及相关方法整理

1. 基本定义 使用彩色滤光器阵列(CFA)的数码相机需要一个去马赛克程序来形成完整的RGB图像。一般的相机传感器都是采用彩色滤光片阵列(CFA)放置在光感测单元上&#xff0c;在每个像素处仅捕获三种原色成分中的一种。 去马赛克方法主要关注于复原非常规区域&#xff0c;比如边缘…...

单图像3D重建AI算法综述【2023】

计算机视觉是人工智能的一个快速发展的领域&#xff0c;特别是在 3D 领域。 本概述将考虑一个应用任务&#xff1a;2D 和 3D 环境之间的转换。 在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编…...

three.js相机调用reset方法复原但无法完全复原

目录 一、问题 二、原因 三、总结 一、问题 需求&#xff1a;经过多次旋转、平移等变换后&#xff0c;希望恢复到初次渲染的角度、位置。结果发现&#xff1a; three.js oribtControls调用 一次reset方法 无法完全复原;需要多次调用后才能复原。 this.orbitControls.reset…...

前端为什么要工程化

前端为什么要工程化 文章目录 前端为什么要工程化传统开发的弊端一个常见的案例更多问题 工程化带来的优势开发层面的优势团队协作的优势统一的项目结构统一的代码风格可复用的模块和组件代码健壮性有保障团队开发效率高 求职竞争上的优势 现在前端的工作与以前的前端开发已经完…...

软件测试/测试开发/人工智能丨视觉与图像识别自动化测试

视觉与图像识别在软件自动化测试领域中的应用是越来越重要的一项技术&#xff0c;它使得测试可以更全面、准确地模拟用户对图形用户界面&#xff08;GUI&#xff09;的交互。以下是视觉与图像识别在软件自动化测试中的主要应用&#xff1a; 1. 自动化 GUI 测试 视觉与图像识别…...

nvm的下载与使用

1.如果已经安装nodejs , 先卸载nodejs; 从控制面板中 卸载程序 卸载nodejs win r打开cmd ,管理员运行 where node 查看是否删除干净nodejs 2.下载nvm 从github 下载nvm , 下载nvm 3.nvm 和node安装路径最好写在同一个路径下 &#xff0c;如D盘 ,D\a\nvm , D\a\nodejs 4.…...

拼多多官方开放平台接口app商品详情接口获取实时商品详情数据演示

拼多多开放平台提供了一种名为“商品详情接口”的API接口&#xff0c;它允许卖家从自己的系统中快速获取商品信息&#xff0c;如商品标题、描述、价格、库存等&#xff0c;并将这些信息展示在自己的店铺中。通过该接口&#xff0c;卖家可以更好地管理自己的商品库存和销售&…...

STM32F4系列单片机GPIO概述和寄存器分析

第2章 STM32-GPIO口 2.1 GPIO口概述 通用输入/输出口 2.1.1 GPIO口作用 GPIO是单片机与外界进行数据交流的窗口。 2.1.2 STM32的GPIO口 在51单片机中&#xff0c;IO口&#xff0c;以数字进行分组&#xff08;P0~P3&#xff09;&#xff0c;每一组里面又有8个IO口。 在ST…...

【LeetCode刷题】--9.回文数

9.回文数 class Solution {public boolean isPalindrome(int x) {if(x < 0){return false;}int tmp x, sum 0;boolean flag false;while(x ! 0){sum sum * 10 x % 10;x / 10;}if(sum tmp){flag true;}return flag;} }...

大数据-之LibrA数据库系统告警处理(ALM-12057 元数据未配置周期备份到第三方服务器的任务)

告警解释 系统安装完成后会检查元数据是否有周期备份到第三方服务器的任务&#xff0c;然后每1小时会检查一次。如果元数据未配置周期备份到第三方服务器的任务&#xff0c;将发送严重告警。 在用户创建元数据周期备份到第三方服务器的任务后&#xff0c;告警消除。 告警属性…...

毅速丨嫁接打印在模具制造中应用广泛

在模具行业中&#xff0c;3D打印随形水路已经被广泛认可&#xff0c;它可以提高冷却效率&#xff0c;从而提高产品良率。然而&#xff0c;全打印模具制造的成本相对较高&#xff0c;因为需要使用金属3D打印机和专用材料。为了节省打印成本&#xff0c;同时利用3D打印的优势&…...

『亚马逊云科技产品测评』活动征文|基于next.js搭建一个企业官网

『亚马逊云科技产品测评』活动征文&#xff5c;基于next.js搭建一个企业官网 授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方…...

C# Winform围棋棋盘

C# Winform简单的围棋棋盘vs2008winform小游戏C#vs2010winform棋盘C#窗体小游戏 这是一个简单的围棋棋盘小游戏&#xff0c;使用C# Winform编写棋盘界面&#xff0c;玩家可以在空白的交叉点上下棋子 项目获取&#xff1a; 项目获取&#xff1a;typora: typora/img (gitee.co…...

vue使用本地图片设置为默认图

一、引用 import imgSrc /assets/common/image/xxx.png 二、赋值给变量 defaultImg:imgSrc, 三、将变量给img标签 <img :src"defaultImg:imgSrc" alt"icon"> 注意&#xff1a;这里直接使用路径给变量是无法实现的哟...

day17-高速缓冲区的管理机制

1.目的 用户与磁盘进行文件交互时的流程 磁盘与高速缓冲区的关系 加深块设备驱动的理解 hash 循环链表 单链表的使用方法 2.高速缓冲区的工作流程 高速缓冲区中存储这对应的块设备驱动的数据 当从块设备中读取数据的时候&#xff0c;OS首先会从高速缓冲区中进行检索&#xff0…...

文心一言 VS 讯飞星火 VS chatgpt (139)-- 算法导论11.4 3题

三、用go语言&#xff0c;考虑一个采用均匀散列的开放寻址散列表。当装载因子为 3/4 和 7/8 时&#xff0c;试分别给出一次不成功查找和一次成功查找的探查期望数上界。 文心一言&#xff1a; 在开放寻址法中&#xff0c;当散列表的装载因子超过其阈值时&#xff0c;会触发重…...

Java 解压文件

maven库&#xff1a; <!--FileUtil、ZipUtil 依赖--> <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.1</version> </dependency><!--IOUtils 依赖--> <depen…...

SASS/SCSS精华干货教程

目录 介绍 基本说明 特点 sass语法格式sass的语法格式一共有两种&#xff0c;一种是以".scss"作为拓展名&#xff0c;一种是以".sass"作为拓展名&#xff0c;这里我们只讲拓展名&#xff1a; 编译环境安装 Vscode安装编译插件 简单使用 sass语法扩张…...

Redis常见使用场景解析

1. 数据库缓存 Redis 作为典型的 Key-Value 型内存数据库,数据缓存是其最广为人知的应用场景。使用 Redis 缓存数据操作简便,通常将序列化后的对象以 string 类型存储。但在实际应用中,需注意以下关键要点: Key 设计:必须确保不同对象的 Key 具有唯一性,且尽量缩短长度,…...

使用高斯朴素贝叶斯算法对鸢尾花数据集进行分类

高斯朴素贝叶斯算法通常用于特征变量是连续变量&#xff0c;符合高素分布的情况。 使用高斯朴素贝叶斯算法对鸢尾花数据集进行分类 """ 使用高斯贝叶斯堆鸢尾花进行分类 """ #导入需要的库 from sklearn.datasets import load_iris from skle…...

网站静态文件加速-Django项目静态文件存储到腾讯云COS存储提升网络请求速度

解决办法是通过在 Nginx 中把对 /static/ 路径的请求直接指向你的 COS 域名来实现让浏览器直接去拉取 COS 上的静态资源&#xff0c;而不再经过本地服务器。下面给出两种常见的做法&#xff0c;你可以任选其一&#xff1a; 方法一&#xff1a;使用 301/302 Redirect &#xff0…...

AI赋能的浏览器自动化:Playwright MCP安装配置与实操案例

以下是对Playwright MCP的简单介绍&#xff1a; Playwright MCP 是一个基于 Playwright 的 MCP 工具&#xff0c;提供浏览器自动化功能不要求视觉模型支持&#xff0c;普通的文本大语言模型就可以通过结构化数据与网页交互支持多种浏览器操作&#xff0c;包括截图、点击、拖动…...

命令行运行python程序报错 ImportError: /lib/x86_64-linux-gnu/libstdc++.so.6

命令行运行python程序报错 ImportError: /lib/x86_64-linux-gnu/libstdc.so.6 ImportError: /lib/x86_64-linux-gnu/libstdc.so.6: version GLIBCXX_3.4.29’ not found (required by /home/zitong/miniconda3/envs/torch112/lib/python3.9/site-packages/scipy/spatial/_ckdt…...

​​​​​​​6板块公共数据典型应用场景【政务服务|公共安全|公共卫生|环境保护|金融风控|教育科研]

1. 政务服务 1.1 城市规划与管理 公共数据在城市规划与管理中可发挥关键作用。通过汇聚自然资源、建筑物、人口分布等基础数据,构建数字孪生城市模型,辅助城市总体规划编制、决策仿真模拟。在城市基础设施建设、安全运营、应急管理等方面,公共数据也是不可或缺的基础支撑。例…...

174页PPT家居制造业集团战略规划和运营管控规划方案

甲方集团需要制定一个清晰的集团价值定位&#xff0c;从“指引多元”、“塑造 能力”以及“强化协同”等方面引领甲方做大做强 集团需要通过管控模式、组织架构及职能、授权界面、关键流程、战略 实施和组织演进路径&#xff0c;平衡风险控制和迅速发展&#xff0c;保证战略落地…...

JDK8新特性之Steam流

这里写目录标题 一、Stream流概述1.1、传统写法1.2、Stream写法1.3、Stream流操作分类 二、Stream流获取方式2.1、根据Collection获取2.2、通过Stream的of方法 三、Stream常用方法介绍3.1、forEach3.2、count3.3、filter3.4、limit3.5、skip3.6、map3.7、sorted3.8、distinct3.…...

LLMs 系列科普文(5)

在前文中&#xff0c;我们讲述了什么是基础模型&#xff0c;并重点以 LLaMA 3.1 基础模型为例&#xff0c;向大家演示了它可以做什么&#xff0c;有哪些问题或有趣的现象。 在进入新的主题内容之前&#xff0c;我们再次对 基础模型 做一些总结&#xff1a; 这是一个基于 toke…...

Context API 应用与局限性

核心概念 React 的 Context API 是为了解决组件间数据共享而设计的一种机制&#xff0c;其核心价值在于提供了一种不通过 props 层层传递就能在组件树中共享数据的方法。在 React 应用中&#xff0c;数据通常是自上而下&#xff08;从父组件到子组件&#xff09;通过 props 传…...