html的img标签是如何使用的

img标签的使用:通过img标签的src属性显示获取到的图像,img标签的height和width属性设置图像的大小、当图像无法显示时,使用alt属性来显示替代文本。

html的img标签是如何使用的

html的img标签可以用于在网页上显示图像,它是仅包含属性的空标记,没有结束标记>。

img标签的属性

img标签内可以包含:src属性、height和width属性、alt属性。其中src属性和alt属性是HTML img标签的重要属性。

下面我们来具体看看img标签的这些属性:

立即学习“前端免费学习笔记(深入)”;

1、src属性

src属性是描述图像源或路径的必要属性,它指示浏览器在服务器上查找图像的位置。

那么获取图像?分两种情况:

1)、获取同一文件夹中图像

当HTML文件和图像在同一个文件夹中时,像这样:

1.jpg

我们可以直接在src属性中填写图像名称,如:

img标签

@@##@@

效果图:

html的img标签是如何使用的

2)、在另一个目录/文件夹中,如:

html的img标签是如何使用的

则可以像这样访问图像:

img标签

@@##@@

效果图如上图一样。

如果复杂点,当我们将 1.jpg的图像放在本地磁盘E ——> img文件夹中时,我们可以这样显示图片:

html的img标签是如何使用的

2、height和width属性

img标签的height和width属性可以用来设置图像的高度和宽度,例:

@@##@@

效果图:

3.jpg

img标签图像的高度和宽度也可以通过css来设置,例:

img{   width:450px;   height:300px;}

3、alt属性

当图像无法在浏览器上显示时,可以使用alt属性显示替代文本。

例:想要显示1.jpg图片,但文件夹中没有

img标签

@@##@@

效果图:

html的img标签是如何使用的

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

html的img标签是如何使用的html的img标签是如何使用的html的img标签是如何使用的5.jpg

以上就是html的img标签是如何使用的的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1547504.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 19:13:07
下一篇 2025年12月21日 19:13:17

相关推荐

  • html文档的头部元素有哪些

    html文档的头部元素有: 元素,元素,元素,元素,元素,元素和元素。 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等;而头部元素就是用来定义这些信息。本篇文章就给大家介绍一下html文档的头部元素,让大家了解html文档的头部元素的作用,希望对你们…

    好文分享 2025年12月21日
    000
  • xml和html之间的区别有哪些

    区别:1、XML用于传输和存储数据,侧重于数据;HTML用于显示数据并关注数据的外观。2、XML区分大小写;HTML不区分大小写。3、XML强制要求使用结束标记;而HTML中没有强制要求使用结束标记。4、XML保留空格;HTML不保留空格。 本教程操作环境:windows7系统、HTML5版、Del…

    2025年12月21日
    000
  • 如何打开HTML文件

    html通过在编辑器上编写程序然后保存,再通过浏览器打开运行文件,还可以通过浏览器编写html样式 任何Web浏览器比如Internet Explorer,Firefox,Chrome等都可以打开并正确显示HTML文件,接下来在文章中将和大家详细介绍如何打开html文件,希望对大家有所帮助。 【推荐…

    2025年12月21日 好文分享
    000
  • HTML设置页面内链接的跳转—锚点链接

    什么是锚点链接?所谓锚点链接就是创建一个链接,以便在页面长度较长时跳转到指定位置,简而言之就是页面内通过链接跳转,那么,接下来的这篇文章就来给大家介绍关于html设置页面内链接的跳转的方法。 区域1 区域2 区域3 区域1 内容 区域2 内容 区域3 内容 本篇文章到这里就全部结束了,更多有关于HT…

    2025年12月21日
    000
  • 如何在HTML上插入图片

    在html中插入图片的方法有:直接在html代码上插入、在css样式中插入、在javascript中通过给img设置src值来插入图片、innerhtml插入img属性来插入图片 如果一个页面中仅有文字会显得很单调,枯燥乏味,但是当我们添加了一些图片在上面时会显得好看多了,今天将向大家介绍如何在HT…

    2025年12月21日 好文分享
    000
  • html中url编码是什么?有什么用?

    本篇文章给大家带来的内容是介绍html中的url编码是什么,有什么用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 我们在介绍URL编码之前,首先来了解一下URL是什么,URL的相关知识。 什么是URL? URL代表统一资源定位器。它实际上是一个网址。URL可以包含单词,即(ja…

    2025年12月21日
    000
  • HTML中的短语标签是什么?有哪些?

    本篇文章给大家带来的内容是介绍html中的短语标签是什么?有哪些?让大家了解html中重要短语标签的作用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 HTML中的短语标签是什么? 在HTML中,短语标签是专用标签,用于指示文本块具有结构意义,执行与文本格式标签类似的特定操作。如…

    2025年12月21日 好文分享
    000
  • html如何创建电子邮件链接

    本篇文章给大家带来的内容是介绍在html中要怎么创建电子邮件链接,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在网页上放置HTML电子邮件链接并不困难,HTML的标签就为我们提供了指定发送电子邮件的电子邮件地址的方法。 我们可以使用标签作为电子邮件标签,此时我们还需要配合使用“…

    2025年12月21日
    000
  • HTML如何实现文字的滚动效果

    在html中,可以通过html的标签来实现文字的滚动效果,通过设置标签里的不同属性来实现不同的文字的滚动效果。 在HTML中实现文字的滚动效果其实很简单,本篇文章就给大家介绍HTML 标签实现文字的滚动效果的方法,让大家了解标签设置不同属性实现的不同文字滚动效果。 HTML  Marquee标签是一…

    2025年12月21日 好文分享
    000
  • HTML点击按钮展开菜单的方法实现

    本篇文章我们来介绍一下html中点击时创建一个扩展元素的菜单,下面我们来看具体的内容。 我们先来看一个问题 “按钮名称”由黑色边框线包围,单击时,文本将显示在底部,边框线保持不变。 当我点击它时,我想扩展边框线,以便包括“按钮名称”在内的整个句子。 但是,要想让边框线的大小完美地围绕要显示的字符,这…

    2025年12月21日 好文分享
    000
  • HTML与HTML5有什么区别

    HTML与HTML5的区别有:1、HTML5支持SVG,而在HTML中只有将它与Flash等不同技术结合在一起才能使用矢量图形;2、HTML5使用Web SQL库,而HTML中只有浏览器缓存才可用于此目的;3、HTML5支持新的表单控件等。 本文操作环境:Windows7系统、Dell G3电脑、H…

    2025年12月21日
    000
  • html怎么学

    学html需要什么基础?怎么学好html?现如今,不管是前端还是后端,html都是要学习的,如果想在前端行业上发展的话,hrml的基础知识是必不可少的,下面我们就来谈谈新手html怎么学? 学html需要什么基础? 目前html是相对其他来说是表示简单的,无论有没有基础都是可以学习的,也不需要什么基…

    2025年12月21日
    000
  • html5与html区别是什么

    html5与html区别有三种,分别是:1、文档声明不同,在html中有很长的代码声明,而html5却是简单的声明;2、结构语义不同,html是没有体现语义化的标签;3、绘图不同,在html5中通常在网页上绘制等等。 本文操作环境:Windows7系统、Dell G3电脑、HTML5版。 很多刚刚入…

    2025年12月21日
    000
  • html可以做什么

    什么叫html?随着前端的快速发展,很多人纷纷加入进来,相信很多人对html是做什么的并不是很清楚,下面我们来总结一下。 什么叫html? html是按照有关全新web集合,包括更规范的html标签,让前端和后端实现完美的传输,html是由html标签组成文字和动画和链接。 立即学习“前端免费学习笔…

    2025年12月21日
    000
  • http协议发展过程一览

    本篇文章给大家带来的内容是关于http协议一览,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这里我只是对一些知识进行简单的整理,方便自己理解记忆,还有很多不完善的地方,更多细节,需要查看书籍或者其他文章 http协议的发展过程 HTTP 是基于 TCP/IP 协议的应用层协议。它…

    2025年12月21日 好文分享
    000
  • 如何使用HTML创建表单的发送

    html除了显示字符和图像的语言以外,其实还具有创建简单表单的功能,本篇文章就来给大家分享关于如何使用html格式创建发送表单。 我们先来解释一下表单元素:表单元素是创建提交表单的必要元素。 基本格式如下: //填写表单的内容 实际上,它虽然不显示仅使用表单元素进行成像的输入表单,但可以通过在表单中…

    2025年12月21日
    000
  • HTML创建表单时label标签怎么使用

    HTML创建表单时label标签的使用方法:1、将input标签放在label标签之间;2、通过“名称:”方式。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。 label标签在创建表单时是非常重要的,所以本篇文章就来给大家介绍一下关于label标…

    2025年12月21日
    000
  • 如何解决html、body元的高度问题

    本篇文章给大家带来的内容是关于如何解决html、body元素的高度问题,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 首先:html元素和body元素均为块级元素。 简述:有时我们会发现未设置height: 100%,html、body元素的高度却为当前窗口的高度,看上去像是设置了…

    2025年12月21日
    000
  • html是什么

    html语言是网络上的通用语言,也是比较简单的语言,对于想要在前端行业发展的人来说,html是必须要学的语言。那么,今天我们要来讲一下html是什么语言?html什么意思?以及html语言特点。 什么是html? HTML的英文全称是HyperText Mark-up Language,中文名是超文…

    2025年12月21日
    000
  • 如何在网页地址栏中添加特定图标?

    大多数在线网站都有自己的特定图标(如下图),这个图片一般会在网站的地址栏上显示。在大多数情况下,它们会被用作网站的标志。那么如何在网页地址栏添加特点图标?本篇文章就给大家介绍在网页地址栏上添加特点图标的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们要知道这个特定图标…

    2025年12月21日 好文分享
    000

发表回复

登录后才能评论
关注微信