html如何在li里面设置播放歌曲

来源：互联网 2023-03-16 19:08:57 213

作为网站开发领域的技术人员和项目经理来说，网站的多样化，能带来更好的客户体验；最新的Html5 CSS3网页开发技术，虽然在布局上简单可视化，但是也带来了一系列的问题，浏览器不兼容，音频视频放不了等。

多样化的网页，图文并茂，并伴有音频，视频的展现，那在li>标签里如何设置音频呢，请看详细经验。

html如何在li里面设置播放歌曲

工具/原料

第一步：新建Html文件并下载音乐文件

用Dreamweaver新建一个Html文件，保存到网页专用文件夹中，并下载需要测试的音乐，和Html文件放在相同的目录下，如图：

html如何在li里面设置播放歌曲

第二步：检测音乐文件是否正常

用音乐播放器检测音频文件是否正常，避免异常音乐在程序测试中的错误。程序外部文件的测试看似没有必要，实则非常重要，否则，出错就很难查处程序上的问题。如图：

html如何在li里面设置播放歌曲

第三步：LI布局及样式并测试

在代码头部写上样式标签：

style type="text/css">

li{list-style:none;}

/style>

这段Css代码是控制页面内所有li标签去除样式。如图：

html如何在li里面设置播放歌曲

第四步：在li>标签插入音乐并测试

注意了，重点开始了，在li>内部插入

embed src="云朵 - 我的楼兰.mp3" width="32" height="32">/embed>

这是音乐文件的标签，并在浏览器中查看效果，默认为自动播放。如图：

html如何在li里面设置播放歌曲

4本页面非法爬取自百度经验

第五步：设置播放器参数并测试

设置embed各项参数并在浏览器中查看效果，参数属性可以到W3C网站查询，本经验不一一解释，如图：

html如何在li里面设置播放歌曲

第六步：设置播放模式参数并测试

由于默认是自动在网页加载时播放，所以有时候为了程序的需要，需要改为鼠标点击时播放，代码如图：

html如何在li里面设置播放歌曲

第七步：总体测试

任何一个简单的程序都需要经过反复的测试和修改，才能正式发布，所以，程序员在写完之后一定要反复测试，从多种角度考虑程序的完整。

html如何在li里面设置播放歌曲

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：如何利用html制作网页水平导航菜单下一篇：Ps制作Html/区域背景图