制作button – <button>或<div>？
我想知道什么HTML元素用于网页上的button – 我想风格我的'button'像Twitter一样。 例如：
tweet列表底部的“更多”button是一个<button>元素还是一个<div>元素？ 我想知道使用哪个。 我认为对于<button>或<div>我们可以提供翻转状态和所有的东西，使它看起来愉快？
不要使用<div>标签来制作可点击的元素。 使用<a>或<button>元素。 这使得浏览器禁用了JavaScript，可以按照预期进行交互。 即使您的function需要使用JavaScript，并且没有合理的默认行为，您也可以分配给<a> ，无论使用它，它都会传达“可点击”的语义。
一般情况下，select最能描述其内容function的标签，而不是其内容的外观，并避免不必要的<div>标签，以免文档遭受networking麻烦 。
Twitter上的“更多”button是一个<a>背景图像，CSS3圆angular和边框。 这是完整的CSS（元素是<a class="more round"> ）：
.more { outline: none; display: block; width: 100%; padding: 6px 0; text-align: center; border: 1px solid #ddd; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; background-color: #fff; background-repeat: repeat-x; background-position: left top; font-size: 14px; text-shadow: 1px 1px 1px #fff; font-weight: bold; height: 22px; line-height: 1.5em; margin-bottom: 6px; background-image: url('http://img.dovov.commore.gif'); } .more:hover { border: 1px solid #bbb; text-decoration: none; background-position: left -78px; } .more:active { color: #666; background-position: left -38px; } .round { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
<a href="#" class="more round">Sample Button</a>
如果你想为所见即所得的编辑器使用<div>而不是<button> ，不要忘记在下面添加样式，因为<button>标签不会删除select，但是div可以。
或者它会让你意想不到的行为:)
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
使用a标签，而不是button 。 我的推理涉及IE的老版本的兼容性问题（IE6讨厌button标签）。
<button>与<inputtypes=“button”/>。 使用哪个？
一般来说，您希望使用<a>导航和<button>来执行在该屏幕上发生的某些操作。
我能想到的最好的理由是，在testing过程中，更喜欢<button>或者<a>标签来定位可操作的项目。 例如，我使用click_on和click_on ，并且click_on方法在引用<button>时更加可靠，与click_link和<a>方法相同。
这里给出的其他原因也很好：语义，屏幕阅读器等。
从实际的angular度来说，你的受众将会决定你网页上的每一个元素是否真的很有趣，或者你想和其他的网页开发生态系统一起玩。 这可能只是取决于你的观众是否都使用X浏览器。
一个问题：由于一个<button>可以提交一个表单或者<a>把你带到另一个页面，所以你必须确保阻止这些默认的操作。 在处理点击的JavaScript函数中，您必须指定它只执行您编程的操作。
function onClickEvent(e) { e.preventDefault(); // What you want to do instead }
我会build议使用css风格的<input id="Button1" type="button" value="button" />来给出你正在寻找的外观。
