HTML 模板
快速生成 HTML5 页面骨架：基础文档、博客文章、落地页、表单页、表格页，可选 viewport / description / OG / canonical 等 meta、语义标签、内联 CSS 变量与暗色模式。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
页面设置
提示
index.html
把内容保存成 index.html，示例文案只是占位，替换成自己的内容即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的页面</title>
<meta name="description" content="一个用 UniKit 生成的 HTML5 页面骨架。">
<link rel="canonical" href="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="我的页面">
<meta property="og:description" content="一个用 UniKit 生成的 HTML5 页面骨架。">
<meta property="og:image" content="https://example.com/cover.png">
<meta property="og:url" content="https://example.com/">
<style>
:root {
--uk-accent: #2563eb;
--uk-bg: #ffffff;
--uk-surface: #f8fafc;
--uk-text: #1f2937;
--uk-muted: #6b7280;
--uk-radius: 12px;
}
@media (prefers-color-scheme: dark) {
:root {
--uk-bg: #0f172a;
--uk-surface: #1e293b;
--uk-text: #e2e8f0;
--uk-muted: #94a3b8;
}
}
[data-theme="dark"] {
--uk-bg: #0f172a;
--uk-surface: #1e293b;
--uk-text: #e2e8f0;
--uk-muted: #94a3b8;
}
body {
margin: 0;
background: var(--uk-bg);
color: var(--uk-text);
font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
main, header, footer { padding: 24px 16px; max-width: 960px; margin: 0 auto; }
a { color: var(--uk-accent); }
button { background: var(--uk-accent); color: #fff; border: 0; border-radius: var(--uk-radius); padding: 10px 18px; font-size: 15px; cursor: pointer; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--uk-muted); }
</style>
</head>
<body>
<main>
<section>
<h1>一句话说清你的产品</h1>
<p>这是页面的引导段，用一两句话说明这一页要做什么。</p>
<ul>
<li>第一个要点</li>
<li>第二个要点</li>
<li>第三个要点</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 示例站点</p>
</footer>
</body>
</html>
统计
7119612这个工具能做什么
- 起一个新页面时先把骨架铺好：head 里的 charset、viewport、description、OG、canonical 一次生成，不用每次翻文档抄 meta 顺序。
- 做落地页原型：选落地页类型会给出 header + hero + 三张特性卡片 + footer 的结构，直接往里填文案就能给人看。
- 写带样式的静态页：勾上内联 CSS 变量会带一套 --uk-* 变量和暗色模式媒体查询，改一个主色就能统一整页配色。
- 需要表单或表格示例：选表单页会生成带 label 关联、required、select 与 checkbox 的可访问结构，选表格页会带 caption、thead 与 tbody。
示例
输入
页面类型：基础文档；语言 zh-CN；标题「我的页面」；描述「一个用 UniKit 生成的 HTML5 页面骨架。」；canonical https://example.com/；开启 viewport、description、OG 与语义标签；关闭内联 CSS
输出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的页面</title>
<meta name="description" content="一个用 UniKit 生成的 HTML5 页面骨架。">
<link rel="canonical" href="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="我的页面">
<meta property="og:description" content="一个用 UniKit 生成的 HTML5 页面骨架。">
<meta property="og:image" content="https://example.com/">
<meta property="og:url" content="https://example.com/">
</head>
<body>
<main>
<section>
<h1>一句话说清你的产品</h1>
<p>这是页面的引导段，用一两句话说明这一页要做什么。</p>
<ul>
<li>第一个要点</li>
<li>第二个要点</li>
<li>第三个要点</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 示例站点</p>
</footer>
</body>
</html>标题和描述里的 & < > " 都会被转义成实体；分享图留空时会自动退回 canonical 地址。
常见问题
生成的文案能直接上线吗？
不能，正文里的标题、段落、表单标签都是占位示例，作用是把结构撑起来。把文字换成自己的内容即可，标签层级和 meta 部分不用动。
语义标签和 div 有什么区别？
打开语义标签会输出 header / main / section / article / nav / footer，屏幕阅读器和搜索引擎能据此理解页面结构；关掉后换成等价的 div + class，适合必须兼容老模板的场景。
暗色模式是怎么实现的？
内联 CSS 里用 :root 定义 --uk-bg、--uk-text 等变量，再通过 prefers-color-scheme: dark 媒体查询和 [data-theme="dark"] 选择器覆盖。给 html 或 body 加上 data-theme="dark" 就能手动切换，不依赖 JavaScript 也能跟随系统。
为什么主色要填十六进制？
CSS 变量里直接写成 --uk-accent: #2563eb，十六进制最不容易出错，也方便后续换成 rgb() 或 color-mix()。填 hsl()、颜色名之类的写法会被判定为非法并提示。
og:image 留空会怎样？
留空时会退回 canonical 地址，如果两者都没有就完全不输出 og:image，并在页面上给出提示。分享图建议用 1200×630 的绝对地址，否则部分平台抓不到。
关键词：html templatehtml5 boilerplatelanding pagehtml 模板页面骨架html5 骨架落地页语义化标签暗色模式meta 标签