首页 > HTML 阅读:2,656

HTML <img>标签(插入图片)

如果是 HTML 初学者,建议在使用图片前新建一个存放图片的文件夹,方便后期图片的整理。这是一个良好的习惯。

开发过程中,经常使用图像来美化页面,图像已经成为大多数网站的一个重要组成部分。都说一图胜千言,好的图像有助于制作出精美的网站,从而与那些外观平平的网站区别开来。在 HTML 中,使用 <img> 标签来插入图像,其语法格式如下:

<img src="url" />

<img> 是图片 image 的简称,它只包含属性,没有闭和标签。src 是它的必选属性,用来表示图片的路径来源。下面,我们来详细分析一下 <img> 标签的 src 属性。

1. src属性

src 是 source 的简称,用来声明图像文件的来源,也就是定义图片的引用地址。图片可以是.jpg .png .gif等多种格式,引用地址可以是相对 url,也可以是绝对 url。下面我们来看两个示例。

1) 引用网络图片

可以这样引用网络图片:
<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994"/>
运行结果如下图所示:
c语言中文网logo
图1:C语言中文网 logo

2) 引用本地图片

如果在项目的当前文件中,想要引入上一层 image 目录下的一张图片 logo.jpg,可以这样引用:

<img src="../image/logo.jpg"/>

运行结果如下图所示:

c语言中文网logo
图2:C语言中文网 logo
 

此处../可以进入上一层目录,然后进入 image 文件夹,最后找到 img.jpg。

提示:图片的名称尽量不要使用中文,否则即使路径正确,浏览器也可能无法识别,从而显示不出图片。

2. 其他属性

前面讲述了 <img> 标签的必选属性 src,接下来再看一下它的可选属性。<img> 标签常用的可选属性有alttitlewidth以及height等,我们来分别看一下:
  • alt 属性用来对图像进行文本说明。一般情况下,当浏览器因某种原因无法载入图像时,就会显示这段文本。虽然 alt 属性值可以为空,但还是建议读者给 alt 属性设置符合图像信息的文本;
  • title 用来设置鼠标移动到图片上的提示文字。它的值一般与 alt 的值相同,最大的区别是显示的前提条件不同,alt 属性是图片加载失败后显示,而 title 属性则是图片加载成功后鼠标放到它上面才显示;
  • width 用来设置图片的宽度,使用时不需要加单位,默认是像素(px);
  • height 用来设置图片的高度,和 width 一样在使用时不需要加单位,默认是像素(px)。

具体使用方法如下:

<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" 
      width="200"  
      height="200" 
      title="这是C语言中文网的logo" 
      alt="这是C语言中文网的logo" 
/>
在浏览器中运行结果如下图所示:
C语言中文网logo
图3:C语言中文网 logo


在这段代码中,首先引入了文件的路径,紧接着对图片的宽高进行了设置,均是 200px;其次又设置了 title 属性,当鼠标移动到图片上时,会显示 title 的内容;最后设置了 alt,当图片加载不出来会显示 alt 的内容。

建议读者为页面上的图像都加上 alt 属性,这样不仅有助于更好的显示信息,而且对于那些使用屏幕阅读软件(存在视觉障碍的人使用的一类软件)的人来说帮助很大。

3. 总结

从上面的讲述中我们可以收获以下几点内容:
  • src 表示图片的引用地址,这个地址可以是相对 url,也可以是绝对 url;
  • alt 表示图片加载失败时显示的内容;
  • title 表示鼠标移动到图片上时显示的文字;
  • width 表示图片的宽,默认单位是像素(px);
  • height 表示图片的高,默认单位也是像素(px)。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注