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插入图片的区别