怎样在HTML上插入图片-百分百源码网

怎样在HTML上插入图片

发布时间：09/01 来源：未知浏览：关键词：

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

假如一个页面中仅有文字会显得很单调，索然无味，但是当我们增加了一些图片在上面时会显得好看多了，今天将向大家介绍怎样在HTML页面上插入图片。

【引荐课程：HTML课程、JavaScript课程】

在HTML页面中插入图片需要用到html中的<img>标签

<img src="" alt="">

img代表“图像”,它是图像在页面上显示。

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

alt代表“文字”告诉阅读器假如寻不到图像，就只显示该文本，或者将鼠标悬停在图像上就会弹出设定的文字

Web的图像格局

.gif：是一种简便的格局，由一系列彩色图片元素或点，摆列成一幅图片，是动图

.png：与gif格局相似但它具有部分透亮度选项，只支撑无损紧缩。

.JPEG：JPEG格局是当前网络上最流行的图像格局，是可以把文件紧缩到最小的格局

HTML插入图片办法

直接在html代码内插入图片

<img src="images/1.jpg">

结果图：

在CSS样式中插入图片

<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>

结果图：

利用JavaScript说话插入图片

<body>
<img id="demo">
<script>
	var demo=document.getElementById("demo");
	demo.src="images/3.jpg";
	demo.width="450";
	demo.height="300";
</script>
</body>

结果图：

Image 5.jpg

innerHTML办法插入图片

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>

结果图：

Image 7.jpg