在HTML和JS中，我們經常需要控制元素的顯示和隱藏，這時候我們就需要使用display屬性來設置元素的顯示方式。

// HTML中使用display屬性
<div id="box">這是一個盒子</div>
<script>
// JS中使用display屬性
document.getElementById("box").style.display = "none";
</script>

上面的代碼就是一個簡單的例子，我們可以通過display屬性來控制元素的顯示和隱藏。其中display屬性的取值可以是以下幾種：

• none：隱藏元素
• block：讓元素在獨立的行上顯示
• inline：讓元素在行內顯示
• inline-block：讓元素在行內顯示，但是元素的大小可以設置
• table：讓元素以表格的形式顯示
• table-row：讓元素以表格行的形式顯示
• table-cell：讓元素以表格單元格的形式顯示

當我們設置display為none時，元素本身并不會被從文檔中刪除，只是不再顯示出來；而當我們將display設置為其他值時，元素會重新出現在文檔中。

<style>
.hide {
display: none;
}
</style>
// JS中添加/刪除class
document.getElementById("box").classList.add("hide");
document.getElementById("box").classList.remove("hide");

我們還可以通過給元素添加/刪除class的方式來控制元素的顯示和隱藏。

總之，在HTML和JS中，display屬性是一個非常重要的屬性，它可以幫助我們更好地控制元素的顯示方式。