制作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_onclick_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" />来给出你正在寻找的外观。