是前端開發中最常用的一個標簽，可以用來展示一個頁面的所有元素。其中，展示樹形json數據也是常見的需求。在使用
展示樹形json時，我們需要使用一些技巧。
首先，我們需要將樹形json數據轉換成html格式。這里我們可以使用遞歸函數進行轉換。具體代碼如下：
function jsonToHtml(json) {
var html = '';
html += '<ul>';
for(var key in json) {
html += '<li>' + key;
if(typeof json[key] === "object") {
html += jsonToHtml(json[key]);
} else {
html += ': ' + json[key];
}
html += '</li>';
}
html += '</ul>';
return html;
}接著，我們需要用css樣式來美化展示效果。這里我們可以使用偽元素和偽類來實現樹形結構的效果。具體代碼如下：ul {
list-style: none;
margin-left: 20px;
}
li {
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0;
left: -15px;
border-left: 1px solid #ccc;
height: 100%;
}
ul ul:before {
content: "";
position: absolute;
top: -10px;
left: -15px;
border-top: 1px solid #ccc;
width: 15px;
height: 10px;
}
li:last-child:before {
height: 30px;
}
li:after {
content: "";
position: absolute;
top: 0;
left: -7px;
border: 7px solid transparent;
border-left: 7px solid #ccc;
}
li:last-child:after {
display: none;
}最后，我們可以將轉換后的html代碼放入標簽中展示。具體代碼如下：
<div> <?php echo jsonToHtml($json); ?> </div>通過以上步驟，我們可以將樹形json數據展示在一個美觀的頁面中，為用戶提供更好的閱讀體驗。