- HTML+CSS網頁開發技術精解
- 吳玉中等編著
- 6320字
- 2018-12-30 14:34:30
第5章 網頁圖像和多媒體信息組織
學前必讀：
圖像是網頁上最常用的對象之一，制作精美的圖像可以大大增強網頁的視覺效果，使網頁更加生動。在網頁中恰當地使用圖像，能夠吸引瀏覽者的眼球。因此，利用好圖像，也是網頁設計的關鍵。
在網頁中，除了之前講到的可以插入文本和圖像外，還可以插入動畫、聲音、視頻等媒體元素。通過對本章的學習，讀者可以學習到圖像和多媒體文件的使用，從而制作出豐富多彩的網頁，吸引瀏覽者的注意。
本章重點：
● 圖像元素
● 使用背景音樂
● 滾動標簽
● 多媒體標簽
5.1 圖像元素<img>
在網頁上使用圖片，從視覺效果而言，能使網頁充滿生機，并且直觀巧妙地表達出網頁的主題，這是僅靠文字難以達到的效果。
5.1.1 圖像元素的路徑屬性src
在HTML文檔中，顯示圖片所用的標記是img，src屬性是圖像必不可少的屬性，用來指定圖像源文件所在的路徑。
基本語法：
<img src="url">
語法介紹：
（1）ing是插入圖片的標記，其常用屬性如表5.1所示，其中scr是其必需的屬性。
（2）scr屬性用來指定圖像源，即圖像的URL路徑。該路徑可以是相對路徑，也可以是絕對路徑。
表5.1 <ing>的屬性及其功能說明
案例代碼：
<!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<img src="5.1.1.jpg" width="683" height="665" />
</body>
</html>
代碼分析：
代碼中加粗部分的標記是使用src插入圖像文件5.1.1.jpg，在瀏覽器中預覽，可以看到插入的圖像，如圖5.1所示。
圖5.1 插入圖像文件效果
提示：圖像的地址可以使用文件和http://url關鍵字作為圖像的地址，并且能夠用于在網頁上載入圖像。
5.1.2 代替圖片的文本屬性alt
由于一些原因，圖像無法正常顯示，比如網絡速度過慢、瀏覽器版本過低等，因此應該為圖像設置一個替換文本，用于圖像無法顯示的時候告訴瀏覽者該圖片的內容。
基本語法：
<img src="url" alt="提示文字的內容" >
語法介紹：
（1）圖片的alt屬性用于對圖片信息進行描述。在瀏覽器中，當圖片無法正常顯示時，在圖片位置顯示該描述信息。當圖片可以正常顯示時，鼠標放在上面時才顯示該描述信息。
（2）alt屬性可以在Web瀏覽器不支持圖像顯示或用戶關閉圖像下載功能時，告訴用戶該處是一幅什么樣的圖像。
在該語法中，提示文字的內容可以是中文，也可以是英文。
案例代碼：
<!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>設置圖像的替代文字</title>
</head>
<body>
<img src="5.1.2.jpg" alt="點擊進入" width="950" height="466" />
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是添加圖像的提示文字“點擊進入”，在瀏覽器中預覽可以看到添加的提示文字“點擊進入”，如圖5.2所示。
圖5.2 圖片的替代文本
提示：隨著互聯網的發展，alt屬性有了新的作用，Google和百度等搜索引擎收錄頁面的時候，會通過alt屬性的內容來分析網頁的內容。因此為圖像添加替換文本可以幫助搜索引擎更好地理解內容，從而有利于搜索引擎的優化。
5.1.3 圖像元素的寬度、高度屬性width、height
在HTML文檔中，可以設定圖像的顯示大小，通常情況下如果<img>元素不定義高度和寬度，圖片就會按照它的原始尺寸顯示。
基本語法：
<img src="url" width="圖像的寬度" height="圖像的高度">
語法介紹：
（1）width和height屬性用來定義圖片的高度和寬度，單位可以是像素，也可以是百分比。百分比表示顯示圖像大小為瀏覽器窗口大小的百分比。
（2）在width和height屬性中，如果只設置了其中的一個屬性，則另一個屬性會根據已設置的屬性按原圖等比例顯示。如果對兩個屬性都進行了設置，且其比例和原圖大小的比例不一致，顯示的圖像會相對于原圖變形或失真。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<img src="5.1.3.jpg" />
<img src="5.1.3.jpg" width="224" height="243" />
</body>
</html>
代碼分析：
在代碼中，加粗的第1行標記是沒有調整的圖像寬度和高度，第2行標記是調整后圖像的寬度為224像素、高度為243像素，在瀏覽器中預覽，可以看到調整圖像寬度和高度后的效果，如圖5.3所示。
圖5.3 設置圖像高度和寬度
5.1.4 圖像元素的邊框屬性border
默認情況下，圖像是沒有邊框的，通過border屬性可以為圖像添加邊框線。可以設置邊框的寬度，但邊框的顏色是不可以設置的。當圖像上沒有添加鏈接的時候，邊框的顏色為黑色；當圖像上添加了鏈接時，邊框的顏色和鏈接文字顏色一致，默認為深藍色。
基本語法：
<img src="url" border="圖像邊框的寬度">
語法介紹：
（1）border的值用數字表示，默認單位為px。
（2）默認情況下圖片沒有邊框，即border=0。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<img src="5.1.4.jpg" width="400" height="386" />
<img src="5.1.4.jpg" width="400" height="386" border="10"/>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是使用border="10"為圖像添加邊框的，在瀏覽器中預覽，可以看到添加的邊框效果為10像素，如圖5.4所示。
圖5.4 添加邊框
5.1.5 圖像元素的對齊屬性align
圖像和文字之間的對齊是通過align屬性來設定的，align的對齊方式有兩種：即絕對對齊和相對對齊。絕對對齊方式的效果和文字一樣，只有3種：居中（middle）、居左（left）、居右（right）。相對對齊方式是指圖像與一行文字的相對位置。
基本語法：
<img src="url" align="文字的對齊方式">
語法介紹：
（1）與其他元素不同的是圖像的align屬性既包括水平對齊方式，又包括垂直對齊方式。
（2）align的默認值為bottom。
在該語法中，align的取值如表5.2所示。
表5.2 align屬性的屬性值定義
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<p><img src="5.1.5.jpg" width="290" height="206" align="left" />本公司從事空調行業已達10余年，主要經營空調技術領域技術服務，家用和商用空調售后維修、空調清洗、空調加氟（充氟、加氟利昂、加制冷劑）、空調移機、空調安裝、空調配遙控器、空調回收一條龍服務。本公司技術力量雄厚，擁有一支具有實際經驗設計、安裝和維修保養的服務隊伍，有多年家用和商用空調專業維修經驗。我們熟悉各種空調設備的性能、維護與管理，具有優良的專業技能和服務常識，并且接受專業課程的培訓，確保各項服務質量。公司規模完善，覆蓋整個臨沂。專業承接：格力、海爾、春蘭、美的、海信、松下、LG、新科、現代、奧克斯、格蘭仕、華寶、東芝、澳柯瑪、志高、三菱重工等國內外品牌空調的移機、維修、保養、加氟、安裝，以質求量，薄利多銷，價格收費標準全城最低，是您空調維修安裝時明智的選擇。空調安裝與空調維修業務是我們多年潛心研究最專業的空調服務項目。在臨沂各地區都有網點，無節假日，24小時服務。時刻提供優質的空調維修，空調安裝，空調移機，空調加氟，空調清洗服務。技術過硬，實力雄厚。從客戶的角度出發，為客戶提供質量高、價格低、及時快捷的服務。<br />
</p>
<div align="center"></div>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是設置對齊方式，設置圖像左對齊，在瀏覽器中預覽效果，可以看出圖像是左對齊，如圖5.5所示。
圖5.5 設置對齊方式
5.1.6 圖像元素的垂直邊距屬性vspace
垂直邊距vspace用來調整圖像與文字的垂直邊距。
基本語法：
<img src="url" vspace="垂直邊距">
語法介紹：
在該語法中，vspace屬性的單位是像素。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
莽莽林海，隨季節變化，呈，呈<img src="5.1.6.jpg" width="204" height="151" vspace="20"align="right" />現出瑰麗色彩。初春山山叢林，紅、黃、紫、白各色杜鵑點綴其間，其后，山桃花、野梨花相繼吐艷，夾雜著嫩綠的樹木新葉，整個林海繁花似錦。盛夏是綠色的海洋，新綠、翠綠、濃綠、黛綠，綠得那樣青翠，顯出旺盛的生命力。深秋，深橙色的黃櫨，淺黃色的椴葉，絳紅色的楓葉，殷紅色的野果，深淺相間，錯落有致，萬山紅遍，層林盡染，似一幅獨具匠心的巨幅油畫。在暖色調的襯托下，湖水更藍。藍天、白云、雪峰、彩林倒映于湖中，呈現出光怪陸離的水景。入冬，白雪皚皚，冰瀑、冰幔晶瑩潔白；莽莽林海，似玉樹瓊花。銀裝素裹的九寨溝顯得潔白、高雅，像置于白色瓷盤中的藍寶石，更加璀璨。
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是為圖像添加垂直邊距為20像素，在瀏覽器中預覽，效果如圖5.6所示。
圖5.6 垂直邊距
5.1.7 圖像元素的水平邊距屬性hspace
圖像與文字之間的水平距離可以通過hspace參數進行調整。通過調整圖像的邊距，可以使文字和圖像的排列顯得緊湊，看上去更加協調。
基本語法：
<img src="url" hspace="水平邊距">
語法介紹：
在該語法中，水平邊距hspace屬性的單位是像素。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
莽莽林海，隨季節變化，呈<img src="5.1.6.jpg" width="204" height="151" hspace="20"align="right" />現出瑰麗色彩。初春山山叢林，紅、黃、紫、白各色杜鵑點綴其間，其后，山桃花、野梨花相繼吐艷，夾雜著嫩綠的樹木新葉，整個林海繁花似錦。盛夏是綠色的海洋，新綠、翠綠、濃綠、黛綠，綠得那樣青翠，顯出旺盛的生命力。深秋，深橙色的黃櫨，淺黃色的椴葉，絳紅色的楓葉，殷紅色的野果，深淺相間，錯落有致，萬山紅遍，層林盡染，似一幅獨具匠心的巨幅油畫。在暖色調的襯托下，湖水更藍。藍天、白云、雪峰、彩林倒映于湖中，呈現出光怪陸離的水景。入冬，白雪皚皚，冰瀑、冰幔晶瑩潔白；莽莽林海，似玉樹瓊花。銀裝素裹的九寨溝顯得潔白、高雅，像置于白色瓷盤中的藍寶石，更加璀璨。
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是為圖像添加水平邊距，在瀏覽器中預覽，可以看到設置的水平邊距為20像素，如圖5.7所示。
圖5.7 水平邊距
5.2 使用背景音樂
除了可以使用圖像外，也可以使用音頻、視頻、Flash等為瀏覽者創造氛圍，使他們喜歡上你的網站。背景音樂是其中的一種，該設置在網頁中不顯示播放軟件界面。設置背景音樂的標記是<bgsound>，可播放的聲音文件格式包括WAV、MIDI、MP3等。
5.2.1 背景音樂的路徑屬性src
在網頁中，除了可以嵌入普通的聲音文件外，還可以為某個網頁設置背景音樂。
基本語法：
<bgsound src="url">
語法介紹：
scr指定聲音文件的URL來源，即其路徑，為必選屬性。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<bgsound src="yinyue.mp3">
<img src="5.2.1.jpg" width="500" height="374" />
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是插入背景音樂“yinyue.mp3”，在瀏覽器中預覽可以聽到音樂效果，如圖5.8所示。
圖5.8 插入背景音樂效果
提示：在網頁中加入一段背景音樂，有時也可以達到意想不到的效果，這只要用bgsound標記就可以實現。
5.2.2 背景音樂的重復屬性loop
通常情況下，背景音樂需要不斷地播放，可以通過設置loop屬性來實現循環次數的控制。
基本語法：
<bgsound src="ur" loop="播放次數">
語法介紹：
loop指定聲音文件的循環播放次數，其值為正整數n，值為?1或infinite時指定循環播放無限次。如果希望無限次地循環播放背景音樂，可將循環次數設置為true。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<bgsound src="沂蒙山小調.mp3" loop="5">
人人(那個)都說(哎)<br />
沂蒙山好<br />
沂蒙(那個)山上(哎)<br />
好風光<br />
青山(那個)綠水(哎)<br />
多好看<br />
風吹(那個)草低(哎)<br />
見牛羊<br />
(轉段音樂)<br />
高梁(那個)紅來(哎)<br />
稻花(那個)香<br />
滿擔(那個)果蛋(哎)<br />
堆滿倉
<br />
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是插入背景音樂，在瀏覽器中預覽可以聽到背景音樂循環播放5次后，自動停止播放的效果，如圖5.9所示。
圖5.9 插入背景音樂效果
5.3 滾動標簽marquee
網頁的多媒體元素一般包括動態文字、動態圖像、聲音以及動畫等，其中最簡單的就是添加一些滾動效果。
5.3.1 滾動標記marquee
使用marquee標記不僅可以移動文字，也可以移動圖片、表格等。在標記之間添加要進行滾動的內容，并可以在標記之間設置文字或圖像的屬性。
基本語法：
<marquee>…</marquee>
語法介紹：
（1）將要添加效果的內容放到<marquee>標記之間，同時也可以設置文字的字體、大小和顏色。
（2）默認情況下滾動背景的面積和文字等高，和瀏覽器等寬。設置絕對大小時默認單位為px。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<marquee>
輕輕的我走了，正如我輕輕的來；我輕輕的招手，作別西天的云彩。</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是設置滾動的標記，在瀏覽器中預覽可以看到滾動效果，如圖5.10所示。
圖5.10 滾動效果
5.3.2 滾動方向direction
默認情況下只能從右向左滾動，可以通過direction來設置不同的滾動方向。
基本語法：
<marquee direction="滾動方向">…</marquee>
語法介紹：
滾動方向包含4個取值，分別為up、down、left和right，它們分別表示向上、向下、向左和向右滾動，其中向左滾動left的效果與默認效果相同。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<marquee direction="down"><p>日照香爐生紫煙</p>
<p>遙看瀑布掛前川</p></marquee>
<marquee direction="up"><p>飛流直下三千尺</p>
<p>疑是銀河落九天</p></marquee>
<p> </p>
</body>
</html>
<body>
代碼分析：
在代碼中，加粗部分的代碼標記是設置文字滾動的方向，在瀏覽器中預覽效果，第一段文字是向下滾動的，第2段文字是向上滾動的，如圖5.11所示。
圖5.11 滾動文字效果
5.3.3 滾動方式behavior
除了可以設置滾動方向外，還可以通過behavior屬性來設置滾動方式，如循環運動等。
基本語法：
<marquee behavior="滾動方式">…</marquee>
語法介紹：
滾動方式behavior的取值如表5.3所示。
表5.3 滾動方式的設置
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<marquee direction="down" behavior="scroll">和風細雨下，萬物開始復蘇，小草們破土而出，努力地探出了毛茸茸的腦袋，睡眼惺忪地打量著眼前這個全新的世界。河堤邊、廣場里的垂柳們，也在光禿禿的枝丫上，吐出了點點新蕊，眼見著那一點點新蕊，從圓圓的米粒樣開始，一天天慢慢地變大，一天天慢慢地舒展開來，一天天慢慢地由嫩綠色變成了淺綠色，再一天天慢慢地隨風搖曳婀娜的身姿，也一天天慢慢地帶給我滿心的歡喜。</marquee><br />
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是設置滾動的方式，在瀏覽器中預覽循環滾動效果，如圖5.12所示。
圖5.12 循環滾動效果
5.3.4 滾動次數loop
默認情況下會不斷地循環下去，如果希望滾動幾次停止，可以使用loop設置滾動次數。
基本語法：
<marquee loop="循環次數">…</marquee>
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body><marquee direction="up" loop="5">
很欣喜的，我看到了花兒們的美麗，感受到了它們的勃勃生機，更聽到了它們對春天的深情呼喚。</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是設置滾動文字的循環次數，在瀏覽器中預覽循環5次的效果，如圖5.13所示。
圖5.13 設置循環的次數
5.3.5 滾動速度scrollamount
可使用scrollamount設置滾動的快慢。
基本語法：
<marquee scrollamount="滾動速度">…</marquee>
語法介紹：
滾動的速度實際上是設置滾動每次移動的長度，以像素為單位。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body><marquee direction="up" behavior="scroll" scrollamount="5">
那些美麗的花兒，濃郁燦爛，為春天奉獻了愛，為世間奉獻了自己。它們，熱烈地開在自己的世界里，開在明媚的春光里，開在襲人的寒氣里，也永遠開在我驅走寒冬，迎來希望的溫和靜謐的心里。</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是設置滾動的速度，在瀏覽器中預覽將scrollamount設置為5的效果，如圖5.14所示。
圖5.14 滾動的速度效果
5.3.6 滾動延遲scrolldelay
可以使用scrolldelay設置滾動的時間間隔。
基本語法：
<marquee scrolldelay="時間間隔">…</marquee>
語法介紹：
scrolldelay的時間間隔單位是毫秒。如果設置的時間比較長，會產生走走停停的效果。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<marquee direction="up" scrollamount="5"scrolldelay="100">
<p>碧玉妝成一樹高</p>
<p>萬條垂下綠絲絳</p></marquee>
<marquee direction="left" scrollamount="5"scrolldelay="200">
<p>不知細葉誰裁出</p>
<p>二月春風似剪刀</p></marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標記是設置滾動的延遲時間，在瀏覽器中預覽，上面的一段將延遲時間設置為100毫秒，下面的一段設置為200毫秒，效果如圖5.15所示。
圖5.15 延遲的效果
5.3.7 滾動區域的背景顏色bgcolor
在網頁中，為了突出某部分內容，常常使用不同的背景色來顯示。可以使用bgcolor設置滾動背景顏色。
基本語法：
<marquee bgcolor="背景顏色">…</marquee>
語法介紹：
滾動背景顏色設置為十六進制值的顏色。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body><marquee direction="up" scrollamount="3" bgcolor="#889966">
壯志雄略握心中，芳名千古年少夢。三年五載始爭雄，志大才盛方為贏。輾轉泥濘夜難眠，心酸孤意常相伴。乘風破浪終有時，青春雖逝業輝煌。</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記設置了滾動文字的背景，在瀏覽器中預覽，滾動文字后面的背景呈綠色，如圖5.16所示。
圖5.16 滾動背景顏色效果
5.3.8 滾動背景寬度width和高度height
如果不設置滾動背景的面積，默認情況下，水平滾動的文字背景與文字同高、與瀏覽器窗口同寬，使用width和height參數可以調整其水平和垂直的范圍。
基本語法：
<marquee width="背景寬度" height ="背景高度">…</marquee>
語法介紹：
此處設置的寬度和高度的單位均為像素。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body><marquee direction="up" scrollamount="3" width="200" height="300">
我把陽光還給陽光，讓驕傲的驕傲，今夜琴子只屬于她自己。一切都在生長。今夜我只有美麗的月光，靜靜，哥哥，今夜我不關心人類，我只想你。</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是設置滾動效果的寬度和高度，在瀏覽器中預覽，可以看到將寬度設置為200像素、高度設置為300像素的效果，如圖5.17所示。
圖5.17 滾動文字的范圍
5.3.9 設置空白空間hspace、vspace
默認情況下，滾動對象周圍的文字或圖像是與滾動背景緊密連接的，使用hspace和vspace可以設置它們之間的空白空間。
基本語法：
<marquee hspace="水平范圍" vspace="垂直范圍">…</marquee>
語法介紹：
該語法中水平和垂直范圍的單位均為像素。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<marquee direction="up" scrollamount="3" bgcolor="#fff666"
hspace="50" vspace="40">
走出大學校門，踏入工作崗位。英雄不問出處，為青</span>春而戰，也許是真誠感動了上蒼，催生了理想的嫩芽。我很敬仰這里的人們，辛勤的汗水，敏銳的目光。
</marquee>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記中設置了空白空間效果，在瀏覽器中預覽，如圖5.18所示。
圖5.18 空白空間效果
5.4 多媒體標簽
embed可以用來插入各種多媒體，格式可以是MIDI、WAV、AIFF、AU、MP3等，Netscape及新版的IE都支持。embed標簽用于播放一個多媒體對象。
基本語法：
<embed src="url" loop="true | false" autostart="true | false" width="多媒體的寬度"height="多媒體的高度"></embed>
語法介紹：
（1）scr指定多媒體文件的URL來源，即其路徑，可以是相對路徑或絕對路徑。為必選屬性。
（2）loop指定聲音文件的循環播放次數，值為true表示可循環播放無限次，值為false表示只播放一次，false為默認值。
（3）autostart指定多媒體文件在下載后是否自動播放。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<embed src="flash.swf" width="780" height="400"></embed>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標記是插入多媒體，在瀏覽器中預覽插入的Flash動畫效果，如圖5.19所示。
圖5.19 插入Flash動畫效果
提示：考慮到網速問題，一般多媒體文件不能太大。
5.5 課后習題
1.填空題
（1）默認情況下，圖像是沒有邊框的，通過______屬性可以為圖像添加邊框線。可以設置邊框的寬度，但邊框的顏色是不可以設置的。
（2）在網頁中，為了突出某部分內容，常常使用不同的背景色來顯示。可以使用______設置滾動背景顏色。
2.操作題
插入圖像并添加背景音樂，效果如圖5-20所示。
圖5-20 插入圖像并添加背景音樂效果
- Flask Blueprints
- Learning Apex Programming
- 前端跨界開發指南：JavaScript工具庫原理解析與實戰
- Cocos2d-x游戲開發：手把手教你Lua語言的編程方法
- Developing Mobile Web ArcGIS Applications
- Python數據分析（第2版）
- Amazon S3 Cookbook
- Python面向對象編程：構建游戲和GUI
- Integrating Facebook iOS SDK with Your Application
- Frank Kane's Taming Big Data with Apache Spark and Python
- Building Wireless Sensor Networks Using Arduino
- Couchbase Essentials
- Visual FoxPro 6.0程序設計
- 微信小程序開發實戰：設計·運營·變現（圖解案例版）
- ActionScript 3.0從入門到精通（視頻實戰版）