HTML基础教程之图片标记LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

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>
提交重置代码
章节课件