标签button和标签input的区别

我在写代码的过程中,遇到了坑,所以有必要写出来纪念一下啦!

名词解释:

  • 图像映射(热点地图):带有可点击区域的一幅图像。后续会做补充。
  • 图像映射举个例子:图像映射实现在一幅地图的网页上做映射,点击辽宁区域,跳转到该区域的政府官网。

一、相同点

  • 规范中指名:可以用<button>和<input>来做表单按扭,作用相同。

二、区别

1.定义和用法
  • <button>标签之间,可以放置文本或图像。标签之间的所有内容都是按钮的内容。

例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

<button>I do</button>
<button><img src="button.gif" alt="" /><button>
  • <input type=”button” value=”I do”>的按钮内容是要写在value值里面。
2. 浏览器支持
  • 所有主流浏览器都支持<button>标签。

  • 重要事项:如果在 HTML 表单中使用 <button>元素,不同的浏览器会提交不同的值。

Internet Explorer 将提交<button>与<button>之间的文本,而其他浏览器将提交 value 属性的内容。

请在 HTML 表单中使用 input 元素来创建按钮。

3.注意事项
  • 不能使用热点地图,即不能<img src=”foo.gif” usemap=”…” />,这是不合法的。

设置大小的坑(<input type=”button”>)

  • 无法通过css样式直接编辑它的宽和高。需要借助其他样式来设置。
html部分

<input type="button" value="按钮" class="btn1">

css部分(方法一:借助添加背景颜色)


        background-color: green;
        width: 50px;
        height: 50px;
        display: block;

css部分(方法二:借助添加border大小)


        display: block;
        border:1000px;//border可以任意设置一个数值
        width:300px;
        height: 300px;


不知道这样设置的原理,但是我找到了解决这个问题的方法~利用以上方法,按钮大小就会改变。