【正文】 使用時有些事項必須注意。 (1)超級鏈接元素與所有其他 HTML元素一樣，可以嵌套使用，不過瀏覽器只識別在嵌套最里層的超級鏈接，請看下面的例子： a href=“”a href=“”例題/a/a 雖然為 “ 例題 ” 指定了兩個超級鏈接，但是有用的只是最里面的那個。當單擊超級鏈接時，只會鏈接到“ ”網(wǎng)頁。 數(shù)學與計算機科學技術學院 (2)在超級鏈接元素里還可以包含其他 HTML元素，如以下代碼： a href= color=red已訪問過的超級鏈接 /font/a 在上面這行代碼里，超級鏈接元素里還包含了一個 font元素。前面學過，超級鏈接元素里有 link、 vlink和 alink這 3種屬性，不同的屬性顏色不同。但如果在超級鏈接元素里包含了 font元素之后，這 3種屬性就失效了，只會顯示 font元素指定的顏色屬性。本例中超級鏈接只會顯示紅色，無論是訪問過的網(wǎng)頁鏈接還是沒有訪問過的網(wǎng)頁鏈接。 (3)反過來，如果在 font元素里包含超級鏈接元素， font元素里的顏色屬性也會失效。如以下代碼只會顯示超級鏈接的 link和vlink屬性，而不會顯示紅色： font color=reda href=超級鏈接 /a/font 數(shù)學與計算機科學技術學院 簡單一點說，當 HTML元素屬性有沖突時，最里層的屬性有效。請看以下代碼 html head title使用超鏈接的注意事項 /title/head body a href=a href=超級鏈接嵌套之后只能識別最里層的鏈接 /abr a href= color=teal已訪問過的超級鏈接 /font/abr a href= color=teal未訪問過的超級鏈接 /font/abr font color=teala href=超級鏈接 /a/fontbr font color=teala href=級鏈接 /a/fontbr /body /html 數(shù)學與計算機科學技術學院 HTML中的圖片 在一個漂亮的網(wǎng)頁上面，永遠不可能缺少圖片，圖片可美化網(wǎng)頁，越是漂亮的網(wǎng)頁，才越能吸引眼球。制作網(wǎng)頁的目的就是給人看，制作漂亮的網(wǎng)頁的目的就是給更多人看。下面介紹如何在網(wǎng)頁里插入圖片以及設置其相關屬性，通過學習，再加以靈活應用，就可以創(chuàng)建漂亮的網(wǎng)頁。 數(shù)學與計算機科學技術學院 在 HTML里可以通過 img元素來插入圖片，其語法代碼為： img src=URL alt=替代文本 name=名字 width=寬度 height=高度 border=邊框 align=對齊方式 ID=編號 數(shù)學與計算機科學技術學院 img元素里的屬性很多，常用的有 8種，其解釋如下所示。 ◆ src：用于指定圖片所在位置，可以是相對路徑或絕對路徑。 ◆ alt：指定用于替代圖片的文本，當圖片不能正常顯示時，可以使用該文本替代圖片。 ◆ width：指定圖片的寬度。 ◆ height：指定圖片的高度。 ◆ border：指定圖片的邊框大小。 ◆ align：用于設置圖片的環(huán)繞方式。 ◆ name：圖片的名稱，很多時候可以省略。 ◆ id：圖片的編號，也可以省略。在同一個 HTML文檔里不允許出現(xiàn)相同的 id，但可以出現(xiàn)相同的 name。 數(shù)學與計算機科學技術學院 圖片位置 在使用 img元素插入圖片時一定要指明圖片所在的位置，即， img標簽里必須包括 src屬性。 src屬性用于指定圖片的位置，其值可以是絕對路徑或相對路徑。 數(shù)學與計算機科學技術學院 html head title插入圖片 /title/head body p 下面是一個美麗的風景 :br img src=img/ /p p 下面是一個互聯(lián)網(wǎng)上的圖片 :br img src= /p p 下面是一個地址錯誤的圖片 :br img src=“ /p /body /html 數(shù)學與計算機科學技術學院 設置圖片大小 使用 img元素的 width屬性與 height屬性可以設置圖片的大小，可以對圖片進行簡單的縮放。請看以下代碼 ： 數(shù)學與計算機科學技術學院 html headtitle縮放圖 /title/head body p 原圖大小 :br img src=img/ /p p 圖片縮小 :br img src=img/ width=200 height=200 /p p 圖片放大 :br img src=img/ width=600 height=“100% /p /body /html 數(shù)學與計算機科學技術學院 使用 width屬性與 height屬性雖然可以將原圖放大或縮小，但這種作法也有缺陷： (1)使用 width屬性與 height屬性將原圖放大或縮小時，并沒有改變圖本身的精度，假設原圖為 256色，大小為 10KB，縮小后該圖還是 256色，大小也還是 10KB，即使把圖縮小了，下載圖片的速度還是一樣，并不會因為圖縮小后就可以下載得快些。 (2)如果圖片放大了，其精度也沒有放大，因此放得越大的圖片就會越模糊不清。如果一定要在網(wǎng)頁上放個縮小的圖片，那么最好用圖像處理軟件把圖片真正縮小后再按原大小放置，這樣下載圖片的速度會快些；如果要在網(wǎng)頁上放置放大的圖片，也最好放置一個精度大一點的圖片，這樣圖片看起來不會模糊。 數(shù)學與計算機科學技術學院 設置圖片的邊框 通常在網(wǎng)頁上顯示圖片時，是不會為其加上一個邊框的，但如果該圖片本身又是一個超級鏈接，瀏覽器就會自動為其增加一個邊框，以提醒瀏覽者該圖片是一個可以單擊的超級鏈接。不過該邊框常常會影響圖片的顯示效果，因此可以通過 img元素的 border屬性來去掉該邊框。當然，也可以人為地為圖片增加一個邊框，請看以下代碼 數(shù)學與計算機科學技術學院 html headtitle圖片的邊框 /title/head body a href= image src=img//a 原圖 :br img src=img/ 邊框為 2的圖 :br img src=img/ border=2 邊框為 10圖 :br img src=img/ border=10 /body /html 數(shù)學與計算機科學技術學院 使用文本說明 在某些情況下，如用戶禁止瀏覽器顯示圖片、網(wǎng)速過慢無法下載圖片、圖片的 URL出錯等，在瀏覽器窗口里將無法顯示圖片，此時瀏覽者將無法知道圖片是什么內容，如果圖片所表達的是一些重要信息，那么這些信息可能會被瀏覽者忽略。使用 img元素的 alt屬性可以為圖片指定文本說明，當圖片無法顯示或用戶禁止顯示圖片時，可以用該文字來替代圖片顯示在瀏覽器中。 數(shù)學與計算機科學技術學院 html head title圖片的文字說明 /title/head body 沒有指定寬度的圖 :br img src=img/ alt=可美麗的風景 br 指定寬度的圖 :br img src=img/ width=200 height=150 alt=可美麗的風景 br 指定寬度過小的圖 :br img src=img/ width=50 height=50 alt=可美麗的風景 br /body /html 數(shù)學與計算機科學技術學院 圖片的對齊方式 在 HTML里可以設置文字環(huán)繞圖片，與傳統(tǒng)媒體一樣，讓文字在圖片左側環(huán)繞或右側環(huán)繞，img元素的 align屬性就是用于設置這種環(huán)繞方式的。在 HTML 為 align指定了 5個三屬性值： left、 right、top、 middle和 bottom，其代表含義分別為左對齊、右對齊、頂部、中間和底部對齊方式。 數(shù)學與計算機科學技術學院 水平對齊方式 align的屬性值為 left、 right時可以設置圖片的水平對齊方式，其中 align的屬性值為 left時，圖片位于文字左側， align的屬性值為 right時，圖片位于文字的右側， 數(shù)學與計算機科學技術學院 html head title圖片的水平對齊方式 /title /head body 以下是左對齊方式 :br img src=img/ align=left width=200 height=150 alt=可美麗的風景 br 春 曉 br 春眠不覺曉，處處聞啼鳥。 br 夜來風雨聲，花落知多少。 br clear=all hr 以下是右對齊方式 :br img src=img/ align=right width=200 height=150 alt=可美麗的風景 br 春 曉 br 春眠不覺曉，處處聞啼鳥。 br 夜來風雨聲，花落知多少。 br /body /html 數(shù)學與計算機科學技術學院 垂直對齊方式 align屬性除了可以設置水平位置上的對齊方式之外，還可以設置垂直方向的對齊方式。 當 align屬性值為 top、 middle或 bottom時，設置圖片在垂直位置上的對齊方式，其中 align屬性值為 top時是頂部對齊方式，為 middle時是中間對齊方式、為 bottom時是底部對齊方式。 數(shù)學與計算機科學技術學院 html head title圖片的垂直對齊方式 /title /head body 以下是頂部對齊方式 :br img src=img/ align=top width=200 height=150 alt=可美麗的風景 春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。 hr 以下是中間對齊方式 :br img src=img/ align=middle width=200 height=150 alt=可美麗的風景 春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。 hr 以下是底部對齊方式 :br img src=img/ align=bottom width=200 height=150 alt=可美麗的風景 春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。 /body/html 數(shù)學與計算機科學技術學院 數(shù)學與計算機科學技術學院 設置圖片鏈接 為圖片設置鏈接有兩種方式，一種是將整個圖片設置鏈接，只要單擊該圖片，就可以跳轉到鏈接的 URL上。另一種是將圖片劃分為多個區(qū)域，單擊圖片不同的位置將會跳轉到不同的鏈接之上。 數(shù)學與計算機科學技術學院 html head title圖片的鏈接 /title /head body a href= title=人民郵電出版社 img src=img/ /abr a href= title=人民郵電出版社 target=_blank img src=img/ border=0 /abr a href= title=人民郵電出版社 target=_blank img src=img/ border=0br西華大學 /a /body /