Leaflet开发Web地图页面空白无代码报错问题求助

页面空白且无JS报错的核心原因是地图容器实际渲染尺寸为0：为#map设置的width: 100%、height: 100%属于百分比尺寸，这类尺寸需要父元素存在明确可继承的高度值才能被浏览器正确计算，原代码未给html、body标签设置高度，最终#map计算高度为0，地图无可见渲染区域。
此外原代码存在语法不规范问题：Leaflet JS引入标签、地图初始化脚本均放置在</html>闭合标签外，虽多数浏览器会容错解析，但存在潜在兼容风险。

• 为html、body标签补充宽高样式，确保地图容器的百分比尺寸可被正确计算
• 将Leaflet JS引入代码、地图初始化脚本移动到</body>闭合标签前，符合HTML语法规范

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial youtube</title>
    
    <!-- leaflet css--> 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />

    <style>
        html, body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #map{
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
        <div id="map"></div>

        <!--leaflet js 移至body闭合标签前-->
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

        <script>
        // 初始化地图
        var map = L.map('map').setView([-14.23,-51.92], 4);

        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        osm.addTo(map);
        </script>
</body>
</html>

补充说明：如果不需要地图占满全页面，也可以直接给#map设置明确的固定像素高度（例如height: 600px），无需给父元素设置百分比高度即可正常渲染。

内容的提问来源于stack exchange，提问作者Letícia Fontes Borges