<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 />
观察效果,相同的图片可以显示多次