HTML基礎教學之圖片標記LOGIN

HTML基礎教學之圖片標記

圖片標籤

註:這是一個單邊標籤

在網頁中,隨處可見圖片的蹤影

7.png

8.png

基本上每個網頁都有圖片

接下來,我們來用<img>標籤為我們自己的網頁加上圖片

  •  語法格式:<img  屬性= “值”>

  • 常用屬性

  •  Width:圖片寬度

  •  Height:圖片高度

  •  Border:圖片邊框粗細。

  •  Src:圖片的路徑(相對路徑)

  • # Align:圖片的水平對齊方式,值:left、center、right

  •  Hspace:圖片與左右文字之間的距離(水平距離)

  •  Vspace:圖片與上下文字之間的距離(垂直距離)。

  • 注意事項

  • # 如果圖片想等比例縮放,只需要指定width或height其中一個。

  • Align屬性只能讓文字居中,不能讓圖片單獨居中。

  • Align可以實現「圖文混排」效果。 align = 「left | right」

  • 來看個實例:

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <p>Life was like a box of chocolates, you never know what you're gonna get.(生命就像一盒巧克力,结果往往出人意料。)---《阿甘正传》 
 </p>
 <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center">
 </body>
</html>

註:大家可以試著輸入其他屬性看看效果,想要讓圖片居中,只能透過CSS,我們之後會有介紹

#下一節
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Life was like a box of chocolates, you never know what you're gonna get.(生命就像一盒巧克力,结果往往出人意料。)---《阿甘正传》 </p> <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center"> </body> </html>
章節課件