A simple static website

把想法，放到互联网上。

这是一个使用纯 HTML 和 CSS 构建的静态网页。页面轻量、加载快速，也很适合作为你的个人主页、作品集或项目介绍页。

了解更多 联系我 
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>我的网站</title>
  </head>
  <body>
    你好，世界！
  </body>
</html>

今日访问统计

正在读取统计数据...

正在读取服务信息...

页面浏览量 PV -
不同访客 UV -

Why static

简单，但足够可靠

静态网页不需要数据库和复杂的后端服务，特别适合入门学习和展示内容。

01

加载快速

页面文件很小，浏览器可以直接读取，访问速度通常很快。

02

容易部署

把这个文件上传到服务器的网站根目录，就可以通过域名访问。

03

方便学习

所有内容都在一个文件中，适合你逐步认识 HTML 标签和 CSS 样式。

关于这个页面

你可以直接修改这个文件里的文字，把“我的网站”换成自己的名字或品牌，也可以继续增加图片、文章、项目和作品集。

网页已经适配手机和电脑屏幕，并且没有引用外部字体、图片或第三方 JavaScript，上传到服务器后即可独立运行。

JavaScript lab

几个可以直接操作的 JS 示例

下面的按钮和表单都由当前页面底部的 JavaScript 驱动。打开浏览器开发者工具，也可以观察它们如何修改页面内容。

事件监听与 DOM 修改

点击按钮，让 JavaScript 修改数字。

点击次数： 0 
let count = 0;
button.addEventListener('click', () => {
  count++;
  output.textContent = count;
});

定时器与主题切换

时间每秒更新一次，也可以切换页面主题。

正在读取时间... 
setInterval(updateClock, 1000);
document.body.classList.toggle('theme-night');

表单提交与用户输入

输入名字，JavaScript 会拦截提交并显示问候语。

你好，朋友！

form.addEventListener('submit', (event) => {
  event.preventDefault();
  greeting.textContent = '你好，' + name;
});

完整 JavaScript 入口

这是页面实际执行的核心代码，位于 `</body>` 前面。

const button = document.querySelector('#count-button');
const output = document.querySelector('#count');

button.addEventListener('click', () => {
  output.textContent = Number(output.textContent) + 1;
});

Guestbook

留下你的想法

留言会被保存到后端数据库，并显示在这里。

正在读取留言...

想和我交流？

把下面的邮箱替换成你的真实联系方式。

发送邮件

登录