美文网首页读书
HTML图像标签的基本特点和相关属性

HTML图像标签的基本特点和相关属性

作者: LiJiaSi | 来源:发表于2021-05-12 16:14 被阅读0次

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签<img />以及和它相关的属性。图像标签的基本语法格式如下。

在上面的语法中,src属性用于指定图像文件的路径和文件名,是img标签的必需属性。

要想在网页中灵活地使用图像,仅仅依靠src属性是远远不够的。为此HTML还为<img />标签准备了其他的属性,具体如表2-5所示。

表1 <img />标签的属性:

表1对<img />标签的常用属性做了简要的描述,下面对它们进行详细讲解,具体如下:

1.图像的替换文本属性alt

有时页面中的图像可能无法正常显示,如图片加载错误,浏览器版本过低等。因此为页面上的图像添加替换文本是个很好的习惯,在图像无法显示时告诉用户该图片的信息,这就需要使用图像的alt属性。

2.图像的宽度和高度属性 width、height

通常情况下,如果不给<img />标签设置宽高属性,图片就会按照它的原始尺寸显示,此外,也可以通过width和height属性用来定义图片的宽度和高度。通常我们只设置其中的一个属性,另一个属性则会依据前一个设置的属性将原图等比例显示。如果同时设置两个属性,且其比例和原图大小的比例不一致,显示的图像就会变形或失真。

3.图像的表框属性 border

默认情况下图像是没有边框的,通过border属性可以为图像添加边框、设置边框的宽度,

4.图像的边距属性 vspace、hspace

在网页中,由于排版需要,有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

5.图像的对齐属性align

图文混排是网页中很常见的效果,默认情况下图像的底部会与文本的第一行文字对齐,如图1所示。

但是在制作网页时需要经常实现图像和文字环绕效果,例如左图右文,这就需要使用图像的对齐属性align。

注意:

1、实际制作中并不建议图像标签<img />直接使用border、vspace、hspace及align属性,可用CSS样式替代。

2、网页制作中,装饰性的图像不建议直接插入<img />标签,最好通过CSS设置背景图像来实现。

html5教程详解

相关文章

  • HTML图像标签的基本特点和相关属性

    HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签...

  • HTML图像-12

    HTML 图像- 图像标签(img)和源属性(Src) 定义图像的语法是: HTML 图像- Alt属性 HTML...

  • HTML图像

    HTML图像-图像标签和源属性(Src) 在HTML中,图像由标签定义。是空标签,意...

  • HTML基础 之 img 图片

    图像标签( )和源属性(Src) 在 HTML 中,图像由 标签定义。 是空标签,意思是说,它只包含属性,并且...

  • 2018-06-09——HTML图像

    图像标签()和源属性(Src) 在HTML中,图像由 标签定义。 是空标签,意思是说,它只包含属性,并且...

  • 03.图像标签img

    1.图像标签简介 在 HTML 标签中, 标签用于定义 HTML 页面中的图像。 src 是 标签的必须属性,它...

  • web前端入门到实战:HTML图像标签img和源属性src及Al

    使用 标签定义 HTML 页面中的图像,图像标签 有两个必需的属性:源属性src和alt, 是空标签,意思是说,它...

  • W3 Html 图像

    实例 来自本地文件夹的图像 来自网络的图片 图像标签()和源属性(Src) 在 HTML 中,图像由标签...

  • Html 基础

    案例1 HTML 标题 HTML 链接 HTML 图像 空白标签 HTML属性 属性例子 1: TIY : 居中排...

  • HTML的常用标签(三)- 图像、超链接、锚点

    1、HTML中的图像 IMG标签 属性名称 属性值 说明 src 图像链接地址 ...

网友评论

    本文标题:HTML图像标签的基本特点和相关属性

    本文链接:https://www.haomeiwen.com/subject/erbidltx.html