console
<h1>HTML中的图片</h1>
<h2>图片的基本使用</h2>
<p>
<code><img></code>元素是一个空元素（不需要包含文本内容或闭合标签）需要用一个<code>src</code>属性来引用图片的地址，可以是相对路径或绝对路径甚至URL，就行<code><a></code>标签的<code>href</code>属性一样
</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526276293650&di=c864c986c7252ef4b86550a724dfdbe5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe1b2f55dddbdf79a3a58df0eecac26f84a78c16e.jpg">
<p>
注意：像<code><img></code>和<code><video></code>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身
</p>
<hr>
<h2>备选文本</h2>
<p>
<code>alt</code>属性的值是对图片的文字描述，用于在图片无法被显示或看到的情况，例如：
</p>
<img src="xx.jpg" alt="假装这里有图片">
<hr>
<h3>宽度和高度</h3>
<p>
<code>width</code>和<code>height</code>两个属性分别用来描述图片的宽度和高度。设置之后如果图片没有显示（例如用户刚刚开始浏览网页，但是图片还没有加载完成），你会注意到浏览器会为要显示的图片留下一定的空间：
</p>
<img src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" width="400" height="300">
<p>
<em>需要注意的是，我们实际开发中设置图片尺寸，更多的应该是使用<code>CSS</code>,而不是在HTML中使用属性</em>
</p>
<hr>
<h2>Image titles 图片标题</h2>
<p>
类似于超链接<code><a></code>标签，我们可以使用<code>title</code>属性来提供更进一步的支持信息（鼠标悬浮在图片上会有对应提示），例如：
</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526276293650&di=c864c986c7252ef4b86550a724dfdbe5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe1b2f55dddbdf79a3a58df0eecac26f84a78c16e.jpg" width="300" height="200" title="嘤嘤嘤">
<hr>
<h2>通过为图片搭配说明文字的方式来解说图片</h2>
<p>
前面内容其实已经展示了对图片的文字说明，但是都是通过<code><p></code>标签来说明的，从语义角度来讲，<code><img></code>和<code><p></code>并没有什么联系。
</p>
<p>
So,我们可以选择H5中更好的解决方法，那就是<code><figure></code>和<code><figcaption></code>元素，它们可以为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:
</p>
<figure>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526276293650&di=c864c986c7252ef4b86550a724dfdbe5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fe1b2f55dddbdf79a3a58df0eecac26f84a78c16e.jpg" width="300" height="200" title="嘤嘤嘤">
<figcaption>嘤嘤嘤，额... 不对，这是嘤嘤嘤嘤嘤嘤嘤嘤~</figcaption>
</figure>
<p>
这个 <code><figcaption></code> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <code><figure></code> 元素的内容.
</p>
<p>
<em>所以！！<code><figure></code> 里面不一定是一张图片，也可以是几张图片、一段代码、音频视频、方程、表格或别的...</em>
</p>
<hr>
<h2>CSS 背景图片</h2>
<p>
我们可以使用CSS把图片嵌入到网站中(其实JS也可以)，比如CSS属性<code>background-image</code>和其它background-*属性是用来设置背景的，<code>background-image</code>可以为某个段落添加一个背景图片。
</p>
<p class="background_test">
CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。<br>
<em>
总而言之，如果图像对您的内容里有意义，则应使用HTML图像。 如果图 像纯粹是装饰，则应使用CSS背景图片。
</em>
</p>
code{
background-color:#eeeeee;
color:#5887A6;
}
em{
background-color:#eeeeee;
}
p.background_test{
background-image:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526280067224&di=41377a2c008830ef629c3238a456d217&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dd367631ebb3533fae1bb9b6dc0ba976a%2F838ba61ea8d3fd1f8b8b482a3a4e251f95ca5f24.jpg")
}