CSS和JS去除格式化是Web開發中非常重要的一部分，因為默認的HTML元素樣式往往不符合我們的設計要求。CSS和JS可以讓我們對網頁樣式做出更精細的控制。下面我們來看看如何去除HTML默認樣式。

/* 去除HTML默認樣式 */
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
/* 下劃線、加粗、清除列表樣式 */
a {
text-decoration: none;
color: #333;
font-weight: normal;
}
ul, ol {
list-style-type: none;
margin: 0;
padding: 0;
}
/* 去除表格邊框和默認表格樣式 */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

上面的CSS代碼是去除HTML默認樣式，主要包括：

• 去除body的margin和padding
• 去除a標簽下劃線、加粗以及默認顏色
• 去除ul和ol的列表樣式，包括list-style-type、margin和padding
• 去除table的邊框、表格間距和默認寬度

// 去除button默認樣式
button {
appearance: none;
background-color: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
padding: 0;
}

有時候我們需要去除button的默認樣式，上面的CSS代碼可以去除button的默認樣式。

// JS去除默認樣式
var content = document.getElementById('content');
// 去除img的默認邊框樣式
var imgs = content.getElementsByTagName('img');
for (var i=0; i<imgs.length; i++) {
imgs[i].style.border = 'none';
}
// 去除select的默認樣式
var selects = content.getElementsByTagName('select');
for (var i=0; i<selects.length; i++) {
selects[i].style.webkitAppearance = 'none';
selects[i].style.mozAppearance = 'none';
selects[i].style.appearance = 'none';
selects[i].style.backgroundImage = 'url("data:image/svg+xml;utf8,")';
selects[i].style.backgroundRepeat = 'no-repeat';
selects[i].style.backgroundPosition = 'right center';
selects[i].style.backgroundSize = 'auto 100%';
selects[i].style.paddingRight = '25px';
}

上面的JS代碼可以去除img和select的默認樣式。去除img的默認邊框樣式可以使用imgs[i].style.border = 'none'; 實現，而去除select的默認樣式需要修改webkitAppearance、mozAppearance和appearance，并增加一個背景圖片。