图文详解HTML页面中添加图片的三种方法

　　方法一、用HTML中的img标签添加图片

　　最简单，最常用的就是直接使用img标签，并且可以根据需要设置图片的大小，代码如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　</head>

　　<body>

　　<imgsrc="img/picture1.jpg"/width="300px"height="180px">

　　</body>

　　</html>

　　效果图：

　　图片1.jpg

　　方法二、用JavaScript创建一个img元素来导入图片

　　先创建一个img元素，再设置这个img元素的路径，图片长和宽，最后将其插入到页面中，代码如下：

　　<scripttype="text/javascript">

　　varImage1=document.createElement("img");

　　Image1.src="img/picture1.jpg";

　　Image1.width=300;

　　Image1.height=180;

　　document.body.appendChild(Image1);

　　</script>

　　方法三、用JavaScript中的innerHTML动态插入图片

　　还是使用JavaScript中的方法，实质和方法二类似，只是写法不一样，创建img元素然后添加到HTML页面，代码如下：

　　<scripttype="text/javascript">

　　document.body.innerHTML='<imgsrc="img/picture1.jpg"height="180"width="300"/>';

　　</script>

　　图片效果和方法一一样。

　　以上介绍了在HTML页面中添加图片的三种方法，一般我们都会直接使用img标签添加图片，但有时也会使用JavaScript动态插入图片，具体选择什么方法，看项目需要。小白可以自己动手尝试，希望可以帮助到你！

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54646.shtml