在HTML中插入一张图片 - 图2 元素

  1. 在HTML中插入一张图片 - 图3 元素的功能是在网页中嵌入一幅图像。实际上,在HTML中插入一张图片 - 图4 标签并不会在网页中插入图像,而是在网页上链接图像。在HTML中插入一张图片 - 图5 标签创建的是被引用图像的占位空间。
    在HTML中插入一张图片 - 图6 标签有两个必需的属性:src 属性和 alt 属性。
  1. <img src="images/dinosaur.jpg">

建议将网站的图片统一放在images文件夹下,利于SEO。

  1. alt属性的值应该是对图片的文字描述,用于在图片无法显示或不能被看到的情况。
  1. <img src="images/dinosaur.jpg"
  2. alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。">

alt-text.png

  1. 调整图片的宽度和高度,使用 width 属性和 height 属性。
<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
     width="400"
     height="341">

如果你需要改变图片的尺寸,建议使用CSS而不是HTML。

  1. 给图片加一个标题,给图片增加 title 属性来提供需要更进一步的支持信息。
<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
     title="A T-Rex on display in the Manchester University Museum">

元素

元素为图片提供一个语义容器,在标题和图片之间建立清晰的关联。
元素定义了
元素的标题,其应该被置于
元素的第一个或最后一个子元素的位置。来看一个实例,

<figure>
  <img src="images/dinosaur.jpg"
       alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

元素里不一定是一张图片,也可以是几张图片、一段代码、音视频、方程、表格或别的。为主要内容提供重要的补充说明。