在html中嵌入图片的方式是用img标签。

< img src="picture.jpg" />

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> 

< title >浙江网盛生意宝股份有限公司< /title > 

< /head > 

< body > 

< img src="picture.jpg" /> 

< /body >

< /html >

以上是一个最简单的在网页中插入图片的方式。其中，src属性是指要插入的图片所在文件夹位置。可以是相对地址，也可以是绝对路径。

在浏览器上使用的图片类型有限，通常为gif和jpeg格式的图片。由于某些格式的图片不能在浏览器中显示，所以在插入网页图片前应先使用ps等图像处理软件进行图片格式转化。

在网页中放置的图片的原始大小往往与设计师需要的图片大小不同。css的width和height属性适用于控制图片的宽度和高度。

width:picwidth

height:picheight

其中picwidth和picheight可以使用任何长度单位来装饰。通常情况下使用像素为单位。 如果原始图片不是一比一的关系，在缩放或放大后会明显拉伸变形。要使图片不变形，可以使用百分比控制图片大小或单独控制高度（宽度） 。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> 

< title >浙江网盛生意宝股份有限公司< /title > 

< style > 

 img{ width:150px; height:150px}/*设置图片的宽度为150像素，高度为150像素*/ 

< /style > 

< /head > 

< body > 

< img src="picture.jpg" /> 

< /body > 

< /html >

使用百分比设置图片的宽高能使图片按照等比例缩放。图片最终高度（或宽度）=img标签的父级元素的高度（宽度）X缩放百分比。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />

< title >浙江网盛生意宝股份有限公司< /title >

< style > 

 img{ width:50%; height:50%}/*设置图片的宽度为父元素的50%，高度为父元素的50%*/ 

< /style >

< /head >

< body >

< img src="picture.jpg" /> 

< /body >

< /html >

单独设置图片的宽度，图片按照宽度缩放，高度是按照宽度的缩放比例自动变化，整张图片在缩放后比例不变。单独设置图片的高度，同样。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> 

< title >浙江网盛生意宝股份有限公司< /title > 

< style > img{ width:200px; /*设置图片的宽度为200px*/ < /style > 

< /head > 

< body > 

< img src="picture.jpg" /> 

< /body > 

< /html >

为放置在网页上的图片增加边框可以使用图片的边界清晰，排布整齐，也可以使图片更美观。

css的border属性适用许多元素，同样适用于图片。以下是使用border属性的通用语法： 

border-width:width;设置边框的宽度 

border-style:style;设置边框的样式 

border-color:color;设置边框的颜色 

其中border-width是指边框的宽度，width可以用任何长度单位设置，border-style是指边框的样式，style指的是设置边框样式的关键字。border-color是指边框的颜色，color可以用任何颜色单位设置。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> 

< title >浙江网盛生意宝股份有限公司< /title > 

< style > 

img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素；设置边框样式为实线；设置边框颜色为红色*/ 

< /style >< /head > 

< body > 

< img src="picture.jpg" /> 

< /body > 

< /html >

边框属性不但可以添加边框，还可以在某些特定的场合去掉边框。

由于网络传输等问题会造成网页上某些图片不能显示。在图片不能正常显示的情况下，为了让浏览者获悉图片包含的信息，应增加图片的替换文字。使用img标签的alt属性，能给图片增添替换文字。在图片不能正常显示的情况下，该替换文字就会出现在浏览器中。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 

< html xmlns="http://www.w3.org/1999/xhtml" > 

< head > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> 

< title >浙江网盛生意宝股份有限公司< /title > 

< style > 

img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素；设置边框样式为实线；设置边框颜色为红色*/ 

< /style > 

< /head > 

< body > 

< img src="picture.jpg" alt="该图片不能显示，该图片原为风景图片"/> 

< /body > 

< /html >

在网页上的图片常常被作为一个超链接，以下是把图片设置为可单击的链接的代码：

< a href=””>< img src=”picture.jpg” alt=”该图片不能显示，该图片原为风景图片”/ >< /a>

其中在a标签中的href属性后的#符号可以用任意网页地址替换。

合理排布图片和文字能使网页显得生动并且充满说服力。图文混排是网页制作的一项重要手段。