图片标签img

最新推荐文章于 2023-03-05 22:09:46 发布
最新推荐文章于 2023-03-05 22:09:46 发布
阅读量256 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44489591/article/details/104823580
版权

1.作用

用于向当前页面中引入一个外部图片

img元素属于替换元素（块和行内元素之间，具有两种元素的特点）

2.属性

src（必须）
指定外部图片的路径（相对路径）
alt
图片描述，默认不显示。 在浏览器无法加载图片时出现
搜索引擎会根据alt中的内容中搜索图片
不写则不会被搜索引擎搜索到
width
图片宽度（单位：像素）
height
高度（单位：像素）

width和height只设定一个时，图片按照等比例缩放

注：在pc端一般不修改图片，用切图保证图片的清晰度节约内存，
移动端，经常对图片进行缩放（大图缩小）

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!--图片标签属于替换元素 -->
    <!-- 本地图片 -->
    <img  height="200px"  src="./img/girl.png" alt="图片无法加载时显示的文字，搜索引擎会根据该关键字检索到图片">

    <!-- 引入外部图片 -->
    <img height="300px" src="https://images.pexels.com/photos/744780/pexels-photo-744780.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="若图片隐私，可不设置该属性">

    <!-- 设置图片宽高
        height:高度
        width:宽度
        只设置一个表示同比例缩放

        pc端不建议设置图片大小，常采用切图保证图片清晰度和减少内存
        移动端设置，一般是大图缩小
    -->
    <img height="500px" src="./img/flower.jpg" alt="桃花">
    
</body>
</html>
Samatha_子衿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片打标
sinat_28371057的博客
10-20 630
在物体检测问题中，第一个需要解决的就是给训练集中的图片打标，所谓打标，就是用一个文件来描述图中物体的位置框坐标（xmin，ymin，xmax，ymax），以定位物体的位置。 一个比较好的打标工具是LabelImg　(推荐用windows版本，安装比较方便，https://pan.baidu.com/s/1d27UMi　)。编译好后只要要在图片上轻点鼠标就可以得到PASCAL VOC格式的XML文件（PASCAL VOC为图像识别和分类提供了一整套标准化的优秀的数据集，从2005年到2012年每年都会举行一
图像标签
weixin_43431593的博客
04-26 1万+
1、书写方法 <img src="./timg.jpg"/> 2、参数 （1）代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
微信小程序image的src使用三元运算符
weixin_42082108的博客
05-21 5080
<imagesrc="{{hasIcon ? icon : iconPlay}}"></image> <text >{{(topic.tab=="ask")?"问答":((topic.tab=="share")?"分享":"招聘")}}</text> <view class="weui-grid-box" style="{{item.modeId == default ? 'background-image: url(../../i...
HTML学习第八章(HTML图像--＜img＞标签)
Baileys_99的博客
03-05 4735
HTML学习第八章：HTML 图像标签：在 HTML 中，图像由 标签定义。img代表单词image，意为图像。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。2.绝对路径与相对路径。相对路径：资源相对于当前网页的地址。绝对路径：资源的完整地址。
HTML系列之图像标签img
热门推荐
老__L的博客
10-24 3万+
本文主要介绍 img 标签。 将一份图像嵌入文档。没有基线（baseline）;根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。
img标签和p标签是行内元素还是块级元素？以及p标签中可以放img标签吗？
吴冬雪的博客
05-21 2万+
其他块级元素：常用的有：　div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table另外还有：address、isindex、menu、noframes、noscript、pre、blockquote、center、dir、块级元素，默认宽度占满一行。HTML 是段落标签，除了可以添加文字内容外，完全可以添加其他。类似于 inline-block ，可以被p标签包裹。比如p是居中，图片也中了。也包括IMG图片标签。
图片标签IMG内alt和title属性.docx
11-23
图片标签IMG内alt和title属性详解 图片标签IMG是HTML语言中用来嵌入图片的标签，而alt和title是IMG标签中的两个重要属性。本文将详细解释IMG标签内alt和title属性的语法、作用、SEO优化的重要性，以及如何正确地...
用正则表达式替换图片地址img标签
09-04
- `<img>`：匹配img标签的开始。 - `[^\>]*`：匹配任意数量的非`>`字符，这允许我们捕获img标签内的所有属性。 - `src=['"]([^'"]+)['"]`：这部分是关键，它寻找以`src=`开头，后面跟着一个单引号或双引号，然后是...
Android开发实现webview中img标签加载本地图片的方法
08-29
"Android开发实现webview中img标签加载本地图片的方法" Android开发中要实现webview中img标签加载本地图片，需要使用到WebView组件和WebSettings类。首先，需要在AndroidManifest.xml文件中添加INTERNET权限，以便...
图片打标签工具labelImg.zip
07-15
LabelImg 是一个可视化的图像标定工具。在使用前需配置环境python + lxml。YOLO，SSD等目标检测网络所需要的数据集，均需要借此工具标定图像中的目标。生成的 xml文件是遵循 PASCAL VOC 的格式的。
HTML中img标签只显示图片中心位置的方法(三种方法)
09-28
这里介绍三种方法来实现`<img>`标签只显示图片中心位置的效果。 ### 方法一：使用CSS的`clip: rect()`和`position: absolute` 这种方法利用了CSS的`clip`属性来剪切图片的显示部分。首先，你需要将`<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标签特性及块元特性
weixin_46349935的博客
08-12 1300
1、行内元素：a img span b strong input select section。度如果不设置,默认为父元素的宽**(父元素宽度100%)** 父元素的高度不继承。2、块级元素：div p table ul ol li h1-h6 dl dt。2.元素高度,宽度,行高,和等边距都可以设置。,可以自由设置宽高,这种内容可替换的元素。1.img不会独占一行,一行可以放多个。1.每一个块级元素都是独占一行;2.img是行元素,但具有。...
13 图像标签(重要)
hello_sunny123的博客
06-19 2734
1.图像标签 在HTML标签中, <img>标签用于定义HTML页面中的图像。 <img scr="图像URL"/> img是单词image的缩写,意为图像。 src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。 所谓属性:简单理解就是属于这个图像标签的特性。 图像标签 代码示例： 注意把图片和程序放到一个文件夹里，这样子它才能找到 <!DOCTYPE html> <html lang="en"> <head>
HTML之img图形标签的显示特点
不负好时光
05-29 2782
初学java，学习WEB阶段发现的有趣现象1.图片标签简介图形标签：&lt;img /&gt;（自关闭标签） 属性： src:图形地址 width:宽度    height:高度   border:边框 align:对齐方式，代表与图片相邻的文本的相对位置（有三个属性值：top middle bottom） alt:图片的文字说明2.width和height属性对图片显示的影响原图：1...
7.1 图像标签img
mmsx2017的博客
03-11 862
一、img标签简介 属性 说明 src &nbsp;&nbsp;&nbsp;图像的文件地址 alt &nbsp;&nbsp;图片显示不出来时的提示文字 title 鼠标移到图片上的提示文字 src和alt这两个属性是img标签必不可少的属性。title属性的值往往都是跟alt属性的值相同。 二、img标签src属性 src，即“source（源文件）”。im...
HTML图片标签
qq_42057046的博客
05-09 1776
图像标签img 单词缩写image HTML网页中我们会经常看到各种各样的图片，而这些图片都是使用图片标签<img>来实现的，图像标签<img>的基本语法格式如下 <img src="图像的url" /> 在图像标签里拥有很多属性，如下 <img />标签属性 属性 属性值 属性含义 src URL(路径，这里指图片...
html 中 img图像标签
qq_51277605的博客
02-22 2007
大部分标签的 格式 ： 标签 标签属性 属性值 <img/> <a></a> background-image 的引用区别 <img src="LD.gif"/> <a href="#">LD</a> body { background-image: url();} 图像标签是单标签 <img>标签用于定义html页面中的图像 <img src=”图像URL”/> 图像标签的属性: src alt ti
img标签的特殊之处
weixin_44343449的博客
06-26 232
img属于替换元素。 替换元素：根据标签和属性来显示的元素，一般具有内置的宽高属性。 img同时具有行内元素，行内块，和块级元素的特性。既可以默认在一行显示（inline），也可以设置其宽和高(行内块)，而且当设置一个图片的margin时，会同时作用到同一行的元素（inline-block） 自己总结，欢迎指正。 ...
作为一个前端程序员，如何设置图片标签img居中显示
最新发布
06-02
要让图片标签img居中显示，可以使用CSS样式来实现。具体方法如下： 1. 首先，给img标签添加一个样式类名，例如“center-img”。 2. 在CSS文件中定义.center-img的样式，设置其display为block，使其变成块级元素； ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值