html如何加圖片

HTML是一種標記語言，用於在網頁中建立文字、圖片、影片等內容。圖片是網頁製作中不可或缺的元素之一，如何正確地加入圖片，是每個網頁製作人員都需要掌握的技能。

一、基本語法

HTML中用img標籤來插入圖片，img的全名是“image”，也就是圖片的意思。下面是img標籤的基本語法：

<img src="图片文件路径" alt="图片描述">

img標籤有兩個主要的屬性：src和alt。 src是指圖片檔案的路徑，alt是指當頁面無法正常顯示圖片時，會顯示的文字說明。

其中，src屬性必須填寫，而alt屬性可有可無。如果圖片路徑不正確，則圖片將無法顯示。如果沒有設定alt屬性，則頁面上無法正常顯示圖片的地方可能會顯示出一串無意義的文字。

圖片路徑可以是本機路徑或網路路徑。本機路徑指的是儲存在本機上的圖片檔案的路徑；網路路徑指的是透過網路存取的圖片檔案的路徑，例如從網路上下載的圖片。

二、本機圖片的路徑

本地圖片的路徑分為絕對路徑和相對路徑兩種。絕對路徑指定的是整個檔案系統中的圖片位置，需要寫出完整的路徑；相對路徑則是以HTML檔案為起點的路徑描述，只需要寫出圖片相對HTML檔案的位置即可。

以下分別介紹兩種本地圖片路徑的寫法。

1. 絕對路徑

絕對路徑指的是圖片在整個檔案系統中的位置。根據作業系統不同，絕對路徑會稍有不同。在Windows系統中，絕對路徑從磁碟機開始，例如：

C:\Users\Administrator\Pictures\test.jpg

在Mac OS X系統中，絕對路徑從根目錄開始，例如：

/Users/username/Documents/test.jpg

這種方式的缺點是，每個網頁都必須使用完整的文件路徑，如果文件儲存位置改變，程式碼需要重新修改。

2. 相對路徑

相對路徑是指圖片相對於HTML檔案的位置。目錄結構越簡單，相對路徑越好用。在HTML檔案中，"."表示目前檔案所在的目錄，".."表示目前檔案所在的目錄的上一層目錄，如果圖片與HTML檔案處在同一目錄下，可以使用相對路徑表示，例如：

<img src="./images/test.jpg" alt="测试图片">

若圖片儲存在HTML檔案所在目錄的images資料夾下，則路徑為「./images/test.jpg」。

三、網路圖片

網路圖片是指從網路上取得的圖片。在HTML中，與本地圖片同樣可以使用img標籤來插入網路圖片。

網路圖片通常由URL（Uniform Resource Locator）表示，是由協定名稱、主機名稱、檔案路徑和檔案名稱等組成的字串。例如，存取百度圖片的URL為：

https://www.baidu.com/img/bd_logo1.png

其中，「https://」是協議名，表示使用HTTPS協定進行資料傳輸；「www.baidu.com」是主機名稱；「img/ bd_logo1.png」則是檔案路徑和檔案名稱。

加入網路圖片時，只要將網路圖片的URL複製到img標籤的src屬性中即可，例如：

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

網路圖片比較方便，不用擔心路徑問題，只要圖片的URL沒問題，就可以使用img標籤在HTML中直接插入圖片。

四、圖片自適應

在網頁製作過程中，一個常見的需求是讓圖片尺寸自適應，這樣可以在不同的裝置和螢幕上有更好的展示效果。常用的方法有使用CSS來設定寬度、高度和max-width等屬性。

1. 使用CSS設定寬度和高度

CSS中的width和height屬性可以分別設定圖片的寬度和高度，例如：

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

其中，width設定為100%表示圖片的寬度會隨著可用空間的變化而變化；height設定為auto表示高度會根據寬度的比例自動調整，保持原始比例。

2. 使用CSS設定max-width

使用max-width屬性可以使圖片在超出一定寬度時自動等比縮小，但不會小於其原始尺寸。例如：

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

其中，max-width設定為100%表示圖片的最大寬度不會超過其可用空間，且不會超過原始尺寸，height設定為auto表示高度會根據寬度的比例自動調整，保持原始比例。

總之，在網頁製作中加入圖片時要考慮到圖片路徑、圖片描述、圖片大小和調整等問題。只要掌握好基本語法和常見方法，就可以靈活運用HTML中的img標籤，讓網頁更加豐富多彩。

以上是html如何加圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！