图片简介

1、网页中的图像

    1.1 img：引入图像（产品图像）、icon图像、背景图像

    1.2 img图像的属性：

属性	值	描述
alt	text	定义有关图像的短描述
src	URL	要显示的图像的URL
height	px/rem/%等	定义图像的宽度
width	px/tem/%等	定义图像的宽度
align	top/middle/bottom	图片对齐方式

    1.3 图片格式：jpg/jpeg/png/gif/svg/bmp等

2、HTML5中图片引入

    2.1 figure:包含img标签和figcaption标签

    2.2 figcaption:描述图片的，图片下方的描述文字

    2.3 img:

    例：<h2>HTML5 figure和figcaption</h2>

        <img src=" #" alt="美女"><figcaption>是一位美女</figcaption>

3、图片路径src

    3.1 相对路径（引入本地路径）<img src="../" /><!--根目录--><!--强烈建议使用相对路径-->

    <img src="../../"><!--父级图片-->

    3.2 绝对路径（引入服务器路径）<img src="http://www.okay686.cn/img.png><!--不能轻易的更换图片，如果更换图片，需要上传图片到服务器上，如果是http那就更不好办了，因为最终的项目是需要发送到服务器上面的，如果发送后，和本地的路径是不一样的-->

4、图片的尺寸和提示文字

    4.1 width/height:<img src="#" width="300"><!--只设置宽度或者高度属性，这样图片会自动调整图片尺寸-->

    4.2 alt:<img src="#" alt="美女" title="美少女"><!--title标签，鼠标移动到图片上，显示美少女字样-->

5、图片的对齐方式<!--align:top,middle,bottom-->

    例：<h2>图片对齐方式</h2>

<div>默认底部对齐：<img src="#" alt="美女" title="美少女" align="bottom">这是一位美女</div>

<div>居中对齐：<img src="#" alt="美女" title="美少女" align="middle">这是一位美女</div>

<div>顶部对齐：<img src="#" alt="美女" title="美少女" align="top">这是一位美女</div>

 

 

转载于:https://my.oschina.net/u/3633511/blog/1501247