学习笔记（七）多媒体嵌入--HTML中的图片

src属性

<img src=" "> ,src属性包含指向我们想要引入图片的路径：

• 相对路径
• 绝对路径

建议使用相对路径，否则，会让浏览器做更多的工作。通常我们都会把图片和 HTML 放在同一个服务器上。

警告：不能盗版

alt属性

alt属性的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

width和height属性

宽度和高度属性来指定你的图片的高度和宽度。如果图片没有显示，浏览器会为要显示的图片留下一定的空间。

然而，你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。

注意：如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。

title属性

类似于超链接，你可以给图片增加title属性来提供需要更进一步的支持信息。鼠标悬停在图片上，看起来就像链接标题。

为图片搭配说明文字

<p>是可以的，但不建议，无语义。
更好的做法是使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

注意：<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

CSS背景图片

CSS 属性 background-image 和另其他 background-* 属性是用来放置背景图片的。比如：

p {
  background-image: url("images/dinosaur.jpg");
}

CSS插入背景图片和html插入图片区别：

CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。

总而言之，如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片。

总结

• 学会了html插入图片的标签<img>
• 学会了<img> 属性src , alt , title , width , high
• 理解alt属性和title属性的区别，alt属性只在无法加载图片的时候出现；title是鼠标悬停出现。
• 学会了用<figure> 和<figcaption> 为图片插入说明文字
• 理解了css插入图片背景和html插入图片的区别