轻量级HTML5模板核心是“够用、干净、可扩展”，仅含12–15行有效代码：以<!DOCTYPE html>开头，声明lang和UTF-8编码，含viewport、语义化header/main/footer结构，零框架依赖，纯静态可直接运行。
构建符合现代 Web 标准的轻量级 HTML5 模板，核心是“够用、干净、可扩展”——不堆砌框架，不引入冗余代码，但保留语义化、响应式和基础性能优化能力。它不是功能越多越好，而是去掉所有非必要部分后，仍能跑通、可维护、易部署。
必备结构：最小但完整的 HTML5 骨架
一个真正轻量的模板，从声明到主体只需 12–15 行有效代码，不含注释和空行：
-
必须以
<!DOCTYPE html>开头，强制浏览器进入标准模式，避免怪异模式导致布局/JS 行为异常； -
<html lang="zh-CN">显式声明语言，利于屏幕阅读器和 SEO； -
<meta charset="UTF-8">和<meta name="viewport" content="width=device-width, initial-scale=1">放在<head>最前面，确保中文正确显示和移动端基础适配； -
只保留语义化主干标签：
<header>、<main>、<footer>（<nav>和<section>按需添加，不预置）； -
不内联 CSS/JS，也不预置 jQuery、Bootstrap 等外部依赖，只留
<link rel="stylesheet">和<script>占位符。
精简但不失健壮的 head 区域
轻量 ≠ 简陋。<head> 要解决三个实际问题：字符编码、设备适配、页面标识。其他如图标、SEO meta、preload 等按项目需要再加。
- 删掉所有非必需 meta（如
description、keywords、author），它们不属于模板层，应由内容方填写； - 标题用
<title>网站名称</title>占位，不写“我的第一个网页”这类示例文字； - 预留
<link rel="icon" href="/favicon.ico">，但不强制要求提供图标文件路径； - 不预设 CSS 预处理器（如 Sass 引入）、不硬编码字体链接或 CDN，保持样式完全解耦。
语义清晰、无 div 堆砌的 body 结构
HTML5 的价值在于用对标签代替 class 命名。轻量模板要体现这一点，而不是退回 <div class="wrapper"><div class="content"> 的老路。
立即学习“前端免费学习笔记（深入）”；
- 用
<header>承载站点标识或主导航，<main>作为唯一内容容器（W3C 推荐每个页面仅一个<main>）； - 避免嵌套过深，
<main>内直接放<h1>、<p>、<article>等内容标签，不包裹多余<div>； -
<footer>仅用于页脚信息（版权、备案号等），不塞入侧边栏或友情链接——那些属于内容逻辑，不应固化在模板中； - 不预置表单、轮播图、卡片网格等具体组件，只留结构位置（如
<form>标签占位，不写 input 字段）。
交付即可用：零构建、零依赖的落地方式
轻量模板的意义在于“开箱即用”，不是“开箱即配置”。它应该能在任何静态服务器甚至本地双击打开就正常渲染。
- 文件保存为
index.html，编码为 UTF-8 无 BOM； - 不依赖 Node.js、Webpack 或任何构建工具，纯 HTML/CSS/JS 文件即可运行；
- 所有路径使用相对路径（如
./css/style.css），不写绝对 URL 或 CDN； - 附带一份简明 README.md，说明“如何改标题”“如何加导航”“如何引入自己的 CSS”，三句话讲清，不写教程。
不复杂但容易忽略：轻量不是删减，而是克制。每多一行代码，就要问一句——这个是所有项目都需要的吗？还是只是这个 demo 需要的？答案决定它该不该留在模板里。
