HTML中的图片标签＜img＞

一：img标签——向网页中引入一个外部图片，

img标签自结束标签

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

1:属性：

src：设置一个外部图片的路径，路径规则跟超链接是一样的

我们所要使用的路径全都是相对路径——相对路径指相对于当前资源所在目录的位置

alt：可以用来设置在图片不能加载时，对图片的描述

搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width：可以用来修改图片的宽度,一般使用px作为单位

height ：可以用来修改图片的高度，一般使用px作为单位

注意：

1:宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小

如果两个值同时指定则按照你指定的值来设置

2:一般开发中除了自适应的页面，不建议设置width和height

大图变小，会多占内存，小图变大会失真

3:pc端，需要多大的图，就裁多大的

移动端，进场会对图片进行缩放（大图缩小）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>图片标签</title></head><body><img src="img/img/hg.gif" alt="胡歌11122" width="400px" height="300px" /><imgwidth="400px"height="300px"src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fx0.ifengimg.com%2Fucms%2F2022_09%2FED3ADAAB7608B3A42AC1C8BA541E38C9AEB1233C_size71_w1200_h800.jpg&refer=http%3A%2F%2Fx0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648535785&t=e8550f6fe1e0595c75361933f5891b66"alt="乌克兰"/></body>
</html>

HTML中的图片标签＜img＞相关推荐

小程序中image 图片标签的使用
小程序中image 图片标签的使用(注意这里和html的img的不同) 一. src 指定要加载的图片的路径图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100 二. mod ...
【HTML 教程系列第 17 篇】什么是 HTML 中的图片标签 img
这是[HTML 教程系列第 17 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:什么是图片标签 img 二:img 的属性 1:src 属性 2:alt 属性 3:title 属性 4:wid ...
在vscode的html文件中写入图片标签显示“二进制文件”无法打开解决办法（自记录）
学习html过程中练习创建包含图文的新闻类网页,发现图片标签无效(新闻文字内容来源网络,侵删) vscode显示图片为二进制文件,不能打开的问题自己检查网页代码许久没有发现问题,在浏览器也没有找到与 ...
HTML中的图片标签
img标签(image)的简介: 当我们要想在网页向当前界面中引入一个外部图片,可以使用img 标签.(img标签是一个自结束标签,即:不是成对出现的) 图片类型:常见图片格式:bmp,jpg,png ...
HTML中的图片标签，真的如你认为的那么简单吗？
今天讨论一个很有意思的话题: HTML 中的图片真的那么简单吗? HTML 中的图片 <img>:图像嵌入元素 MDN Web Docs 地址:https://developer.mozi ...
java正则表达式提取html中的图片标签img src=
需求:将网页分享给其他人,JShare的分享模板如下: 其中有标题(红色).内容(黄色).图片(绿色),但是接口中没有给图片的URL,而html格式的内容中有<img src="htt ...
在html语言中段落标签是,HTML的基本结构、段落标签、空格标签、标题标签、图片标签详解...
本次主要给大家介绍下HTML的基本结构.段落标签.空格标签.标题标签.图片标签的用法,用一种相对通俗一点的语言,容易懂的文字让大家快速掌握html.尽量不用或少用专业术语.以下所写的内容希望能帮助到大 ...
java提取word中的图片
一.项目中需要用到word的导入,word 里面的内容由图片,文本,公式等,步骤为:将文档另存为xml格式 1.提取图片,如下是word xml 中的图片标签,具体分析下内容,首先需要获取 w:dra ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...

HTML中的图片标签＜img＞

HTML中的图片标签＜img＞相关推荐

最新文章

热门文章