显示图片

显示图片：

插入：我们想要在网页中插入图片的话，可以使用<img/>标签，这个标签是自成一体的。在插入图片时，需要给出图片的路径。

大小设置：其次，可以自己设置图片大小，推荐使用width，且用百分数来表示，这样可以解决用不同浏览器打开时的兼容问题。因为用百分数表示时，图片大小可以根据网页大小自己调节。

其他：可以在图片旁边配上文字，文字与图片的相对位置可以通过align = "middle"、"bottom"、"top"操控。

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>我的光荣与梦想</title>
 5     <meta http-equiv="Content-Type" content = 
 6     "text/html;charset = utf-8"/>
 7 </head>
 8 <body>
 9 <font size = "6" face = "Ink Free">This man<img src = "01.jpg" align = "middle" width = "30%"
10             alt = "足球大佬"/>is very strong.</font>
11 </body>
12 </html>

效果：

 补充一点：插入图片时给出的路径，可以选择绝对路径，也可选择相对路径。绝对路径就需要精确到哪个盘、哪个文件夹，但一般很少用，因为万一图片文件不存放在原位置了，那么这时候在网页处就显示不出来了。所以我们还是会选择相对路径。就是编辑这个文件，以.html结尾的这个文件存放的位置为起点，层层深入，依次给出即可。例如上面这份代码中只有01.jpg,这是因为在我的电脑中：

 

如果"显示图片.html"上面并不是图片文件，而是一个专门放图片的文件夹，就先给出文件夹名字，再给出图片文件名字即可。例如，假设放图片的文件夹名为：图片，那么就是：src = "图片/01.jpg".

 

posted @ 2021-02-01 20:07  EvanTheBoy  阅读(333)  评论(0)    收藏  举报