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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 当中的 Fragment 协作解耦方式

Android 当中的 Fragment 协作解耦方式 文章目录 Android 当中的 Fragment 协作解耦方式第一章 前言介绍第01节 遇到的问题第02节 绘图说明 第二章 核心代码第01节 代理人接口第02节 中间人 Activity第03节 开发者A第04节 开发者B第05节 测试类 第一章 前言介绍 第01节 遇到的…

Ubuntu22.04 Apache2安装SSL证书 https

一、免费证书申请 https://help.aliyun.com/zh/ssl-certificate/user-guide/overview-of-free-certificates 得到 三、配置 执行以下命令&#xff0c;打开default-ssl.conf文件。 vim /etc/apache2/sites-available/default-ssl.conf 在default-ssl.conf配置文件中&#xff…

List is a raw type. References to generic type List<E> should be parameterized

List is a raw type. References to generic type List<E> should be parameterized 都是代码习惯问题懒

大型且复杂项目的资源管理怎么做?

职场中&#xff0c;我劝你做个“显眼包”&#xff01;作为天天背锅、踩坑、救火的项目经理&#xff0c;积极响应、随时反馈、成果汇报这些一样都不落下&#xff0c;项目才能顺利开展。这不&#xff0c;项目经理小李就是由于自己过于低调且内敛的性格&#xff0c;差点把项目都做…

影像仪全景导航,快速定位产品特征!

**在工业制造领域中&#xff0c;影像仪全景导航可以提供全景影像&#xff0c;将整个区域的图像精准地捕捉下来&#xff0c;并通过软件算法实现高效处理&#xff0c;以呈现出更加清晰和详细的视图。**这一技术不仅可以提高定位精度&#xff0c;同时还能大幅度提升定位效率。与自…

Pytorch torch.exp()的使用举例

代码实验展示: Microsoft Windows [版本 10.0.18363.1256] (c) 2019 Microsoft Corporation。保留所有权利。C:\Users\chenxuqi>conda activate ssd4pytorch1_2_0(ssd4pytorch1_2_0) C:\Users\chenxuqi>python Python 3.7.7 (default, May 6 2020, 11:45:54) [MSC v.191…

轻量封装WebGPU渲染系统示例<34>-数据驱动之Json构建场景

场景和数据之间的互通&#xff1a; 场景数据化或者数据化场景&#xff0c;是当前的主流场景数据构成方式。方便传输方便交换甚至是交互。 内置数据互通机制更有利于用户在各种应用场合下实现具体的3D相关的应用需求。用户只需要关心标准的或者约定好的数据定义及操作方式就能方…

GPS信号的数字接收处理matlab仿真,包括频率点搜索,捕获跟踪,相关峰检测等步骤

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 频率点搜索 4.2. 捕获跟踪 4.3. 相关峰检测 5.算法完整程序工程 1.算法运行效果图预览 低信噪比下仿真结果如下&#xff1a; 2.算法运行软件版本 matlab2022a 3.部分核心程序 ...…

直接插入排序

一.介绍. 其基本思想为数据元素被已经放入一个已经排好的有序数组中&#xff0c;现插入一个元素进入该数组&#xff0c;按顺序&#xff08;即大小关系&#xff09;放进适当位置&#xff0c;并且其后面的元素都向后移动移位。 如图&#xff1a; 对于上述问题&#xff1a; 代码…

【AI视野·今日Sound 声学论文速览 第三十六期】Mon, 30 Oct 2023

AI视野今日CS.Sound 声学论文速览 Mon, 30 Oct 2023 Totally 7 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Style Description based Text-to-Speech with Conditional Prosodic Layer Normalization based Diffusion GAN Authors Neeraj Kumar, A…

湖科大计网:网络层

一、网络层概述 一、基本概念 网络层的主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间传输。 若只有单个网络&#xff0c;只需要物理层和数据链路层即可。 不同的异构网络需要路由器将其互连&#xff0c;路由器的每一个接口代表一个不同的网络&#xff0c;也区…

Windows安装nvm【node.js版本管理工具】

目录 下载安装包 安装 配置 配置node的国内镜像源 配置npm的国内镜像源 常用命令 查看可安装的node版本 安装指定的版本 查看已有的node版本列表 切换版本 下载安装包 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 安装 安装过程就不贴了&#xff0…

leetcode刷题日志-14最长公共前缀

编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 “”。 示例 1&#xff1a; 输入&#xff1a;strs [“flower”,“flow”,“flight”] 输出&#xff1a;“fl” 示例 2&#xff1a; 输入&#xff1a;strs [“dog”,“raceca…

Java进阶笔记(面向对象后, 持续更新)

常用API 游戏打包成exe 考虑的因素 要有图形化界面代码要打包起来游戏用到的图片也要打包JDK也要打包 核心步骤 把所有代码打包成一个压缩包, jar后缀的压缩包把jar包转换成exe安装包把第二部的exe, 图片, JDK整合在一起, 变成最终的exe安装包 1. Math 是一个帮助我们用…

Android Studio 写一个Java调用c++ 的demo

前提条件&#xff1a; 本地已经配置好了ndk环境,如果没有配置好&#xff0c;建议参考macos 配置ndk环境-CSDN博客 这篇链接。 新建一个Empty Project 比如我这里的Project的名字是HelloJNI&#xff0c;包名是com.example.hellojni 然后在src目录下&#xff0c;右键选择Add C …

解决Requests中使用httpbin服务器问题:自定义URL的实现与验证

问题背景 在使用Python的Requests模块进行单元测试时&#xff0c;可能会遇到无法使用本地运行的httpbin服务器进行测试的问题。这是因为测试脚本允许通过环境变量HTTPBIN_URL指定用于测试的本地httpbin实例&#xff0c;但在某些测试用例中&#xff0c;URL是硬编码为httpbin.or…

SpringCloud -Token传递之Feign

目录 方法一 RequestHeader 方法二 使用Feign的Interceptor 步骤一 实现RequestInterceptor接口 步骤二&#xff1a;配置Feign 通常微服务对于用户认证信息解析有两种方案 在 gateway 就解析用户的 token 然后路由的时候把 userId 等相关信息添加到 header 中传递下去。在…

提取纯色马赛克

​​​​​​ 图像预处理 将彩色图像加载到内存。 转换图像为灰度图像&#xff0c;以简化处理。 对灰度图像应用二值化处理&#xff0c;将图像中的纯色区域分为前景和背景。这可以使用阈值处理来完成。 轮廓检测 使用轮廓检测算法&#xff0c;例如OpenCV的 findContours 函数&…

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…