整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html做一个简单的mp3播放器 「316」

html做一个简单的mp3播放器 「316」
  • H5之下做一个音频播放器,其实不难了,只用audio标签就可以了。
  • 本章,只是加了两个按钮,通过自己添加的按钮来控制音频播放,这才是本文目的。

一、HTML确实给了我们很多好东西,包括audio标签。

  • 打开浏览器,什么也没有。

二、我们改改,src属性就不要了,加个controls,它是控制的意思,可以显示音频控制。

三、点了,可是没有歌呀,加歌进去吧,随便下载一首歌。

四、你会发现播放和暂停可以点击,还有进度条的拖动,都是可以用的,可如果你不喜欢那个按钮,又怎么自己做按钮来控制呢。

  • 按钮真的很丑,我们得改改样式。

五、改成两个圆形按钮。

六、补点东西吧,audio标签也应该有个id,然后再加两个按钮的点击事件。

七、完成最后一步,让按钮可以控制audio。

一个网页新闻中,出现最多的就是文字和图片,图片并茂能够生动的表达新闻主题。创建一个图片的简单混排,具体步骤如下所示:

第1步:分析要求

本实例要求在网页的最上方显示出标题,标题下方是正文,在正文部分显示图片。其实例效果图如下所示:

第2步:实现代码

(1)打开DW,编写HTML代码基本框架,具体如下:

(2)在<body>标签中插入网页标题设计代码,具体如下:

<h1 style="text-align: center;text-shadow: 0.1em 2px 6px blue;font-size: 18px"折纸技术:绵羊</h1>

(3)在<body>标签中插入图片设计代码,具体如下:

<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">

(4)在<body>标签中完善文字段落内容设计代码,具体如下:

<p style="text-indent: 8mm;line-height: 7mm">绵羊是常见的饲养动物。身体丰满,体毛绵密。头短。雄兽有螺旋状的大角,雌兽没有角或仅有细小的角。毛色为白色。绵羊现在世界各地均有饲养。性情胆怯。秋季、冬季发情。雌兽的怀孕期为145—152天。每胎产1—5仔。寿命为10—15年。绵羊耐渴,可以为人类提供肉和毛皮等产品。下面就让我们一起来折一个可爱的绵羊吧。</p>

<p style="text-indent: 8mm;line-height: 7mm">绵羊体躯丰满,被毛绵密,头短。公绵羊多有螺旋状大角具有威慑性,母绵羊无角或角细小。</p>

<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">

<p style="text-indent: 8mm;line-height: 7mm">常见的饲养动物。身体丰满,体毛绵密。头短。雄羊有螺旋状的大角,非常有威严但其实是起好看的作用,雌羊没有角或仅有细小的角。毛色为白色。绵羊在约11000年前在西南亚地区被最早驯化。绵羊现在世界各地均有饲养,性情既胆怯,又温顺,易驯化。目前高度驯化的饲养品种多为常年发情,地方放牧品种为季节发情,多在秋季、冬季发情。雌羊的怀孕期为145~152天。每胎产1~5仔。寿命为10~15年。绵羊耐渴,可以为人类提供肉和毛皮等产品。绵羊肉质鲜嫩,非常好吃,中国饲养绵羊最多的地方是内蒙古、青海等地。知名度最高的当然是科技产品克隆绵羊——多莉。<br>

一般认为绵羊可能起源于4种不同的野生种,即:栖息于地中海沿岸的摩弗仑羊(O.musimon)、分布于亚洲中部和西南部的东方羊(O.orientalis)、盘羊(O.ammon)和蛮羊(O.orientalis vignei)。野生绵羊驯化为家畜始于约11000年以前的新石器时代,发源地在中亚细亚,以后逐渐向世界各地扩展,经大量出土羊骨的碳测定认为,中国养羊历史在8000年前。野生羊经过长时期的选择(动物)和淘汰,其外形和特性有了许多变化;并由于各地自然条件和经济需要的差异而出现了不同的品种类型。18世纪以来,品种的发展尤为迅速

</p>

(5)保存编辑好的网页文件。

接上文

上面我们做到了这一步

第三步

将标题居中

需要新学一个属性:

align 属性规定内容的水平对齐方式。

align 属性有3个值:

当 align="center" 的时候,就是居中对齐内容;当 align="left" 的时候,就是左对齐内容;当 align="right" 的时候,就是右对齐内容。

在 <h1>、<p> 标签中添加 align 属性,如下:

<h1 align="center">俄媒盘点三大性价较高的度假胜地</h2>
	<p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 来源:环球时报</font></p>


标题居中对齐了

总结:align的值:center:居中;left:左对齐;right:右对齐。

第四步

在标题下面有一条横线,我们可以用 <hr/> 这个单标签实现:

<hr> 标签用于在 HTML 页面中创建一条水平线


再加入 <hr/> 后可以看到,只需要一个 <hr/> 即可在浏览器中显示一条水平线,这就是单标签和双标签区别,它只需要一个。不仅如此,我们还可以定义这条横线的长短、粗细、颜色。

可以试试看在 <hr/> 里面加入以下内容:

<hr size="2" width=200px color="red"/>

中间红色的线就是加属性后的<hr/>

size:规定 hr 元素的厚度;width:规定 hr 元素的宽度(px是像素的意思,例如100px是100像素); color:规定 hr 元素呈现的颜色。

第五步

最后一步,把文字写进<p>标签里面

<p>世界上有许多美丽的国家,去那里旅游无需办理繁琐的证件手续,而且还可以欣赏到不一样的风景。 俄罗斯“健康生活网”与旅游门户网站“摩登门”为大家推荐一些经济实惠、性价比比较高的旅游国度,让大家好好畅游一番。
	</p>
	<p>1.亚美尼亚</p>
<p>2.黑山共和国</p>
<p>3.摩洛哥</p>


细心的你可能会发现,为什么成品图3个国家名字的行高间隔很小,而上面的行高却间隔很大

这时我们需要认识一个新标签<br/>

<br/> 可以插入一个换行符,它与<p>标签区别是:<p>标签在换行时,还会在相邻的段落之间插入一些垂直的行间距(行高)。这个标签和上面的<hr/>同样属于单标签。

所以我们稍微修改一下,并加入颜色:

<p><font color="#f00">1.亚美尼亚<br/>2.黑山共和国<br/>3.摩洛哥</font></p>


完全一样了

以下是完整html代码:


END

你学到了<h1> - <h6>标签、<font>标签、<!--注释-->、align 属性、<hr/>标签、<br/>标签。

你已经能自己做出一个简单的网页了。