首页单页html例子详细代码

单页html例子详细代码

时间: 2024-09-16 22:06:16 浏览: 213

单页HTML（Single Page Application，SPA）通常使用JavaScript框架如React、Vue或Angular来构建动态内容和交互。下面是一个简单的例子，使用HTML5、CSS和JavaScript基本结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>单页应用示例</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } #content { display: none; } </style> </head> <body> <button id="loadMoreBtn">加载更多</button> <div id="content"></div> <script> // 假设这是从服务器获取数据的函数 function loadContent(page) { fetch('https://api.example.com/data?page=' + page) .then(response => response.json()) .then(data => { const contentDiv = document.getElementById('content'); data.forEach(item => { const itemElement = document.createElement('p'); itemElement.textContent = item.text; contentDiv.appendChild(itemElement); }); if (page == 1) { // 如果首次加载，显示内容 contentDiv.style.display = 'block'; } }) .catch(error => console.error('Error:', error)); } document.getElementById('loadMoreBtn').addEventListener('click', () => { loadContent(2); // 当按钮被点击时，加载下一页 }); loadContent(1); // 首次加载内容 </script> </body> </html> ``` 在这个例子中，用户点击“加载更多”按钮时，会通过JavaScript发送一个HTTP请求获取新的数据，并动态添加到页面上。注意这只是一个基础的示例，实际的SPA项目会包含更复杂的路由管理、状态管理和组件化架构。

阅读全文