Html<img>标签特写 2017-03-10 AM

本文介绍了如何在HTML中使用图片并创建不同类型的链接,包括基本图片插入、图片作为超链接、以及划定图片区域创建链接的方法。

 

1、插入图片

<img src="picture1.gif" width="300" height="100" title="图片1"/>

注:

(1)title属性:当鼠标移到图片时显示图片1.

(2)Title与alt 的区别:

           Alt是当图片不存在时,替代图片的文字;title是对图片的进一步描述和说明。

 

2、用图片创建超链接

(1)<a href="http://www.baidu.com.cn">

              <img src="picture1.gif" width="300" height="100" title="图片1"/>

</a>

效果:点击该图片可以链接到百度页面;

(2)<a href="#">

              <img src="picture1.gif" width="300" height="100" title="图片1"/>

       </a>

效果:链接到顶部(创建本页面锚点)  #不要忘

 

3、划定图片区域创建超链接(不常用)

步骤(DW为例):

 

设计视图---选中图片---在左下角选(长方形,圆形,或多边形图标)---选中截取图片---输入链接地址---保存---查看代码

 

<img src="2.jpg" width="100px" height="100px" usemap="#Map" title="哈哈哈" border="0"/>

         <map name="Map" id="Map">

           <area shape="circle" coords="65,76,29" href="http://www.baidu.com" />

</map>

注:coords: 表示坐标 

长方形(rect)会有四个数字代表左上角和右下角的坐标

圆形(circle)前两个数字为圆心坐标,后一个数字为半径

多边形:将图片的每一个转折点的坐标一次填入

Map:表示图片名称  要求:与<map>标记中的name参数值一致

 

 

Reflection:

Maybe It's because I have learned something about what I am learning now, I did the homework simply without some basic knowledge. Please remember its your homework, complete it with all the knowledge you just learned and make them show on the screen instead of thinking in your own mind. And learn from zero.

转载于:https://www.cnblogs.com/chenguanai/p/6529512.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值