怎么用代码插入图片网页中插入图片html代码的正确方法
说到在网页里插入图片，咱们最常用的就是html的<img>标签啦！它超简单，关键点就是：
src属性后面跟的是图片的路径，也就是图片的网址或者存放地址。width和height可以帮你设置图片的宽度和高度，单位一般是像素。- 还有
alt，这个是当图片加载不出来时显示的文本，顺便还能帮SEO加分，重要的很。
举个栗子，假如你的图片叫1.png，放在和html文件同一个文件夹里，那代码就是：
<img src="1.png" alt="描述图片内容" width="300" height="200">
超简单吧！还有个小细节要注意，<img>是自闭合标签，没啥结束标签，直接写就好，不用搞什么</img>。
你还可以根据需要调整宽高，比方说：
- 原始大图
- 改小点尺寸
- 改大点尺寸
只要改width和height，网页里图片大小说变就变，想怎么调都随你！
怎么查看和提取网页图片的代码及用法
那如果你看到网页上的好看图片，想知道它的代码咋写，或者想提取图片怎么办呢？别急，哥这就告诉你，贼简单！
- 查看图片代码
在浏览器里，右键点你喜欢的图片，选择“查看图片信息”或者“查看元素”，浏览器会帮你定位到那段代码。这段代码一般就是：
html
<img src="图片地址" alt="描述">
你还可以直接看网页源代码（右键-查看页面源码），用查找功能搜<img>标签，那些图片的地址都在里面。
-
提取图片代码
有技术点的小伙伴可以用Python的fitz库（pymupdf的一个模块）配合正则表达式来抓取图片代码，自动化提取超级给力。但对于大多数朋友来说，右键保存图片或查看源码已经足够啦！ -
注意图片路径
大家容易犯的坑是路径写错了！图片路径可以是相对路径（相对于html文件的位置）或者绝对路径（完整网址）。举个例子：
- 同文件夹下：
src="1.png" - 子文件夹img内：
src="img/1.png" - 网络图片：
src="https://example.com/image.jpg"
- CSS设置背景图
有时候，我们不光用<img>，还会用css给元素设置背景图，比如：
css
.box {
width: 400px;
height: 300px;
background-image: url('../image/bird.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
这样，div就能显示图片了，很适合做页面美化。
相关问题解答
-
网页插入图片必须用img标签吗?
哎，当然不一定啦！普通情况下用<img>是最直接最方便的，但你也可以用css的background-image来显示图片，尤其是想当背景图那种，用css超炫的。不过，<img>标签更利于SEO和辅助工具哦，所以常规照片还是推荐用它。 -
怎么保证图片加载失败时网页不会奇怪?
嘿嘿，这个很简单，你给<img>标签加个alt属性，比如alt="图片内容描述"，万一图片加载不出来，浏览器就显示这段文字，用户基本不会迷路。而且搜索引擎也爱看这个，能帮你网站加分，nice！ -
图片宽度高度写多少合适?
图灵，没啥固定规则，主要看你网页布局咋整。一般写像素或者百分比都行，比如width="300"表示300像素宽，也可以写width="50%"相对宽度。不过，记得保持图片比例别变形，按比例缩放最美观，对吧！ -
如何快速找到想要的网页图片代码?
简单两招，一是用浏览器右键点击图片，选“查看元素”（或者“检查”），老司机首页直接跳到代码片段；二是直接看网页源代码，Ctrl+F搜<img>标签，那你想找啥图片的地址都有。超方便，特别是你想拿来用的时候！
发表评论