超鏈接
★超鏈接簡單介紹
超鏈接可以說是網頁中最常見的元素。超鏈接的英文名是hyperlink。每個網站都是由眾多的網頁組成，網頁之間通常都是通過鏈接的方式相互關聯的。
超鏈接能夠讓瀏覽者在各個獨立的頁面之間方便的跳轉。超鏈接的范圍很廣，可以將文檔中的任何文字及任何位置的圖片設置為超鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
超鏈接有外部鏈接，內部鏈接，電子郵件鏈接，錨點鏈接，空鏈接，腳本鏈接等。
⑴a標簽
①a標簽簡介
❶在HTML中，超鏈接使用a標簽來表示。a標簽是非常常見的而簡單的標簽。
❷語法：<a href="鏈接地址">超鏈接文字</a>
href屬性表示鏈接的地址，也就是點擊超鏈接之后跳轉的地址。
❸示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超鏈接a標簽</title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com">百度一下</a> 9 </body> 10 </html>
效果圖：
②a標簽的target屬性
☆在創建網頁中，默認情況下超鏈接在原來的瀏覽器窗口打開，但是我們可以使用target屬性來控制目標窗口的打開方式。
☆語法：<a herf="鏈接地址" target="目標窗口的打開方式">超鏈接文字</a>
☆a標簽的target屬性取值有4個：
屬性值 語義
_self 默認方式，即在當前窗口打開鏈接
_blank 在一個全新的空白窗口打開鏈接
_top 在頂層框架中打開鏈接
_parent 在當前框架的上一層里打開鏈接
☆示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超鏈接a標簽</title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" target="_blank">百度一下</a> 9 <p>如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。</p> 10 </body> 11 </html>
效果圖：
⑵內部鏈接
☆內部鏈接指的是超鏈接的鏈接對象是在同一個網站中的資源。與自身網站頁面有關的鏈接被稱為內部鏈接。
☆首先我們建立一個站點text，在站點下建立三個頁面，這三個頁面都在同一個根目錄下，我們想要在網頁1中點擊超鏈接就跳轉到網頁2或者網頁3，這就是“內部鏈接”。
代碼及效果圖如下所示：
⑶錨點鏈接
☆在HTML中，錨點鏈接是一種內部鏈接，它的鏈接對象是當前頁面的某個部分。
☆有些網頁內容比較多，導致頁面過長，訪問者需要不停地拖動瀏覽器上的滾動條來查看文檔中的內容。為了方便用戶查看文檔中的內容，在文檔中需要建立錨點鏈接。
☆所謂的錨點鏈接，就是點擊某一個超鏈接，它就會跳到“當前頁面”的某一部分。
☆具體示例如下圖所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>錨點鏈接</title> 6 </head> 7 <body> 8 <div> 9 <a href="#music">推薦音樂</a> 10 <a href="#movie">推薦電影</a> 11 <a href="#article">推薦文章</a> 12 </div> 13 ......<br /> 14 ......<br /> 15 ......<br /> 16 ......<br /> 17 ......<br /> 18 ......<br /> 19 ......<br /> 20 ......<br /> 21 ......<br /> 22 ......<br /> 23 <div id="music"> 24 <h3>推薦音樂</h3> 25 <ul> 26 <li>周傑倫-告白的氣球</li> 27 <li>李榮浩-年少有為</li> 28 <li>薛之謙-認真的雪</li> 29 </ul> 30 </div> 31 ......<br /> 32 ......<br /> 33 ......<br /> 34 ......<br /> 35 ......<br /> 36 ......<br /> 37 ......<br /> 38 ......<br /> 39 ......<br /> 40 ......<br /> 41 <div id="movie"> 42 <h3>推薦電影</h3> 43 <ul> 44 <li>大魚海棠</li> 45 <li>哪吒之魔童降世</li> 46 <li>大聖歸來</li> 47 </ul> 48 </div> 49 ......<br /> 50 ......<br /> 51 ......<br /> 52 ......<br /> 53 ......<br /> 54 ......<br /> 55 ......<br /> 56 ......<br /> 57 ......<br /> 58 ......<br /> 59 ......<br /> 60 <div id="article"> 61 <h3>推薦文章</h3> 62 <ul> 63 <li>朱自清-荷塘月色</li> 64 <li>余光中-鄉愁</li> 65 <li>魯迅-阿Q正傳</li> 66 </ul> 67 </div> 68 </body> 69 </html>
效果圖如下所示：
☆在這個例子中，只要我們點擊“推薦音樂”，“推薦電影”，“推薦文章”這三個超鏈接，滾動條就會滾動到相應的版塊。
仔細看就能發現，錨點鏈接要定義兩個部分：目標錨點的ID和超鏈接。ID是元素的名稱，跟name屬性一樣。在同一頁面中，ID是唯一的，也就是一個頁面不允許出現相同的ID，所以使用ID屬性比較好。
㈡多媒體
⑴什么是多媒體？
多媒體來自多種不同的格式。它可以是聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。
Web 上的多媒體指的是音效、音樂、視頻和動畫。
確定媒體類型的最常用的方法是查看文件擴展名。多媒體元素元素帶有不同擴展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。
⑵HTML Object（對象）元素
★<object> 的作用是支持 HTML 助手（插件）。
輔助應用程序（helper application）是可由瀏覽器啟動的程序。輔助應用程序也稱為插件。
輔助程序可用於播放音頻和視頻（以及其他）。輔助程序是使用 <object> 標簽來加載的。
使用輔助程序播放視頻和音頻的一個優勢是，您能夠允許用戶來控制部分或全部播放設置。
大多數輔助應用程序允許對音量設置和播放功能（比如后退、暫停、停止和播放）的手工（或程序的）控制。
★在 HTML 中播放視頻的最好方式？
①使用 QuickTime 來播放 Wave 音頻
示例：
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="bird.wav" /> <param name="controller" value="true" /> </object>
②使用 QuickTime 來播放 MP4 視頻
示例：
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" /> <param name="controller" value="true" /> </object>
③使用 Flash 來播放 SWF 視頻
示例：
<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object>
④使用 Windows Media Player 來播放 WMV 影片
下面的例子展示用於播放 Windows 媒體文件的推薦代碼：
<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uiMode" value="full" /> <param name="autosize" value="1"> <param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>
⑶網頁中插入音頻和視頻
☆在網頁中，常見的多媒體文件包括音頻文件和視頻文件。對於在線音頻和視頻，我們往往都使用embed標簽來實現。
☆語法：<embed src="多媒體文件地址" width="播放頁面寬度" height="播放頁面的高度">
☆embed是HTML5新增的標簽，它是一個自閉合標簽。src屬性用於設置多媒體文件地址，一般情況下，都是用相對地址。
☆示例：插入音頻文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插入音頻文件</title> </head> <body> <embed src="media/music.mp3" width="400px" height="80px" /> </body> </html>
我們可以看到，使用embed標簽插入音頻文件還會有一個播放界面，界面上有幾個簡單的功能按鈕。
☆示例：插入視頻文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>插入視頻文件</title> 6 </head> 7 <body> 8 <embed src="media/littleApple.wmv" width="400px" height="80px" /> 9 </body> 10 </html>
☆使用embed標簽插入視頻，在瀏覽器中我們可以看到，瀏覽器提供了一個簡單的操作頁面。embed標簽支持的視頻格式很多，大部分主流格式都支持。
☆如果你使用embed標簽不能播放視頻，那就可能是視頻格式有問題或者編碼有問題。可以使用格式工廠等軟件工廠轉換一下格式。
☆有關的解決辦法可以參考下面這個鏈接，能提供更好的方法：
HTML 音頻 ：https://www.w3school.com.cn/html/html_audio.asp
HTML 視頻 ：https://www.w3school.com.cn/html/html_video.asp
⑷網頁中插入背景音樂
☆使用embed標簽為網頁添加背景音樂
☆語法：<embed src=" " hidden=" " autostart=" " loop=" " />
☆說明：src屬性定義了背景音樂的地址。
autostart屬性取值為true或false。取值為true時表示頁面一載入則自動播放，取值為false時表示頁面載入后不進行播放。
hidden屬性取值為true或false。取值為true時不顯示播放器，取值為false時顯示播放器。
loop屬性取值為true或false。取值為true時表示無限次播放（循環播放，取值為false時表示只播放一次。
☆示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網頁中插入視頻背景音樂</title> 6 </head> 7 <body> 8 <embed src="media/music.mp3" hidden="true" autstart="true" loop="true" /> 9 </body> 10 </html>
效果圖：
這里使用hidden屬性來將播放器隱藏，因此音樂變成了背景音樂。
⑸網頁中插入Flash
☆Flash是一種動畫技術，在網頁制作中常常會用到Flash，它可以實現一些較為復雜的動態效果，從而讓網頁的畫面更加生動。
☆在網頁中插入Flash也是使用embed標簽來實現。
☆語法：<embed src="多媒體文件地址" width="多媒體的寬度" height="多媒體的高度" />