如何在HTML上插入图片

红太狼 2021-02-01 17:29 765阅读 0赞

在HTML中插入图片的方法有：直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设置src值来插入图片、innerHTML插入img属性来插入图片

如果一个页面中仅有文字会显得很单调，枯燥乏味，但是当我们添加了一些图片在上面时会显得好看多了，今天将向大家介绍如何在HTML页面上插入图片。

在HTML页面中插入图片需要用到html中的`<img>`标签
````
<imgsrc=""alt="">
````
img代表“图像”,它是图像在页面上显示。

src代表“来源”它告诉浏览器去哪里找图像，在写代码的时候最好将图片放置在一个文件夹下保存，通过这样的方式可以通过名称前面的子目录名称来调用图片

alt代表“文字”告诉浏览器如果找不到图像，就只显示该文本，或者将鼠标悬停在图像上就会弹出设置的文字

##Web的图像格式##

> .gif：是一种简单的格式，由一系列彩色图片元素或点，排列成一幅图片，是动图
> 
> .png：与gif格式类似但它具有部分透明度选项，只支持无损压缩。
> 
> .JPEG：JPEG格式是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式

**HTML插入图片方法**

直接在html代码内插入图片
````
<imgsrc="images/1.jpg">
````
**效果图：**

![format_png][]

## 在CSS样式中插入图片 ##
````
<style>

div{

width:450px;

height: 300px;

background-image: url("images/2.jpg")

}

</style>

</head>

<body>

<div></div>
````

**效果图：**

![format_png 1][]

利用JavaScript语言插入图片
````
<body>

<imgid="demo">

<script>

var demo=document.getElementById("demo");

demo.src="images/3.jpg";

demo.width="450";

demo.height="300";

</script>

</body>
````

**效果图：**

![format_png 2][]

## innerHTML方法插入图片 ##
````
<divid="demo"></div>

<script>

var demo=document.ElementById("demo");

demo.innerHTML='<imgsrc="images/4.jpg"width="450px"height="300px">';

</script>
````

**效果图：**

![format_png 3][]

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

[format_png]: /images/1612200744115.jpg
[format_png 1]: /images/1612200727946.jpg
[format_png 2]: /images/1612200703220.jpg
[format_png 3]: /images/1612200682999.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，765人围观）

还没有评论，来说两句吧...

相关阅读

相关前端如何在页面中插入图片？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 前端如何在页面中插入图片？ ⭐ 几个属性的意思 ⭐ 注意事项 ⭐ 写在最后 ---------

你的名字/ 2023年10月14日 13:58/ 0 赞/ 40 阅读

相关 rust - 如何在Vec上更新或插入？

我正在用Rust编写数据结构。它包含键值对的`Vec`。当插入结构时，我需要找到一个匹配的键并同时更新键和值(实际上是一个子指针)。代码看起来像这样，其中`pivots`是`r

﹏ヽ暗。殇╰゛Y/ 2023年01月24日 02:17/ 0 赞/ 164 阅读

相关在html中插入图片

在html中插入图片 ![在这里插入图片描述][20210324104409182.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

系统管理员/ 2022年11月12日 13:46/ 0 赞/ 214 阅读

相关 html5如何在图片上t添加视频播放,HTML5 视频、图片截图实例

(function() \{ "use strict"; var video, $output; //var scale = 0.25; var scale = 1;

深藏阁楼爱情的钟/ 2022年10月06日 09:51/ 0 赞/ 178 阅读

相关第三节 html插入图片

<html> <head> <title>插入图片</title> </head> <body>

比眉伴天荒/ 2022年07月12日 04:16/ 0 赞/ 191 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 303 阅读

相关 14. 如何在XPages中插入HTML

在经典的Notes Web开发中，我们经常需要在表单中插入HTML，即Pass-Through HTML，因为Domino Web引擎将表单上的设计元素转换成HTML时既原始丑

淡淡的烟草味﹌/ 2022年05月11日 16:52/ 0 赞/ 219 阅读

相关在HTML代码中要如何插入空格？

> [超文本标记语言（HTML）][HTML]会自动忽略空格。平常在编写代码的时候，用空格键、Tab键以及回车键产生的空格，都会被[HTML][HTML 1]自动忽略。那么我们

短命女/ 2022年01月05日 10:05/ 0 赞/ 403 阅读

相关如何在HTML上插入图片

在HTML中插入图片的方法有：直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设置src值来插入图片、innerHTML插入img属性来...

红太狼/ 2021年02月01日 17:29/ 0 赞/ 766 阅读

相关如何在html页面中插入视频

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签`<so...

小灰灰/ 2020年05月14日 10:34/ 0 赞/ 946 阅读