<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<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>
</head>
<body>
<table>
<tr>
<th></th>
<th>button</th>
<th>a标簽</th>
<th>input type="button"</th>
</tr>
<tr>
<td rowspan="7">不同</td>
<td>标簽語義就是按鈕</td>
<td>标簽語義為超連結</td>
<td>标簽語義為可點選的按鈕，但沒有任何行為</td>
</tr>
<tr>
<td> <button draggable="true" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">button标簽</button></td>
<td><a href="" target="_blank" rel="external nofollow" >a标簽</a></td>
<td><input type="button" value="input button标簽"></td>
</tr>
<tr>
<td>可變元素</td>
<td>内聯元素</td>
<td>内聯元素</td>
</tr>
<tr>
<td>預設字号為14PX</td>
<td>預設字号為16px</td>
<td>預設字号為14PX</td>
</tr>
<tr>
<td>文字預設居中</td>
<td>文字預設左對齊</td>
<td>文字預設居中</td>
</tr>
<tr>
<td>我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中建立一個吸引人的标記圖像。</td>
<td>用于從一張頁面連結到另一張頁面。</td>
<td>button 類型常用于在使用者點選按鈕時啟動 JavaScript 程式</td>
</tr>
<tr>
<td>不同的浏覽器會送出不同的值。IE将送出 ‹ button › 與 ‹button/›之間的文本，而其他浏覽器将送出 value 屬性的内容</td>
<td>如果未設定 href 屬性，則隻是超連結的占位符。</td>
<td>FORM下type 屬性規定 input 元素的類型。</td>
</tr>
<tr>
<td rowspan="2">調整到相同樣式代碼</td>
<td> <button draggable="true" class="button-btn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">button标簽</button></td>
<td><a class="a-btn" href="javascript:;" target="_blank" rel="external nofollow" >a标簽</a></td>
<td><input draggable="true" class="inputbutton-btn" type="button" value="input button标簽"></td>
</tr>
<tr>
<td>
<pre>.button-btn{
width: 150px;
background: #f00;
border:1px solid #ccc;
color: #fff;
}
<pre>
</td>
<td>
<pre>.a-btn{
display: inline-block;
width: 150px;
background: #f00;
border: 0;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 14px;
}
<pre>
</td>
<td>
<pre> .inputbutton-btn{
display: inline-block;
width: 150px;
background: #f00;
border: 0;
color: #fff;
}<pre>
</td>
</tr>
<tr>
<td>對H5的支援</td>
<td> 支援draggable="true"</td>
<td> 不支援draggable="true"</td>
<td> 支援draggable="true"</td>
</tr>
</table>
</body>
</html>
如有商業用途使用，請注明轉載自咻咻飛碟！
![Django之驗證碼（十七）驗證碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)