HTML基础教程之图片标记

图片标签

注：这是一个单边标签

在网页中，随处可见图片的踪影

基本上每个网页都有图片

接下来，我们来使用<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>

重置代码

自动运行

提交

预览 Clear