网页中插入图片
图像可以美化网页。插入图片使用的是单标记 <img/>。
img 常用属性
src
用来标记文件的路径，可以是网络路径。相对于网站根目录则是绝对路径，相对于当前网页则是相对路径。
width 和 height
设置图片的高和宽。如果只设置其中一个，另一个会自动按比例计算。图片的单位可以是数字（像素）也可以是百分比。这里的百分比是相对于它所在的容器（如 body、div 等）。小图片如果设置比原来的宽高要大，则会失真出现马赛克。
alt 和 title
alt设置替代文字，作用有三：- 如果图片加载不成功（如图片不存在或网络异常），该图片的位置会显示 alt 设置的文字。
- 有利于搜索引擎对这张图片的收录（SEO）。
- 注意：alt 文字不会在鼠标悬停时浮动显示，那是
title属性的作用。
title设置浮动文字提示，当用户把鼠标放在图片上时，会弹出 title 设置的文字。
本节代码
<html>
<body>
<img src="file:///H:/HTML5%E6%95%99%E7%A8%8B/untitled/images/eg_planets.jpg" />
<img src="../../images/eg_planets.jpg" alt="太阳系" title="浮动文字提示" width="100" height="20" />
<img src="../../images/eg_planets.jpg" alt="太阳系" title="浮动文字提示" width="100" />
<img src="../../images/eg_planets.jpg" alt="太阳系" title="浮动文字提示" height="20" />
<img src="../../images/eg_planets.jpg" alt="太阳系" title="浮动文字提示" width="5%" />
<img src="/dsd.jpeg" alt="第三张图片" />
</body>
</html>Code language: HTML, XML (xml)说明
<img>是单标签，必须配合src属性才能显示图片width/height只改变显示尺寸，不改变图片文件本身的分辨率；大图缩小显示没问题，小图放大则会模糊alt和title的区别：alt是替代文本（图片无法显示时呈现），title是提示文本（鼠标悬停时浮动显示），两者作用不同，建议同时设置- 百分比单位的参照物是图片的父容器。例如父容器宽 500px，
width="5%"则图片显示宽 25px - 实际开发中，
src建议使用相对路径，避免写file:///本地绝对路径（部署到服务器后无法访问） - 图片格式选择建议：色彩丰富的照片用 jpeg，需要透明背景或简单图形用 png，简单动画用 gif