原標(biāo)題：IT兄弟連 HTML5教程 多媒體應(yīng)用 創(chuàng)建圖像和鏈接

指引

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

1 創(chuàng)建圖像和鏈接

圖像和超鏈接極大地豐富了HTML文檔的表現(xiàn)形式。我們看到的豐富多彩的Web頁面，都是因?yàn)橛辛藞D像。而超鏈接是網(wǎng)站的靈魂，可以實(shí)現(xiàn)訪問其他Web頁面的功能。在互聯(lián)網(wǎng)上，圖像和鏈接則是通過URL唯一確定信息資源的位置。URL分為絕對URL和相對URL。當(dāng)所需資源在遠(yuǎn)程主機(jī)上時，需要使用絕對URL；而當(dāng)資源在本機(jī)上時，可以只提供文件名部分，這就是相對URL。

1.1 URL概述

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

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

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

?　http://：代表超文本傳輸協(xié)議，通知ydma.cn服務(wù)器顯示W(wǎng)eb頁，通常不用輸入。

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

?　ydma.cn/：這是裝有網(wǎng)頁的服務(wù)器的域名，或站點(diǎn)服務(wù)器的名稱。

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

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

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

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

1.2 插入圖片

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

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

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

圖1 使用HTML圖像標(biāo)簽插入圖片的顯示結(jié)果

1.3 建立錨點(diǎn)和超鏈接

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

鏈接文字

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

?　_self：在當(dāng)前窗口中打開鏈接文件，是默認(rèn)值。

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

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

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

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

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

圖2 錨點(diǎn)和超鏈接返回搜狐，查看更多

責(zé)任編輯：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。