HTML-圖片標籤學習

這個賬號呢我們要做一個計算機語言的基礎教程，我們會盡量做到簡單易懂，從最基礎的入門開始，讓想學習計算機語言的朋友可以入門到這個領域。

上一個章節我們講了HTML的列表標籤，這一節我們學習一下HTML的圖片標籤。當你開啟一個網頁，如果都是密密麻麻的文字，那閱讀起來肯定是很累的，要是配上精美的配圖或者是和網頁新聞相關的照片，不僅美觀易讀，網頁想要表達的內容也更加直觀，容易理解，網友常說的“有圖有真相”就表明了大家喜歡好看直觀的網頁。那麼，我們怎麼把一張圖片素材顯示到網頁上呢，使用標籤就可以實現。

img 元素向網頁中嵌入一幅影象。請注意，從技術上講， 標籤並不會在網頁中插入影象，而是從網頁上鍊接影象。 標籤建立的是被引用影象的佔位空間。所以我們先來找一張圖片（下圖為鬱金香照片），這張圖片的檔名稱是eg_tulip。jpg：

標籤有兩個必需的屬性，src和alt。src規定顯示影象的 URL， src 屬性是必需的，它的值是影象檔案的 URL，也就是引用該影象的檔案的的絕對路徑或相對路徑；alt 屬性也是一個必需的屬性，它規定在影象無法顯示時的替代文字。在下面的例子中，我們在頁面中插入這幅鬱金香照片：

原始碼（ eg_tulip。jpg被放在和HTML文件同級目錄下的img資料夾中）：

瀏覽器顯示效果：

那麼，alt 屬性的顯示效果是怎樣的呢？如果無法顯示影象，比如說網速太慢、src 屬性中的錯誤、瀏覽器禁用影象等情況下瀏覽器將顯示替代文字，就像這樣：

接下來我們再看看標籤的常見幾個屬性：

Width屬性設定圖片的寬度， height屬性設定圖片的高度，如果是單獨設定，則在圖片保證不失真的情況下自動縮小或者放大，單位可以是px也可以是百分比，px佔用的是螢幕相對大小，百分比佔用瀏覽器顯示畫面的相對大小；

title屬性是圖片標題，滑鼠放在圖片上的時候會顯示；

另外，src也可以直接引用網路資源；

以下我們用程式碼例子看一下效果：

瀏覽器執行效果，可以看到第5張圖片因為加了title屬性，滑鼠放上去會顯示圖片標題：

提示：為了整理文件的儲存，創作者通常會把影象檔案存放在一個單獨的資料夾中，而且通常會將這些目錄命名為 “pics” 或者 “images” 之類的名稱，這樣做的好處是可以最大程度地簡化路徑。

以上就是本章的內容，歡迎關注科技現象，我們會整理學習計算機語言方面最基礎的知識給大家，方便大家學習和查閱，共同讓計算機給我們工作生活提供更好的服務。