inaliu/a-and-button

a-and-button's Issues

a标签和button的使用范围

<style type="text/css"> table{ border-spacing: 0; border-collapse: collapse;width: 100%; border: 1px solid #ccc; } th{ line-height: 44px; background: #f1f1f1; } td{ border: 1px solid #ccc; padding: 4px 8px; } button{ background: #666; color: #fff; cursor: pointer; } a{ background: #666; color: #fff; } .button-btn{ width: 150px; background: #f00; border:1px solid #ccc; color: #fff; } .a-btn{ display: inline-block; width: 150px; background: #f00; border: 0; color: #fff; text-align: center; text-decoration: none; font-size: 14px; } .inputbutton-btn{ display: inline-block; width: 150px; background: #f00; border: 0; color: #fff; }

</style>

	button	a标签	input type="button"
不同	标签语义就是按钮	标签语义为超链接	标签语义为可点击的按钮，但没有任何行为
	button标签	a标签
	可变元素	内联元素	内联元素
	默认字号为14PX	默认字号为16px	默认字号为14PX
	文字默认居中	文字默认左对齐	文字默认居中
	我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。	用于从一张页面链接到另一张页面。	button 类型常用于在用户点击按钮时启动 JavaScript 程序
	不同的浏览器会提交不同的值。IE将提交 ‹ button › 与 ‹button/›之间的文本，而其他浏览器将提交 value 属性的内容	如果未设置 href 属性，则只是超链接的占位符。	FORM下 type 属性规定 input 元素的类型。
调整到相同样式代码	button标签	a标签
	.button-btn{ width: 150px; background: #f00; border:1px solid #ccc; color: #fff; }	.a-btn{ display: inline-block; width: 150px; background: #f00; border: 0; color: #fff; text-align: center; text-decoration: none; font-size: 14px; }	.inputbutton-btn{ display: inline-block; width: 150px; background: #f00; border: 0; color: #fff; }
对H5的支持	支持draggable="true"	不支持draggable="true"	支持draggable="true"