HTML图片元素(标记)

<html>
<head>
<title>第一个网页</title>
</head>
<body>
***************图片元素******************</br>
<img src='mm.jpg' />
</body>
</html>

新建一个文件夹“text”,在text文件夹内新建index.html并放入一张图片mm.jpg

在index.html中写入 <img src="a.jpg" /> 保存

打开index.html

 更改图片大小<img src='mm.jpg' width=170px />只需写width,height会随着width自动比例变换

另外我们使用“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。

<img src="" />
如果图片和html文件在同一目录,就直接写*.jpg
如果图片的文件夹和html在同一目录,就写/../*.jpg


说明,图片可以链接外部网络的URL
例如百度页面上百度的logo,在logo上右键复制图片地址,将图片地址复制到src中
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px />
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px border=1 />

观察上面两行,第二个多了border,图片显示的效果是图片外面一圈有黑色框,border的属性值可以更改

<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />

观察效果,相同的图片可以显示多次

 

posted @ 2016-09-06 23:36  缘琪梦  阅读(2121)  评论(0编辑  收藏  举报