HTML页面插入图片，使用background仍是img标签

　　不少新手在刚开始学习HTML标签的时候，老师必定会教你

<img src="xxx.png"/>

　　这种引入图片格式，次日学习css的时候，老师又会教你给div等元素添加背景图片，

div { background-image: url(xxx.png);
}

　　那么这两种方式究竟孰优孰劣，分别应该在什么状况下使用呢？今天我在这里就给你们详细讲解一下：

　　关于img标签，咱们要知道，它除了src路径之外，还有两个属性，一个是alt，一个是title

<img src="xxx.png" alt="" title=""/>

　　首先咱们讲一下title，它的做用是什么呢？咱们来看一下，当咱们在body中写入如下代码的时候，

<img src="img/柯基.jpg" alt="" title="Hello，World！"/>

　　打开浏览器，会显示对应的那张图片，title里面写的"Hello，World！"是不显示的，只有当咱们的鼠标放到图片上暂留的时候，鼠标上才会出现提示性文字以下图：

　　title属性是对元素的注释说明和额外补充，当鼠标放到文字或图片上时候，会显示title对应的文字。要注意的一点是，title这个属性并非img标签特有的，加给button、div等其余标签都是能够的，我曾经看过一些文章，做者提议给网页中全部的标签都加上title属性，这样未来用户把鼠标放到每一个按钮、图片、文字上，都有title提示，可是我看响应附和者寥寥，为何呢，太麻烦了呗，你做为一个程序员你愿意画蛇添足吗，何况此举还会增长代码体积。

　　接下来咱们再说说alt属性，alt其实就是你windows通用键盘空格左右的那个键，也是你吃鸡（PC端）的时候，能够自由转头的那个键，它的本意是替换的意思，alt属性在img标签里面是一个必须属性，其做用是当咱们的图片，在用户的网络条件差、路径错误或者浏览器禁用图像等状况下，用户看不到这张图片，alt内的解释性文字会显示出来，使得用户即便看不到图片，也不会影响到对整个页面的浏览，以下图：

　　并且alt属性里的值还会被搜索引擎抓取到，好比你如今在百度搜索柯基，那么咱们网页当中的这张图片就可能会被百度图片给抓取到，以下：

　　搜索引擎真的会分辨你网页当中的图片是否是柯基犬吗？人工智能有这么强大？能够智能识图？并非的，搜索引擎是经过识别你网页当中的alt属性，来辨别本图片是否是它所要抓取的。咱们的网站确定是但愿搜索引擎抓取到咱们，这样咱们的浏览量就会加大，咱们的流量就会更多，咱们就能赚取更多的广告费，咱们就会更有银子。

　　其次，还有一个缘由，img加载更快对于咱们一篇HTML文档来讲，浏览器对文档的加载是从上往下的，咱们的css样式是在style标签内，当咱们的浏览器加载到style标签的时候，它就会停下，跳过去，继续加载HTML，HTML加载完成后，才会继续加载css样式表，不然的话，假如咱们在style标签内写了.div1{width:100px;}这时候浏览器并无加载到body，由于咱们的style标签是在head内，是在body上面的，这时候浏览器就没法找到div1并给其设置宽度。因此，若是论加载速度，仍是body中的img标签加载更快。

　　最后呢，还有一个缘由，是从用户体验角度来说的。若是你在body 中经过img标签引入一张图片，那么用户在浏览网页的时候，是能够直接在图片上右键，而后另存为，把图片保存下来，可是background是不能够的；

　　还有一种状况比较少见：针对盲人用户，盲人用户眼睛没法直接看到网页，可是又有上网的需求，这时候，患者就能够借助一些读屏软件来浏览咱们的网页，这时候问题来了，读屏软件能够阅读文字，但是它怎样阅读咱们的图片给患者听呢？这是一个问题，因此这时候咱们以前提到的alt属性的做用就来了，读屏软件能够直接阅读图片的alt属性值，从而使盲人用户看不到图片，也能够知道这里显示的是什么。

 　　因此，综上所述，通常状况下，在咱们网页中主体用到的图片，尽可能用img标签引入是最好的，可是这也并非绝对，在网页中用到的logo等图标，咱们通常用background来显示，或者该图片本就是背景图，咱们就必定使用background。