在网页中插入图片html图片代码方法：
步骤：
一、html图片标签语法
<img src="divcss-logo-201305.gif" width="165" height="60" />img介绍：
src 后跟的是图片路径地址
width 设置图片宽度
height 设置图片高度
二、具体html 图片显示实例
在html源代码中分别插入三张图片，一张原始大、一张将宽度高度改小小、一张将宽度高度改大。
1、实例完整html代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>图片插入html 在线演示</title>
</head>
<body>
<p>原始大图片</p>
<p>
<img src="divcss-logo-201305.gif" width="165" height="60" />
</p>
<p>改小图片</p>
<p>
<img src="divcss-logo-201305.gif" width="105" height="30" />
</p>
<p>改大图片</p>
<p>
<img src="divcss-logo-201305.gif" width="365" height="120" />
</p>
</body>
</html>
2、html插入图片实例截图
3、在线演示：
在html网页中显示图片，插入图片，通过使用img标签来实现，通过也可以将图片作为CSS网页背景图片显示插入到Html网页中（css 背景图片）。
图片超链接和文字超链接是一样的，在图像上插入链接：点击图片，跳转页面：<a></a>之间插入<img/>元素。如：<a href="超链接地址"><img src="路径" alt="替代文本"></a>。（如图）
2、局部链接
在某种情况下，我们不希望整张图片加链接。希望的效果是：点击图片某个区域，链接到某地址。是通过map标签和<area>标签结合使用的。如：
(1)、<img src="超链接地址" alt="替换文本" usemap="#map名称" width="链接区域宽度" height="链接区域高度"/>
(2)、<map name="map名称" id="id名称"><area shape="描述区域的形状" coords="坐标" href="链接地址" target="打开方式" alt="替换文本" /></map>
扩展资料：
<img>元素向网页中嵌入一幅图像。
img元素的属性：
(1)、src：图片来源URL。
(2)、alt:规定图像的替代文本。
(3)、height和width:单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。
(4)、ismap ：将图像定义为服务器端图像映射。
(5)、usemap：将图像定义为客户器端图像映射。
(6)、longdesc： 指向包含长的图像描述文档的 URL。
<map>元素定义一个客户端图像映射。
map元素的属性：
(1)、id:为 map 标签定义唯一的名称。
(2)、name:为 image-map 规定的名称。
注意：<img>中的 usemap 属性可引用 <map>中的 id 或 name 属性（取决于浏览器），所以应同时向 <map>添加 id 和 name 属性。
<area>元素定义图像映射中的区域。
area元素的属性：
(1)、alt:规定图像的替代文本。
(2)、shape：用于描述区域的形状，rect\poly\circle\default可选,default指的是还没有被定义的区域。
(3)、coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。
(4)、href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"
(5)、target：和<a>标签的作用一样。
注意：area 元素永远嵌套在 map 元素内部。
参考资料：
百度百科-链接图像
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）