<h2>回复内容:</h2> 谢谢邀请。<br>在一个页面上画一个按钮,有四种办法:<br><ul> <li> <b><input type="button"> </b>这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。<br> </li> <li> <b><input type="submit"></b> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。<br> </li> <li> <b> <button> </button></b>这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容。(当然,前两个用图片背景也可以做到)。它的缺点是不同的浏览器得到的 value 值不同;可能还有其他的浏览器兼容问题(葛亮)。</li> <li>其他标签,例如 a, img, span, div,然后用图片把它伪装成一个按钮。</li> </ul>参见: <br>[原]<button>和<input type="button"> 的区别<i class="icon-external"></i><br>html - Difference between <input type="button"> and <input type="submit"><i class="icon-external"></i><br>html - input type="submit" Vs button tag are they interchangeable?<i class="icon-external"></i> 画面表现上,其他回答都已经说明了。<br>需要强调的一点是,其实<b><input type="submit"></b>不是一个画面元素,而是一个表单(Form)元素,和文本输入是一样的,都属于“数据”的一部分(特征是,有value属性,而且该属性的值,会被传送到server端,可以拿来用),而不是样式的一部分。这种表现和数据混淆的设计,是早期web标准还比较简陋的时代的遗产。<br>从画面表现上看,通过CSS可以把两者描绘得完全一样。<br>从画面动作上看,通过JS可以强制两者动作也一致(都提交或者都不提交)。<br>但是只有表单数据这个特性,是无法混淆的。<b><button></button></b>无法把自己当成Form的数据。<br>所以,如果只是个单纯的按钮,触发一些画面动作,请使用<b><button></button></b>;反之,会把画面的数据提交给Server的,一般用<b><input type="submit"></b>,当然<b><button></button></b>+JS也完全可以取代。 当onclick的时候给他return false <br><span class="invisible">http://www.</span><span class="visible">w3.org/1999/xhtml</span><span class="invisible"></span><i class="icon-external"></i>"><br><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <title></title> <br> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script><br> <script type="text/javascript"><br> $(function () {<br> $('#test1').click(function () {<br> alert($('#customBtn').attr('value'));<br> });<br> $('#test2').click(function () {<br> alert($('#customBtn').val());<br> });<br> });<br> </script><br><br><br> <button id="customBtn" value="test">按钮</button><br> <input type="button" id="test1" value="get attr"><br> <input type="button" id="test2" value="get val"><br><br></button>