HTML是構建網頁的一種語言，通過使用HTML標簽和屬性可以實現網頁上各種不同的功能和效果。其中，HTML刻度滑動就是一種常見的交互式元素，可以用于選擇不同的數值或范圍。 刻度滑動的HTML代碼如下所示：

<input type="range" min="0" max="100" value="50" class="slider">

其中，type屬性設置為range表示這是一個刻度滑動；min屬性表示滑塊能夠選擇的最小值；max屬性表示滑塊能夠選擇的最大值；value屬性表示滑塊默認值；class屬性用于指定樣式類名。 通過添加樣式表可以對刻度滑動進行美化，如下所示：

.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ddd;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}

其中，-webkit-appearance屬性用于消除瀏覽器默認樣式；width和height屬性設置滑塊的尺寸；border-radius屬性設置圓角半徑；background屬性設置背景顏色；outline屬性用于消除選中時的外框線；opacity屬性設置透明度；-webkit-transition屬性設置過渡效果；cursor屬性設置鼠標樣式。 通過設置.slider:hover和.slider::-webkit-slider-thumb和.slider::-moz-range-thumb選擇器，分別對滑塊的鼠標懸浮效果和滑塊的樣式進行了設置。 綜上所述，使用HTML的刻度滑動可以實現非常實用的交互效果，通過添加樣式表可以美化滑塊，增強用戶體驗。