HTML5学习系列之项目实战1

news2024/12/23 6:12:20

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再继续扩充吧!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ajax 之XMLHttpRequest讲解

一直以来都听别人说Ajax,今天终于接触到了。。。。。。。。。。 一.什么是Ajax? 答: AJAX即“Asynchronous Javascript And XML”&#xff08;异步JavaScript和XML&#xff09;&#xff0c;是指一种创建交互式网页应用的网页开发技术。 AJAX 异步 JavaScript和XML&#x…

简单解决网页的验证码

翻到一个网站,展开需要验证码,而验证码需要关注微信公众号,懒得弄,所以有了这篇文章 首先,先看一下F12中的网络(Network),发现并没有使用网络动态验证 那么这个验证码必定是写在资源文件中的 在确定按钮上看到如下元素监听(Event Listeners) 进入打断点 成功断下 单步跟到…

代码随想录算法训练营第五十五天丨 动态规划part16

583. 两个字符串的删除操作 思路 #动态规划一 本题和动态规划&#xff1a;115.不同的子序列 (opens new window)相比&#xff0c;其实就是两个字符串都可以删除了&#xff0c;情况虽说复杂一些&#xff0c;但整体思路是不变的。 这次是两个字符串可以相互删了&#xff0c;这…

QTcpSocket发送结构体的做法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> QTcpSocket发送结构体其实很简单:使用QByteArray类对象进行封装发送&#xff0c;示例代码如下&#xff1a; /* 消息结构体 */ struct stMsg {int m_A…

802.1Qbb

[TOC] 802.1Qbb 802.1Qbb是什么&#xff1f; 802.1Qbb&#xff08;基于优先级的流控制&#xff0c;PFC&#xff09;是以太网数据中心中一项重要的标准&#xff0c;用于提供无丢包的网络环境。这项标准是IEEE 802.1Q标准的一部分&#xff0c;旨在解决以太网数据中心网络中的拥…

《QT从基础到进阶·三十一》事件循环QCoreApplication,QGuiApplication,QApplication

QCoreApplication&#xff1a;为非界面类项目提供一个事件监听循环。 QGuiApplication&#xff1a;以QtGui模块基础开发的界面项目需要应用环境。 QApplication&#xff1a;以QWidget模块基础开发的界面项目需要应用环境。 可以简单总结为&#xff0c;如果是非界面项目开发&am…

Google codelab WebGPU入门教程源码<7> - 完整的元胞自动机之生命游戏的完整实现(源码)

对应的教程文章: https://codelabs.developers.google.com/your-first-webgpu-app?hlzh-cn#7 对应的源码执行效果: 对应的教程源码: 此处源码和教程本身提供的部分代码可能存在一点差异。 class Color4 {r: number;g: number;b: number;a: number;constructor(pr 1.0, …

剑指offer(C++)-JZ39:数组中出现次数超过一半的数字(算法-其他)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 给一个长度为 n 的数组&#xff0c;数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个…

分布式任务调度-XXL-job

源码仓库地址 http://gitee.com/xuxueli0323/xxl-job 前置环境 docker容器环境配置 拉取msyql镜像&#xff1a; docker pull mysql:5.7创建mysql容器: docker run -p 3306:3306 --name mysql57 \ -v /opt/mysql/conf:/etc/mysql \ -v /opt/mysql/logs:/var/log/mysql \ -v …

AR眼镜_单目光波导VS双目光波导方案

双目光波导AR眼镜方案是一种创新的智能设备&#xff0c;可以在现实场景中叠加虚拟信息&#xff0c;提供增强的视觉体验和交互体验。光学显示方案是AR眼镜的核心技术之一&#xff0c;它对眼镜的性能和使用体验起着决定性的作用。 相比于单目AR眼镜&#xff0c;双目AR眼镜具有更好…

opencv(5): 滤波器

滤波的作用&#xff1a;一幅图像通过滤波器得到另一幅图像&#xff1b;其中滤波器又称为卷积核&#xff0c;滤波的过程称为卷积。 锐化&#xff1a;边缘变清晰 低通滤波&#xff08;Low-pass Filtering&#xff09;&#xff1a; 目标&#xff1a;去除图像中的高频成分&#…

【Proteus仿真】【Arduino单片机】DS1302时钟

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、DS1302等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示时间日期。 二、软件设计 /* 作者&#xff1a;…

SmartX 超融合 5.1 版本有哪些新特性和技术提升?

近日&#xff0c;SmartX 正式发布了超融合产品组合 SmartX HCI 5.1 版本&#xff0c;以全面升级的超融合软件、分布式块存储、容器管理与服务、软件定义的网络与安全等组件&#xff0c;为虚拟化和容器负载在计算、存储、网络和管理层面提供统一的架构和生产级别的能力支持。本期…

三菱FX3U小项目—运料小车自动化

目录 一、项目描述 二、IO口分配 三、项目流程图 四、项目程序 五、总结 一、项目描述 设备如下图所示&#xff0c;其中启动按钮SB1用来开启运料小车&#xff0c;停止按钮SB2用来手动停止运料小车(其工作方式任务模式要求)。当小车在原点SQ1位置&#xff0c;按下启动按钮S…

【深度学习实验】网络优化与正则化(七):超参数优化方法——网格搜索、随机搜索、贝叶斯优化、动态资源分配、神经架构搜索

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

什么是模糊测试?

背景&#xff1a;近年来&#xff0c;随着信息技术的发展&#xff0c;各种新型自动化测试技术如雨后春笋般出现。其中&#xff0c;模糊测试&#xff08;fuzz testing&#xff09;技术开始受到行业关注&#xff0c;它尤其适用于发现未知的、隐蔽性较强的底层缺陷。这里&#xff0…

crontab定时任务是否执行

centos查看 crontab 是否启动 systemctl status crond.service 查看cron服务的启动状态 systemctl start crond.service 启动cron服务[命令没有提示] systemctl stop crond.service 停止cron服务[命令没有提示] systemctl restart crond.service 重启cron服务[命令没有提示] s…

23111701[含文档+PPT+源码等]计算机毕业设计javaweb点餐系统全套餐饮就餐订餐餐厅

文章目录 **项目功能简介:****点餐系统分为前台和后台****前台功能介绍&#xff1a;****后台功能介绍&#xff1a;** **论文截图&#xff1a;****实现&#xff1a;****代码片段&#xff1a;** 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;77687156…

23111704[含文档+PPT+源码等]计算机毕业设计springboot办公管理系统oa人力人事办公

文章目录 **软件开发环境及开发工具&#xff1a;****功能介绍&#xff1a;****实现&#xff1a;****代码片段&#xff1a;** 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;776871563 软件开发环境及开发工具&#xff1a; 前端技术&#xff1a;jsc…

契约锁助力货物进出口全程无纸化,加速通关、降低贸易成本

我国作为全球最大的制造业国家和最大的货物贸易国家&#xff0c;政府始终注重引入数字化技术&#xff0c;创新管理和服务模式&#xff0c;帮助降低企业进出口成本&#xff0c;加速货物流通。 近年国家海关总署、商务部、税务总局及各地政府在进出口“报关”、“提货”、“收货备…