1、第 4 章 圖像、多媒體與超鏈接網頁基礎-HTML上章回顧 標簽為其中的文本加上刪除線，格式標簽基 本上是一種視覺效果。 標簽用于在HTML文檔中設定換行，此標簽不需要 結束標簽。 標簽用于設置一種特殊的文本顯示效果，使 元素呈現動態的、滾動的特效。 HTML文檔中的列表類型有三種：無序列表、有序列表、 定義列表。 start屬性指定列表的起始編號。 了解HTML文檔中常用圖像格式 掌握圖片在HTML文檔中的應用 在網頁中添加多媒體 理解絕對路徑與相對路徑 掌握HTML文檔中的超鏈接本章進階網頁中常用的圖像格式 能夠被大多數瀏覽器接受的主流圖片格式有三種 GIF圖像 JPEG圖像 PNG圖像G

2、IF圖像GIF圖像的特點 支持背景透明 支持動畫 支持圖形漸進 支持無損壓縮 最大的缺點是只有256種顏色 JPEG圖像 JPEG圖像的特點 支持上百萬種顏色，適合照片。 使用更有效的有損壓縮算法。 高壓縮比，方便了網絡傳輸和磁盤交換文件。 有損壓縮對圖像會產生不可恢復的損失，不支 持圖形漸進、背景透明、動畫。PNG圖像 PNG圖像的特點 支持256種顏色的彩色圖像 允許連續讀出和寫入圖像數據 逐次逼近顯示特性 支持透明 平臺無關性 使用無損壓縮在網頁中插入圖像 標簽用于將圖片插入HTML文檔中，此標簽沒有結束標簽。 在HTML文檔中使用圖像 小狗的家 頂部對齊 圖形標簽 圖形標簽的主要屬性

3、src 指定圖像文件的位置。 width、height 設定圖片大小，此寬度、高度一 般采用像素作單位。 hspace、 vspace 設定圖片邊沿空白，以免文字或 其它圖片過于貼近，采用像素作單位。 border 用于設定圖片邊框的厚度，以像素作單位。 align 調整圖片旁邊文字的位置。 alt 用以描述該圖片的文字。使用背景圖像 通過使用標記的background屬性可以將圖片設置為文檔的背景。 在HTML文檔中使用圖像 關于人生 今天看書，看到康熙皇帝在二十三歲的時候已經貴為一國之君，績偉功豐，我很沮喪。但又看到同治皇帝在二十三歲時已經死了四年了，我平衡了。 如果圖像小于文檔的顯示區域

4、，則會以平鋪圖像的形式填充顯示區域。 網頁中的背景音樂 在網頁中經常使用的音頻格式 MIDI格式 HTML文檔中音樂文件的標準格式，具有很 好的聲音品質。 WAV格式 作為最經典的Windows多媒體音頻格式，應 用非常廣泛，聲音品質較好。 MP3格式 是一種壓縮格式，可以縮小聲音文件的容 量，其聲音品質非常好。網頁中的背景音樂 標簽可以用于插入背景音樂，但只 有IE瀏覽器支持。 例如，。 使用標簽添加聲音到網頁上，是一種 使用內嵌對象的方式。 例如， 網頁中的背景音樂 標簽的主要屬性 align 嵌入對象的對齊方式 width、height 嵌入對象的寬度、高度 src 聲音文件的路徑 au

5、tostart 音頻文件下載后是否自動播放 loop 是否循環播放 hidden 是否顯示嵌入對象IE瀏覽器支持標簽播放次數的屬性是playcount在網頁中插入視頻 在HTML文檔中插入視頻 網頁中的超鏈接 超鏈接允許用戶在不同計算機中的文檔之間 及文檔內部漫游。 創建超鏈接，需要指定兩個重要部分 提供鏈接的對象（鏈接的起點） 目標文件的完整地址或URL（鏈接到達終點的途徑）絕對路徑與相對路徑 計算機中表示文件位置的方式就是路徑 絕對路徑與相對路徑 硬盤上磁盤根目錄下，完整的描述文件位置 的路徑就是絕對路徑。 例如：“D:圖片歌星周杰倫.jpg” 相對路徑就是指由一個文件（或文件夾）所 在的

6、路徑引起的跟其它文件(或文件夾)的路 徑關系。 例如：如果當前目錄是“圖片”文件夾，則文件“周杰 倫.jpg”的相對路徑為“歌星周杰倫.jpg”。 對于URL，也有絕對和相對的概念。超鏈接標簽 錨標簽用于標識HTML文檔中提供鏈接 的對象（文本或圖片） href屬性用于指定到達目標對象的路徑錨標簽指定了需要創建超鏈接的兩個部分文檔的超鏈接 從一個文檔到另一個文檔 文檔的超鏈接 周杰倫無疑是一個成功的歌手，但近日，美國最新一期Fast Company雜志策劃“商場中最有創意的100人”特刊，卻看上了他，將他與Lady Gaga、jay-z三名歌手入榜。周董同時也是唯一上榜的華語藝人。 start

7、.html文檔的超鏈接 文檔的超鏈接 Fast Company：美國最富盛名和最具影響力的商業雜志之一，與財富、商業周刊、華爾街日報等媒體成為美國乃至世界商業（經濟）領域的主流媒體。Fast Company雜志每年會在全球范圍內尋找具有創造性商業理念、增長速度快、具備一定社會公益性的企業（或個人）通過資深的專業記者的投票評選出50名年度企業或個人，稱為“Fast 50”。返回 end.html文檔的超鏈接 從文檔的一個部分到另一個部分 命名錨標簽name屬性 主題名稱 href屬性用于標識路徑 主題名稱 鏈接地址中的#說明該鏈接是文檔中的命名點，由于#號之前未指定任何文檔，瀏覽器就可以識別出該

8、鏈接是在同一文檔內。文檔的超鏈接 文檔的超鏈接 貓頭鷹 火烈鳥 紅狐文檔的超鏈接貓頭鷹北美和南美最普通的貓頭鷹巨角貓頭鷹是任勞任怨的好丈夫和勤勤懇懇的好父親。冬末時分，雌性巨角貓頭鷹會一直呆在巢里孵化2到3枚卵，這時雄性巨角貓頭鷹負責尋找食物，喂養伴侶，它經常從很遠的地方把老鼠、田鼠和松鼠帶回巢穴，供負責孵卵的雌鳥享用。幼鳥破殼而出以后，它的任務變得更加艱巨，從此它還要肩負起喂養幼鳥的工作。火烈鳥雄火烈鳥既是忠誠的丈夫，又是關心后代的好父親。它們經常許許多多聚集在一起生活，但是火烈鳥通常一生都遵守一夫一妻制。雄火烈鳥在配偶的領導下，挑選出筑巢位置，然后用泥巴筑巢。雌鳥一次只產一枚卵，它們輪流孵

9、卵和保衛家園，它們共同承擔養育后代和孵化小鳥的責任。紅狐雄性紅狐是一個非常警覺的父親，它們經常陪幼崽一起玩耍，并獨自一人承擔尋找食物，養活家人的任務。小狐貍出生3個月后，父親的養育任務結束，年輕小狐貍開始自己尋找食物。然而父親不會眼睜睜看著它們挨餓，它會把食物藏在小狐貍附近，教它們如何發現食物。 文檔的超鏈接 從一個文檔到另一個文檔的某個位置 文檔的超鏈接 貓頭鷹 火烈鳥 紅狐 title.html文檔的超鏈接 文檔的超鏈接 貓頭鷹北美和南美最普通的貓頭鷹巨角貓頭鷹幼鳥破殼而出以后，它的任務變得更加艱巨，從此它還要肩負起喂養幼鳥的工作。火烈鳥雄火烈鳥既是忠誠的丈夫，又是關心后代的好父親它們共同承擔養育后代和孵化小鳥的責任。紅狐雄性紅狐是一個非常警覺的父親教它們如何發現食物。 content.html超鏈接與電子郵件 使用電子郵件 我的E-MAIL 超鏈接與文件下載 文件下載 電子書 動物世界-十大杰出的 父親 圖片與超鏈接 圖片與超鏈接 內部鏈接和外部鏈接 內部鏈接是指同一網站頁面之間的互相鏈 接，所以也可以稱之為站內鏈接。 外部鏈接是到其它網站或服務器上的頁面 的鏈接。 鏈接的頁面以什么樣的形式展現出來，是 由target屬性指定的。本章總結 HTML文檔中被大多數瀏覽器接受的主流圖片格式有三種 GIF圖像、JPEG圖像、PNG圖像。 使用標記