从零开始前端学习[2]:img标签的使用

从零开始前端学习[2]:img标签的使用

img标签的相关属性

img标签的使用

提示

作者:章飞_906285288

博客地址:http://blog.csdn.net/qq_29924041

img标签的相关属性

img标签介绍

img标签是前端页面中用来加载图像，图片的，当时有时候我们也不一定会使用img来进行图片的加载操作，而会使用background来作为背景添加上，但是img图片的使用，没有了图片的页面能叫前端么？？

特点:

img标签是一个单标签，即<img/>而不是<img></img>这样一个对应结尾的部分

//简单的使用方式:
<img src="../a.png" width="300px" height="200px" alt="图片加载失败的时候的文字" title="鼠标放在图片上显示的文字"/>

img标签的属性

img的标签属性有以下一种

src属性: <img src=”图片加载的路径，可以是本地图片，也可以是网络图片，图片类型可以是png，gif，jpg”/>

width宽度属性: <img width=”300px”/>

height高度属性:<img height=”300px”/>

alt图片加载失败显示的文字:<img alt=”图片加载失败的时候显示的文字”/>

title鼠标放在图片上显示的文字:<img height=”鼠标放在图片上面显示出的文字”/>

img标签的使用

//绝对路径加载方式
<img src="C:\Users\1.gif" alt="">
//从网络上加载图片的方式显示
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501781310551&di=033390815b785653300c6b68a67820b2&imgtype=0&src=http%3A%2F%2Fwww.liyuanhuadian.com%2Fimages%2F201502%2Fgoods_img%2F510_P_1424106841363.jpg" alt="" width="300px" height="200px">
//可以加载png图片
<img src="img/1.png" alt="">
//加载jpg图片
<img src="1.jpg" alt="">
//相对路径去加载jpg图片
<img src="../1.jpg" alt="">

单纯的使用img标签并不能展示出什么效果，前端所有的效果显示都是需要结合Css和js来进行显示的，标签的使用比较简单，但是效果的实现不是那么简单了