在網(wǎng)頁設(shè)計中，點(diǎn)擊加載更多是一個很實(shí)用的功能，可以讓網(wǎng)站內(nèi)容分批次地加載，減輕頁面負(fù)擔(dān)，提高用戶體驗(yàn)。下面是一個使用HTML實(shí)現(xiàn)點(diǎn)擊加載更多的基礎(chǔ)代碼：

<div id="content">
<p>這是第一批內(nèi)容</p>
<p>這是第二批內(nèi)容</p>
<p>這是第三批內(nèi)容</p>
<p class="hidden">這是第四批內(nèi)容</p>
<p class="hidden">這是第五批內(nèi)容</p>
<p class="hidden">這是第六批內(nèi)容</p>
</div>
<button id="load-more">加載更多</button>
<script>
var loadButton = document.getElementById("load-more");
var hiddenSections = document.querySelectorAll("#content .hidden");
var  numToShow = 3;
var numToLoad = 3;
var index = 0;
loadButton.addEventListener("click", function() {
var elemsToShow = Array.prototype.slice.call(hiddenSections, index, index + numToShow);
elemsToShow.forEach(function(e) {
e.classList.remove("hidden");
});
index += numToShow;
if (index >= hiddenSections.length) {
loadButton.style.display = "none";
}
});
for (var i = 0; i< numToLoad; i++) {
hiddenSections[i].classList.remove("hidden");
}
if (hiddenSections.length<= numToShow) {
loadButton.style.display = "none";
}
</script>

此代碼的關(guān)鍵在于將要隱藏的內(nèi)容用class="hidden"標(biāo)記，并且在頁面加載時先顯示前幾條內(nèi)容。當(dāng)點(diǎn)擊加載更多按鈕時，通過js遍歷要顯示的內(nèi)容，將class改為沒隱藏，而后一批的內(nèi)容也會按照這種方式顯示。

此外，可以根據(jù)需要修改代碼，比如改變numToShow、numToLoad等參數(shù)，添加樣式優(yōu)化頁面效果。