原標題：IT兄弟連 HTML5教程 多媒體應用 創建圖像和鏈接

指引

多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。在本章中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。本章包含三個小結，包括創建圖像和鏈接，如何制作HTML圖像地圖還有HTML5新增的多媒體播放元素：音頻(audio)和視頻(video)。

1 創建圖像和鏈接

圖像和超鏈接極大地豐富了HTML文檔的表現形式。我們看到的豐富多彩的Web頁面，都是因為有了圖像。而超鏈接是網站的靈魂，可以實現訪問其他Web頁面的功能。在互聯網上，圖像和鏈接則是通過URL唯一確定信息資源的位置。URL分為絕對URL和相對URL。當所需資源在遠程主機上時，需要使用絕對URL；而當資源在本機上時，可以只提供文件名部分，這就是相對URL。

1.1 URL概述

我們在瀏覽器的地址欄里輸入的網站地址叫作URL(Uniform Resource Locator，統一資源定位符)，是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置及瀏覽器應該怎么處理它。URL的格式為：

http:///[端口號]/[路徑][?]

URL就像每家每戶都有一個門牌地址一樣，每個網頁也都有一個Internet地址。當用戶在瀏覽器的地址欄中輸入一個URL或是單擊一個超鏈接時，URL就確定了要瀏覽的地址，然后通過HTTP將Web服務器上站點的網頁代碼提取出來，并翻譯成漂亮的網頁。例如，http://www.ydma.cn/book/ index.html，它的含義如下。

?　http://：代表超文本傳輸協議，通知ydma.cn服務器顯示Web頁，通常不用輸入。

?　www：代表一臺Web(萬維網)服務器。

?　ydma.cn/：這是裝有網頁的服務器的域名，或站點服務器的名稱。

?　book/：是該服務器上的子目錄，就好像我們的文件夾。

?　index.html：是文件夾中的一個HTML文件，也就是網頁。

?　如果使用默認端口80可以不寫，如果使用非80端口則必須在URL中指定。

URL的第一部分http://表示的是要訪問的文件的類型。有時也使用ftp，意為文件傳輸協議，主要用來傳輸軟件和大文件(許多做軟件下載的網站就使用ftp作為下載的網址)；還有用telenet(遠程登錄)的，主要用于遠程交談，以及文件調用等，意思是瀏覽器正在閱讀本地盤外的一個文件，而不是一臺遠程計算機。

1.2 插入圖片

在Web頁面中通常使用3種格式的圖片，即JPEG、GIF和PNG。通過使用標記在瀏覽器中顯示一張圖像，其語法格式如下所示：

上面給出標記常用的一些屬性，其中src屬性用于指定一個包含URL路徑名的圖像文件。alt屬性用于定義一個字符串。的alt屬性不可以缺少，它有3個作用：當瀏覽該網頁時，如果圖像下載完成，將鼠標放在該圖像上，稍等片刻，鼠標旁邊會出現這個屬性指定的提示文字；如果圖像沒有被下載，在圖像的位置上就會顯示該屬性指定的提示文字；搜索引擎可以通過這個屬性的文字抓取該圖片。width和height兩個屬性分別用于指定圖像的寬度和高度，單位為像素；如果需要等比例縮放，只需使用一個即可。border屬性用于指定圖像邊界的寬度，單位為像素。標記在網頁中的使用如下所示：

本例在網頁中使用標記分別插入4張圖片，并且都使用src屬性通過相對URL指定圖像文件的位置。圖1是插入圖片后頁面的顯示效果，默認情況下文字和圖片處于同一行。

圖1 使用HTML圖像標簽插入圖片的顯示結果

1.3 建立錨點和超鏈接

Web上的網頁是互相鏈接的，單擊被稱為超鏈接的文本或圖形就可以鏈接到其他頁面。超文本具有的鏈接能力，可層層鏈接相關文件，這種具有超鏈接能力的操作，稱為超鏈接。超鏈接除了可鏈接文本，也可鏈接各種媒體，如聲音、圖像、動畫，通過它們，我們可以享受豐富多彩的多媒體世界。鏈接文檔中的特定位置也稱為錨點。在瀏覽頁面時如果頁面很長，要不斷地拖動滾動條，給瀏覽帶來不便。如果瀏覽者可以從頭閱讀到尾，又可以選擇自己感興趣的部分閱讀，這種效果可以通過兩個錨點間的一種鏈接關系來實現。定義錨點和超鏈接都使用標記，其基本語法格式如下所示：

鏈接文字

上面給出標記常用的一些屬性，其中href屬性指定所鏈接文件的URL路徑。name屬性指定頁面的錨點名稱。如果需要鏈接到對應的錨點位置，則需要在錨點名前加一個“#”字符。target屬性指定要打開的鏈接所使用的瀏覽器窗口名稱。可以使用自定義的窗口名稱，也可以使用下面4個內置的窗口名稱。

?　_self：在當前窗口中打開鏈接文件，是默認值。

?　_blank：開啟一個新的窗口打開鏈接文件。

?　_parent：在父級窗口中打開文件，常用于框架頁面。

?　_top：在頂層窗口中打開文件，常用于框架頁面。

下面是一段定義錨點和超鏈接的示例代碼，使用了文字鏈接和圖片鏈接，以及通過相對URL和絕對URL分別鏈接本地文件和遠程文件。

將上包含上述代碼的html文件在瀏覽器中打開，效果如圖2所示：

圖2 錨點和超鏈接返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。