📄

HTML5 模板生成

勾选 viewport、favicon、OG、CSS reset 等,一键生成规范的 HTML5 起始模板。

本地处理 · 不上传

加载工具中…

相关:html · boilerplate · 模板 · 起始 · head · meta

HTML5 模板生成按需勾选视口设置、字符集、SEO 标签、favicon 与常见 meta,生成一份可直接使用的页面骨架。

使用步骤

  1. 勾选需要的部分
  2. 填写标题与描述
  3. 查看生成的完整 HTML
  4. 复制作为新页面起点

使用场景

  • 快速起一个新页面
  • 确认 head 中该有哪些必要标签
  • 为原型或演示页准备骨架
  • 检查现有页面是否遗漏关键标签

小贴士

  • charset 必须放在 head 的最前面(前 1024 字节内),否则浏览器可能已按错误编码解析了部分内容。
  • 移动端必须有 viewport 标签,否则页面会按桌面宽度渲染再缩小,文字小到看不清。
  • lang 属性影响屏幕阅读器的发音选择与浏览器的翻译提示,中文页面应写 zh-CN 而非留空。

常见问题

charset 为什么要放最前面?

浏览器在读到 charset 声明前会先按默认编码猜测解析。声明放得太靠后,前面的内容已经被错误解码,页面开头就会出现乱码。

viewport 该怎么写?

`width=device-width, initial-scale=1` 是标准写法。不要加 user-scalable=no 禁止缩放,那会妨碍视力不佳的用户,属于无障碍问题。

还需要 XHTML 那套声明吗?

不需要。HTML5 的文档类型声明就是简单的 `<!DOCTYPE html>`,早期那些冗长的 DTD 声明已经完全过时。

HTML5 模板生成是免费的吗?

是。本站所有工具完全免费,无需注册登录、无广告干扰,打开即用。

使用HTML5 模板生成,我的数据安全吗?

安全。该工具在你的浏览器本地完成处理,输入内容不会上传到服务器,隐私更有保障。