简述：

HTML中以下几种方式可以用来创建一个图片按钮（或是图片超链接）：

a标签
button标签
input标签中的image类型

下面一一示例。

详解：

1、a标签

a标签用于生成超链接，当内嵌img图片标签时，点击对象就是该图片。

点击会跳转到指定链接。

创建格式：

<a href="http:\\www.baidu.com" target="_blank"><img src="111.jpg" width="80" alt="百度">
</a>

href属性：超链接地址
target属性：新链接打开方式（_blank为新窗口形式）
alt属性：备用信息，当图片丢失时显示该文字

创建结果：

2、button标签

与a标签一样，当内嵌图片标签时，该按钮就是图片按钮。

当不绑定事件时，点击无任何反应。

创建格式：

<button><img src="111.jpg" width="80" alt="图片">
</button>

创建结果：

3、input标签

input标签中，当标签类型为image时，就可以产生一个图片按钮。

点击时会在url中反馈像素点坐标。

创建格式：

<form action=""><input type="image" src="111.jpg" alt="图片" width="300">
</form>

src：图片链接
width：图片像素宽度（宽度和高度只设定一个的话，HTML会根据比例进行整体图片的放大或缩小）

创建结果：

可以看出，当点击图片时，url中会反馈点击的像素点坐标。

学习整理，若有问题请指出。

HTML：a、button、input三种标签下的图片按钮相关推荐

vue在生产环境、测试环境和开发环境，三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
有10个站连接到以太网上。试计算一下三种情况下每一个站所能得到的带宽。
问题有10个站连接到以太网上.试计算一下三种情况下每一个站所能得到的带宽. (1)10个站都连接到一个10Mb/s以太网集线器: (2)10个站都连接到一个100Mb/s以太网集线器: (3)10个 ...
IOS开发之自定义Button(集成三种回调模式)
前面在做东西的时候都用到了storyboard,在今天的代码中就纯手写代码自己用封装个Button.这个Button继承于UIView类,在封装的时候用上啦OC中的三种回调模式:目标动作回调,委托回调 ...
i5功耗最低的cpu_CPU真的很费电？三种环境下处理器功耗实测
2013-4-7 06:17 [天极网DIY硬件频道]在我们进行装机搭配时,往往在选购电源方面有很大的误区,即使不使用独立显卡也要选择大功率电源.很多DIY玩家总认为CPU是耗电大户,经常以CPU和显 ...
【Qt】为应用程序设置标题栏、状态栏、可执行程序显示三种状态下的图标
Qt为应用程序添加图标的几种方式应用程序的图标分为: 程序左上角显示的标题栏的图标: 程序打开后在任务栏显示的状态栏图标: 程序在文件管理器中显示的可执行程序图标: 设置这几种图标的方式有以下几种. ...
requestbody接收不到参数_使用Spring MVC解析嵌套参数在三种 ContentType 下的绑定方式...
1.关于三种 Content-Type multipart/form-data 请求中既可以携带文件,又可以携带参数.其中参数以键值对的方式传递,参数之间.参数与文件之间以 content-dispo ...
三种保存电脑本地图片方法
1这是我最开始存储图片到项目获取地址的方法用下面这个方法去获取我想要存地址结果很不理想,每次获取的是target下的目录,(ps:我用的是idea 发布用的是exploded包,不知道和这个有关系没) ...
html背景图适应div_体验css+div 之三种使网站背景图片自动适应浏览器大小的方法...
不管你怎么变化浏览器窗口大小,背景图始终会自动调节大小. 1 . 第一次方法: 我第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕.当浏览器窗口大小没有图片大时,它将自动隐藏 ...
ubuntu server 10.4下Apache2的三种虚拟主机的实现
引用百度百科:虚拟主机的关键技术在于,即使在同一台硬件.同一个操作系统上,运行着为多个用户打开的不同的服务器程式,互不干扰.而各个用户拥有自己的一部分系统资源(IP地址.文档存储空间.内存.CPU时间 ...

HTML：a、button、input三种标签下的图片按钮

简述：

详解：

1、a标签

2、button标签

3、input标签

HTML：a、button、input三种标签下的图片按钮相关推荐

最新文章

热门文章