HTML添加背景音樂(lè)(embed、audio)

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音樂(lè)</title>

    <meta charset="utf-8">

<!--embed標(biāo)簽寫在<head>里面的title標(biāo)簽下-->
   

<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 說(shuō)明：

1、src：文件路徑。

2、hidden="true"表示隱藏音樂(lè)播放按鈕，相反使用hidden="false"表示開(kāi)啟音樂(lè)播放按鈕。

3、autostart="true" 表示是打開(kāi)網(wǎng)頁(yè)加載完后自動(dòng)播放。

4、loop="true"表示 循環(huán)播放 如僅想播放一次則為：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白氣球.mp3">       

</audio>

<!-- 說(shuō)明：

1、autoplay="autoplay"，則背景音樂(lè)將在音網(wǎng)頁(yè)打開(kāi)后就自動(dòng)馬上播放。

2、controls="controls"，則為了在頁(yè)面內(nèi)顯示顯示控件，如播放按鈕。

3、"loop="loop"，則是為了使背景音樂(lè)重復(fù)播放。

4、preload="auto"，則音頻在頁(yè)面加載的同時(shí)進(jìn)行加載，并預(yù)備播放。

5、src=""，即是在""內(nèi)加入背景音樂(lè)的保存路徑，如：src=""。

注：若是想播放按鈕隱藏，則使用以下語(yǔ)句：

直接使用css 的display控制audio標(biāo)簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

、建立站點(diǎn)后，在文件夾上右鍵新建一個(gè)文件，改名為音樂(lè)制作網(wǎng)頁(yè)，然后雙擊進(jìn)入網(wǎng)頁(yè)，首先，插入表格，17行，2列，表格寬度和表格粗細(xì)都為0，確定。選中表格，下邊的對(duì)齊方式為，居中對(duì)齊

2、選中第一個(gè)格，按住Ctrl鍵再選中第二個(gè)格，右鍵，表格，合并單元格，點(diǎn)擊插入，圖像，選擇建的站點(diǎn)下的素材，確定

3、用剛才的方法合并第二行單元格，填寫導(dǎo)航欄文字，選擇拆分，找到對(duì)應(yīng)代碼位置，填寫空格代碼在文字前后都添加空格，使導(dǎo)航欄文字間隙均勻，下邊背景顏色改為紫色

4、編寫下一行文字，背景顏色為綠色，金曲列表文字，下邊，HTML，格式為標(biāo)題5，歌曲下載文字，下邊，HTML，格式為標(biāo)題3，找到代碼中金曲列表文字對(duì)應(yīng)位置，添加空格代碼

5、在歌曲下載文字后面插入，圖像，選擇下載圖標(biāo)圖片，點(diǎn)擊圖片，選擇連接指向你的歌曲MP3文件

6、在每個(gè)格中加入歌名，每個(gè)都要插入，布局對(duì)象，Div標(biāo)簽，然后添加歌曲名稱

7、右半部分，前兩行合并，插入布局對(duì)象，添加文字那女孩對(duì)我說(shuō)，HTML格式改為標(biāo)題2，然后將下邊剩余所有行合并，插入布局，添加歌詞

8、選擇歌詞，將HTML的格式改為標(biāo)題5

9、點(diǎn)擊代碼，找到歌詞位置，復(fù)制空格，在每一行歌詞前面招貼空格，刷新一下，使歌詞居中一些

10、按F12預(yù)覽

小伙伴們，有沒(méi)有看懂呢，看不懂可以去看視頻呦！

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import。

link 屬于 HTML，通過(guò) <link> 標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

在線咨詢

上一篇：高質(zhì)量 HTML5 開(kāi)源視頻播放器DPlayer
下一篇：Java Applet基礎(chǔ)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML添加背景音樂(lè)(embed、audio)

您的項(xiàng)目需求