HTML和JS是現代網頁設計不可或缺的兩大元素，無數網頁設計師喜歡在網頁中使用各種特效來增強用戶體驗。以下是一些HTML和JS效果代碼的大全。

HTML特效：
1. 停車位預定：
<select disabled>
<option>請選擇停車場</option>
</select>
<button disabled>預定</button>
2. 滑動門：
<div class="tab">
<ul class="menu">
<li>標簽1</li>
<li>標簽2</li>
<li>標簽3</li>
</ul>
<div class="content">
<div>標簽1的內容</div>
<div>標簽2的內容</div>
<div>標簽3的內容</div>
</div>
</div>
3. 圖片遮罩：
<figure>
<img src="圖片地址">
<figcaption>圖片標題</figcaption>
</figure>
<style>
figure {
position: relative;
width: 200px;
height: 200px;
}
figcaption {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
}
img:hover {
opacity: 0.6;
}
</style>
JS特效：
1. 圖片輪播：
<div class="slider">
<ul class="slides">
<li><img src="圖片1地址"></li>
<li><img src="圖片2地址"></li>
<li><img src="圖片3地址"></li>
</ul>
</div>
<script>
$(function() {
$(".slider").slick();
});
</script>
2. 下拉菜單：
<select onchange="location.href=this.options[this.selectedIndex].value;">
<option value="跳轉鏈接1">跳轉鏈接1名稱</option>
<option value="跳轉鏈接2">跳轉鏈接2名稱</option>
<option value="跳轉鏈接3">跳轉鏈接3名稱</option>
</select>
3. 點擊放大：
<img src="圖片地址" onclick="enlarge()">
<script>
function enlarge() {
var oImg = document.getElementsByTagName("img")[0];
oImg.style.width = "200%";
}
</script>
以上是一些HTML和JS效果代碼，希望對網頁設計有所幫助。