HTML的img标签

<img> 元素用于在网页中插入一张图片,它是一个空元素(不需要包含文本内容或闭合标签),只需要一个 src 属性来使其生效。

举个例子,如果你有一幅文件名为 dinosaur.jpg 的图片,且它与你的HTML页面存放在相同路径下,那么你可以这样嵌入它:

<img src="dinosaur.jpg">

如果这张图片存储在和HTML页面同路径的 images 文件夹下(推荐做法),那么可以采用如下形式:

<img src="images/dinosaur.jpg">

也可以像下面这样使用绝对路径:

<img src="https://www.example.com/images/dinosaur.jpg">

但是这种方式是不被推荐的,这样做只会使浏览器做更多的工作,例如重新通过DNS再去寻找IP地址。通常我们都会把图片和HTML放在同一个服务器上。

注意:搜索引擎也读取图像的文件名并把它们计入SEO,因此你应该给你的图片取一个描述性的文件名: dinosaur.jpgimg835.png 要好。

<img> 标签有以下常用属性:

  • alt 属性,用于在图片无法显示时提供替代文本(推荐使用);
  • title 属性,用于鼠标停留在图片上时显示提示文本;
  • width 和 height 属性,用于规定图像大小;

例如:

<img src="images/dinosaur.jpg" alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。" width="400" height="341" title="A T-Rex on display in the Manchester University Museum">

展示效果如下: