HTML基础知知识(一)——img标签

最新推荐文章于 2024-08-13 01:30:21 发布
最新推荐文章于 2024-08-13 01:30:21 发布
阅读量2.6k 收藏 13
点赞数 6
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44218929/article/details/138091577
版权
本文详细介绍了HTML中的<img>标签在插入图片时的作用，包括src属性用于引入图片路径，alt属性为备用文本，width和height设置尺寸，title属性定义悬停文本，以及相对路径和绝对路径的区别，强调了服务器环境下的路径选择原则。
摘要由CSDN通过智能技术生成

img标签
英文名：image(图片)
单标签、文本级标签
作用：在指定位置插入一张图片
img标签的属性：
(1)src：引入图片的路径
(2)alt：图片加载不出来时候的替换文本
示例:
在这里插入图片描述在这里插入图片描述
(3)width:设置图片的宽度
(4)height:设置图片的高度
示例:
![在这里插入图片描述](https://img-blog.csdnimg.cn/98bc78e223e94fcdb02c1cdde49651a7.png在这里插入图片描述在这里插入图片描述
实际工作中宽度和高度并不会共同使用，因为如果只单独设置了一个属性比如宽度，高度会等比例进行缩放。
示例:在这里插入图片描述
在这里插入图片描述
(5)title:设置鼠标移上图片时候的悬停文本
在这里插入图片描述
在这里插入图片描述
(6)border:给图片添加边框在这里插入图片描述
在这里插入图片描述
真正添加边框是通过CSS实现的，因为边框不可能只有黑色。
在这里插入图片描述
在这里插入图片描述
2、相对路径和绝对路径
相对路径:从html文件出发，找到对应图片位置的路径。进入到某个文件夹使用“/”，出某个文件夹使用“…/”，如果需要出多个文件夹，使用多个…/。在这里插入图片描述
在这里插入图片描述
html文件在案例1文件夹中，金门大桥图片在images文件夹中，先出案例1文件夹，再进入images文件夹。
在这里插入图片描述
在这里插入图片描述
绝对路径:分为盘符路径和网站的绝对路径。

盘符绝对路径:通过盘符根目录去查找对应文件的位置，工作中不使用这种方法，因为服务器没有C盘这些目录。在这里插入图片描述在这里插入图片描述
网站的绝对路径
复制网站图片的地址粘贴至src
< img src=“https://pics0.baidu.com/feed/fd039245d688d43f8e8b9ac23f4294130ef43b47.jpeg@f_auto?token=be69b910493624eab105aac87409b2ff” alt="">在这里插入图片描述
在这里插入图片描述

hello2024
关注
html 图像 img 标签
qq_34028001的博客
01-17 1392
文章目录HTML基础结构 HTML基础结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>html结构</title> </head> <body> ...
深入解析 img 标签的多维应用
weixin_40348267的博客
04-14 1783
在上述代码中，首先选择所有带有 data-src 属性的图像元素，然后通过 Intersection Observer 监听这些图像是否进入视口，一旦进入视口，将 data-src 属性的值赋给 src 属性，从而实现懒加载。看到这里的朋友，关于 <img> 标签的内容，可以好好吸收下，<img> 标签的懒加载和预加载都是面试中常考的知识点，上面内容中关于 HTML5 和 javascript 的内容在后续的系列中都会学到。8.图像预加载：通过在页面加载前预加载图像，可以提高用户体验。
在 HTML 文件中添加图片的完整指南
最新发布
T19900的博客
08-13 4306
通过本文的介绍，你应该掌握了在 HTML 中添加和调整图片的基础知识。这些技巧不仅能帮助你优化网页的视觉效果，还能提高网页的可访问性和响应式表现。无论是简单的图片展示，还是复杂的样式调整，正确使用<img>标签都能让你的网页更加生动和吸引人。
img标签、多媒体标签和表格 布局
m0_62976216的博客
12-16 1507
1.img标签定义 img 元素向网页中嵌入一幅图像；<img> 标签有两个必需的属性：src属性和alt属性。 一些常用的图片格式：JPG PNG GIF BMP SVG等 基本代码格式： <img src=" "> alt ---如果图片是因为浏览器或者路径的问题加载不出来的时候，会显示图片的名字，alt的值 width 、height ------- 设置图片的宽度和高度 单位是像素px 或百分比（X%）一定要遵循图片原本的高度和宽度的比例 bor...
HTML学习第八章(HTML图像--＜img＞标签)
Baileys_99的博客
03-05 5000
HTML学习第八章：HTML 图像标签：在 HTML 中，图像由 标签定义。img代表单词image，意为图像。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。2.绝对路径与相对路径。相对路径：资源相对于当前网页的地址。绝对路径：资源的完整地址。
HTML中的＜img＞标签使用指南
一起coding，一起嗨。
06-16 995
HTML中的标签使用指南
HTML中的img标签
想要成为大佬的彪彪
06-15 1万+
在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。 定义图像的语法是： <img src="url" /> URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于images 目录中，那么其 URL 为/images/boat.gif。 下面来为大家介绍一下img标
HTML基础——图像标签（img标签）
Ariel_欢
01-09 2万+
一、思维导图： 二、代码： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>img标签</title> </head> <body> • <img src="花花.jpg" /> • &l
HTML - IMG标签
seaalan的博客
11-19 361
base64位图片显示 &amp;lt;img ng-src=&quot;data:image/jpg;base64,{{vm.order.checkResult.pharmacistPhoto}}&quot; style=&quot;width: 350px; height: auto; max-height: 500px; max-width: 350px; min-width:350px; overflow:hidden; ...
『HTML系列』图像标签 img
热门推荐
老__L的博客
10-24 3万+
本文主要介绍img标签。 img>将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
HTML——Img标签
Zjaun的博客
02-11 831
img标签 一些相关属性 1. 在图片上的具体位置设置链接跳转 具体代码 &amp;amp;amp;lt;img src=&amp;amp;quot;自己所要引入的图片路径&amp;amp;quot; border=&amp;amp;quot;1&amp;amp;quot; width=&amp;amp;quot;500&amp;amp;quot; usemap=&amp;amp;quot;#planetmap&amp;amp;quo
HTML——基本标签 ※
Junds0的博客
12-27 1178
任务描述本关任务：完成编写创建第一个 HTML 标签的小程序。相关知识。
html知识笔记（三）——img标签、form表单
木羊的专栏
04-27 5037
标签：在网页中插入图片。 语法： <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 举例： <img src = "myimage.gif" alt = "My Image" title = "My Image" /> 讲解： 1、src：标识图像的位置； 2、alt：指定图像的描述性文本，当图像不可
前端开发：HTML知识总结——常用H标签
ydc222的博客
09-09 1102
一些基本的常用标签
Html基础知识学习——兼容问题与解决方法(十六)
weixin_45496521的博客
07-14 784
1.计算一定要精确，不要让内容的宽高超出我们设置的宽高，在IE6下内容会撑开设置好的宽高 2.元素浮动，宽度需要内容撑开，就给里面的块元素都加浮动 3.在ie6.ie7下元素要浮动并在同一行 就给这些元素都加浮动 4.注意标签嵌套规范 5.IE6下元素高度小于19px的时候。会被当做19px来处理 解决方法：overflow:hidden 6. border:1px dotted
前端基础（HTML）——html介绍 &amp； 常用标签 &amp； 几个案例_html基础标签及示例
2401_84562210的博客
05-05 998
*Html 的代码注释这是 html 注释，可以在页面右键查看源代码中看到**做标题使用，特点：1.独占一行；2.行间有空隙；3.加粗h1标题，独占一行，加粗，段前段后间距。
HTML中img标签
qq_37805832的博客
06-05 1193
第一种img方式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="./1.jpg" /> </body> </html> 第二种img方式： <!DOCTYPE html> <
HTML img标签
m0_64819482的博客
01-18 433
img 标签可以在 html 页面上显示图片 img 标签是图片标签,用来显示图片 src 属性可以设置图片的路径 width 属性设置图片的宽度 height 属性设置图片的高度 border 属性设置图片边框大小 alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容 使用: <img src="图片路径"> <img src="图片路径" ...
HTML --img标签
cmchenmei的博客
03-14 2841
&lt;img src ="" alt ="" tittle =""&gt; src 属性 1.网上的链接 &lt;img src ="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3228814396,1351481453&amp;fm=27&amp;gp=0.jpg"&gt; //引用网上图片
html img标签里属性介绍
05-10
在 HTML 中，`<img>` 标签用于在网页上嵌入图像。`<img>` 标签有以下属性： - `src`：指定图像的 URL 地址，该属性是必需的。 - `alt`：指定图像的替代文本，当图像无法被显示或加载时，会显示该文本。 - `title`：指定当鼠标悬停在图像上时显示的文本。 - `width`：指定图像的宽度。 - `height`：指定图像的高度。 - `align`：指定图像在页面中的对齐方式。可以设置的值包括 `left`、`right`、`center`、`top`、`middle`、`bottom` 等。 - `border`：指定图像的边框宽度。 - `hspace`：指定图像与周围元素之间的水平空白间距。 - `vspace`：指定图像与周围元素之间的垂直空白间距。 - `usemap`：指定一个图像映射的名称，用于在图像上定义可点击的区域。 这些属性可以通过在`<img>` 标签中使用键值对的方式来设置，例如： ```html <img src="image.jpg" alt="A beautiful image" width="500" height="300"> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值