"```markdown

HTML5 判断网络状态

在HTML5中，使用 navigator.onLine 属性可以判断网络连接状态。这个属性返回一个布尔值，指示用户的浏览器是否在线。

使用示例

以下是一个简单的示例，展示如何使用 navigator.onLine 来判断网络状态，并在页面上显示相应的消息。

HTML 结构

<!DOCTYPE html>
<html lang=\"zh\">
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>网络状态检测</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .status { padding: 10px; border: 1px solid; margin: 20px 0; }
        .online { border-color: green; color: green; }
        .offline { border-color: red; color: red; }
    </style>
</head>
<body>
    <h1>网络状态检测</h1>
    <div id=\"status\" class=\"status\"></div>

    <script src=\"script.js\"></script>
</body>
</html>

JavaScript 逻辑

// script.js

function updateOnlineStatus() {
    const statusDiv = document.getElementById('status');
    if (navigator.onLine) {
        statusDiv.textContent = '您是在线的';
        statusDiv.className = 'status online';
    } else {
        statusDiv.textContent = '您是离线的';
        statusDiv.className = 'status offline';
    }
}

// 初始化状态
updateOnlineStatus();

// 监听网络状态变化
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

代码讲解

HTML部分:
- 创建一个简单的HTML页面，包含一个用于显示网络状态的div元素。
- 使用样式为在线和离线状态提供不同的样式。
JavaScript部分:
- 定义 updateOnlineStatus 函数，根据 navigator.onLine 的值更新状态信息和样式。
- 初始调用 updateOnlineStatus 函数，以便在页面加载时显示当前的网络状态。
- 使用 window.addEventListener 监听 online 和 offline 事件，以便在网络状态变化时更新显示。

其他注意事项

兼容性: 大多数现代浏览器都支持 navigator.onLine，但在某些情况下，可能会出现错误的状态判断（例如，用户可能连接到局域网但无法访问互联网）。
性能考虑: 频繁检测网络状态可能会导致性能问题，建议仅在必要时进行检查。

总结

通过使用 navigator.onLine 和事件监听，可以有效地判断和显示用户的网络连接状态。这在开发需要实时数据或需要网络连接的应用时非常有用。

举例说明html5怎么判断网络状态？