当深度未知时，如何在html中以树结构格式递归显示嵌套数据

在HTML中以树结构格式递归显示嵌套数据的方法如下：

使用HTML的列表元素（<ul>和<li>）来创建树的结构。
通过递归函数处理嵌套数据，将数据逐层添加到HTML列表中。
利用CSS样式设置树状结构的样式，例如设置缩进、图标等。

以下是一个示例的递归函数，用于在HTML中显示嵌套数据的树结构：

<!DOCTYPE html>
<html>
<head>
    <style>
        .tree {
            margin-left: 20px;
        }
        
        .tree li {
            list-style-type: none;
            position: relative;
        }
        
        .tree li:before {
            content: "";
            position: absolute;
            top: -7px;
            left: -10px;
            width: 20px;
            border-top: 1px solid #ccc;
        }
        
        .tree li:after {
            content: "";
            position: absolute;
            top: 0;
            left: -10px;
            width: 20px;
            height: 100%;
            border-left: 1px solid #ccc;
        }
        
        .tree li:last-child:after {
            height: 7px;
            background: white;
        }
        
        .tree li span {
            padding: 5px;
            border-radius: 5px;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <ul class="tree" id="tree"></ul>

    <script>
        // 示例数据
        var nestedData = {
            name: "Node 1",
            children: [
                {
                    name: "Node 1.1",
                    children: [
                        {
                            name: "Node 1.1.1"
                        },
                        {
                            name: "Node 1.1.2"
                        }
                    ]
                },
                {
                    name: "Node 1.2"
                }
            ]
        };

        // 递归函数生成树结构
        function buildTree(data, parentNode) {
            var node = document.createElement("li");
            var span = document.createElement("span");
            span.innerHTML = data.name;
            node.appendChild(span);

            if (data.children && data.children.length > 0) {
                var ul = document.createElement("ul");
                node.appendChild(ul);
                for (var i = 0; i < data.children.length; i++) {
                    buildTree(data.children[i], ul);
                }
            }

            parentNode.appendChild(node);
        }

        // 在根节点上调用递归函数生成树结构
        buildTree(nestedData, document.getElementById("tree"));
    </script>
</body>
</html>

这个示例会生成一个树状结构，其中每个节点由<li>元素表示，节点的名称由<span>元素表示。通过CSS样式设置缩进和连接线，使得树结构可视化。使用递归函数buildTree遍历嵌套数据，将每个节点添加到对应的父节点中。

这个方法可以用于显示任意嵌套层级的数据，并可根据需要进行样式定制。对于更复杂的需求，可以使用前端框架如Vue、React等来简化开发。