合法HTML5空白模板只需5个要素:<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8">、<meta name="viewport">、<title>,缺一不可,其余全留空。

直接用最简标准结构,不加多余标签、不配样式、不连外部资源,就能快速启动项目。关键不是“多”,而是“准”——确保文档类型声明正确、编码明确、语言可读、结构完整。
用编辑器快捷命令一键生成
主流编辑器都支持 Emmet 或内置模板,输入几个字符就能拉出整套骨架:
- VS Code:新建 .html 文件后,输入 ! 再按 Tab,自动输出带
<!DOCTYPE html>、<meta charset="UTF-8">、<meta name="viewport">和基础<body>的 HTML5 结构 - Sublime Text / Atom:同样输入 ! + Tab 即可触发
- IntelliJ IDEA / WebStorm:输入 html5 后按 Tab,或在 New → File 中选 HTML5 模板
手动写也只需 12 行,且必须包含这 5 个要素
哪怕从零手敲,也不用记太多。只要这 5 点齐备,就是合法、可用、现代的 HTML5 空白模板:
-
<!DOCTYPE html>—— 唯一且必须在第一行 -
<html lang="zh-CN">—— lang 属性不能省,中文站推荐zh-CN,英文站用en -
<meta charset="UTF-8">—— 字符编码,防止中文乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 响应式基础,移动端必加 -
<title></title>—— 浏览器标签页显示文字,不能为空
其余如 <link>、<script>、<style> 全部留空,等需要时再加。
立即学习“前端免费学习笔记(深入)”;
建一个本地 template.html 复用最省事
把下面这段代码存为 template.html,放在你常用的“模板文件夹”里,每次新建页面直接复制粘贴改名即可:
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
</body>
</html>
它没 CSS、没 JS、没图片、没注释,干净到只保留 HTML5 合法运行的最小集,适合所有静态页起步。
验证是否真为 HTML5 模板
生成后打开浏览器,右键 → “查看页面源代码”,确认三点:
- 第一行是
<!DOCTYPE html>(不是<!DOCTYPE HTML PUBLIC ...>) - 有
lang属性且值合理(如zh-CN) - 没有
<meta http-equiv="Content-Type">这类旧写法,charset是独立 meta 标签
满足这三项,就说明你的空白模板已就绪,可以放心往里填内容了。



















