HTML template generator
Generate an HTML5 page skeleton — basic document, blog post, landing page, form or table — with optional viewport / description / OG / canonical meta tags, semantic markup, inline CSS variables and dark mode.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Page settings
Notes
index.html
Save the output as index.html; the sample copy is a placeholder, replace it with your own.
<!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, -apple-system, "Segoe UI", 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>Say what your product does in one line</h1>
<p>A short lead paragraph explaining what this page is for.</p>
<ul>
<li>First point</li>
<li>Second point</li>
<li>Third point</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Example site</p>
</footer>
</body>
</html>
Statistics
7120422What this tool does
- Lay out a new page in one go: charset, viewport, description, OG tags and canonical are generated together, so you stop copying meta tag order from the docs.
- Prototype a landing page: the landing kind gives you header, hero, three feature cards and a footer to fill in and show to someone.
- Build a styled static page: inline CSS variables bring a --uk-* palette plus a dark mode media query, so one accent colour restyles the page.
- Need a form or a table: the form kind emits accessible labels, required fields, a select and a checkbox; the table kind brings caption, thead and tbody.
Example
Input
Page type: basic document; lang zh-CN; title "我的页面"; description "一个用 UniKit 生成的 HTML5 页面骨架。"; canonical https://example.com/; viewport, description, OG and semantic tags on; inline CSS off
Output
<!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>Ampersands, angle brackets and quotes in the title and description are escaped, and an empty OG image falls back to the canonical URL.
Frequently asked questions
Can I ship the generated copy as is?
No — the headings, paragraphs and form labels are placeholders whose job is to hold the structure together. Swap in your own text; the tag hierarchy and the meta block can stay untouched.
Semantic tags or plain divs?
With semantic markup you get header, main, section, article, nav and footer, which screen readers and search engines use to understand the page. Turn it off to get equivalent divs with classes for older templates that require them.
How does dark mode work?
The inline CSS defines --uk-bg, --uk-text and friends on :root, then overrides them through a prefers-color-scheme: dark media query and a [data-theme="dark"] selector. Adding data-theme="dark" to html or body switches manually, and it follows the system without any JavaScript.
Why does the accent colour have to be hex?
The variable is written straight as --uk-accent: #2563eb, and hex is the least error-prone form; you can swap it for rgb() or color-mix() later. hsl() and colour names are reported as invalid input.
What happens when og:image is empty?
It falls back to the canonical URL; if neither is set the tag is omitted entirely and a note appears. Use an absolute 1200×630 image, otherwise some platforms will not render a preview.
Keywords：html templatehtml5 boilerplatelanding pagehtml 模板页面骨架html5 骨架落地页语义化标签暗色模式meta 标签