HTML 圖像 · HTML開發手冊

# HTML 圖像）和源屬性（Src）在 HTML 中，圖像由標簽定義。 * * * ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h2>Norwegian?Mountain?Trip</h2> <img?border="0"?src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"?alt="Pulpit?rock"?width="304"?height="228"> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例 ## 在線實例本例演示如何在網頁中顯示圖像。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p> 一個圖像: <img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?width="32"?height="32"></p> <p> 一個動圖: <img?src="/upload/course/000/000/010/58046a41c6e3c115.gif"?alt="Computer?man"?width="48"?height="48"></p> <p> 注意插入動圖的語法和靜態圖的語法是一樣的。 </p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例從不同的位置插入圖片本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p>一個來自文件夾中的圖像:</p> <img?src="/upload/course/000/000/010/58046b14a8b9f738.gif"?alt="Google?Chrome"?width="33"?height="32"><p>一個來自php中文網的圖像:</p> <img?src="/upload/course/000/000/010/58046c29b47ef575.png"?alt="php.cn"?width="336"?height="69"> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例（可以在本頁底端找到更多實例。） * * * ## HTML 圖像- 圖像標簽（）和源屬性（Src）在 HTML 中，圖像由標簽定義。是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。 **定義圖像的語法是：** ~~~ <img?src="url"?alt="some_text"> ~~~ URL 指存儲圖像的位置。如果名為 "../style/images/boat.gif" 的圖像位于 www.php.cn 的 images 目錄中，那么其 URL 為 http://www.php.cn/images/boat.gif。瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。 * * * ## HTML 圖像- Alt屬性 alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。 ~~~ <img?src="../style/images/boat.gif"?alt="Big?Boat"> ~~~ 在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。 * * * ## HTML 圖像- 設置圖像的高度與寬度 height（高度）與 width（寬度）屬性用于設置圖像的高度與寬度。屬性值默認單位為像素: ~~~ <img?src="../style/images/pulpit.jpg"?alt="Pulpit?rock"?width="304"?height="228"> ~~~ **提示:**指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。 * * * ## 基本的注意事項 - 有用的提示： **注意:**假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。 **注意:**加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。 **更多實例** 1.排列圖片本例演示如何在文字中排列圖像。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>默認對齊的圖像?(align="bottom"):</h4> <p>這是一些文本。?<img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?width="32"?height="32">?這是一些文本。</p> <h4>圖片使用?align="middle":</h4> <p>這是一些文本。?<img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?align="middle"?width="32"?height="32">這是一些文本。</p> <h4>圖片使用?align="top":</h4> <p>這是一些文本。?<img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?align="top"?width="32"?height="32">這是一些文本。</p> <p><b>注意:</b>在HTML?4中?align?屬性已廢棄，HTML5?已不支持該屬性，可以使用?CSS?代替。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例 2.浮動圖像本例演示如何使圖片浮動至段落的左邊或右邊。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p> <img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?style="float:left"?width="32"?height="32">?一個帶圖片的段落，圖片浮動在這個文本的左邊。 </p> <p> <img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="Smiley?face"?style="float:right"?width="32"?height="32">?一個帶圖片的段落，圖片浮動在這個文本的右邊。 </p> <p><b>注意:</b>?在這里我們使用了?CSS?"float"?屬性，在HTML?4中?align?屬性已廢棄，HTML5?已不支持該屬性，可以使用?CSS?代替。</p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例 3.設置圖像鏈接本例演示如何將圖像作為一個鏈接使用。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p>創建圖片鏈接: <a?href="http://www.php.cn/html/html-tutorial.html"> <img?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="HTML?教程"?width="32"?height="32"></a></p> <p>無邊框的圖片鏈接: <a?href="http://www.php.cn/html/html-tutorial.html"> <img?border="0"?src="/upload/course/000/000/010/58046a2b7e46d104.gif"?alt="HTML?教程"?width="32"?height="32"></a></p> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例 4.創建圖像映射本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head> <meta?charset="utf-8"> <title>php中文網(php.cn)</title> </head> <body> <p>點擊太陽或其他行星，注意變化：</p> <img?src="/upload/course/000/000/010/58046db4ca85a572.gif"?width="145"?height="126"?alt="Planets"?usemap="#planetmap"> <map?name="planetmap"> ??<area?shape="rect"?coords="0,0,82,126"?alt="Sun"?href="sun.htm"> ??<area?shape="circle"?coords="90,58,3"?alt="Mercury"?href="mercur.htm"> ??<area?shape="circle"?coords="124,58,8"?alt="Venus"?href="venus.htm"> </map> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-images.html#) 點擊 "運行實例" 按鈕查看在線實例 * * * ## HTML 圖像標簽 | 標簽 | 描述 | | :-- | :-- | | [](http://www.php.cn/dic/html/img.html) | 定義圖像 | | [](http://www.php.cn/dic/html/map.html) | 定義圖像地圖 | | [](http://www.php.cn/dic/html/area.html) | 定義圖像地圖中的可點擊區域 |