<!-- 请将此提示保持极短，并以 UTF-8（无 BOM）保存；过长注释可能把 <meta charset> 推迟到 1024 字节之后 -->
<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
<!-- 关键：字符集声明必须尽量靠前（位于 head 的最前、文档前 1024 字节内），否则会出现“charset 过晚”的提示 -->
<meta charset="UTF-8">
<!-- 移动端视口：让页面按设备宽度渲染，避免默认缩放到桌面宽度 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 文档标题：每个页面必须且只能有一个 <title>；缺失会被 W3C 校验器报错 -->
<title>简易内容页模板（请修改为你的标题）</title>
<!--
说明与易错点（此段注释位于 charset 之后，不会触发“charset 过晚”问题）
一、文件编码与 BOM
· 强烈建议以 UTF-8 且不带 BOM 保存。若带 BOM，文档开头会出现三个隐藏字节，可能触发：
- “Non-space characters found without seeing a doctype first.”
- “doctype 前有非空字符”
· 检查与移除（任选其一）
- VS Code：状态栏编码指示器 → 另存为编码 → UTF-8（不是 “UTF-8 with BOM”）
- Notepad++：菜单“编码” → 转为 UTF-8（无 BOM）
- Sublime Text：File → Save with Encoding → UTF-8
- Linux / macOS：xxd -g 1 -l 3 index.html 或 hexdump -C -n 3 index.html
若看到 ef bb bf，说明存在 BOM；请去除后再保存
- Windows PowerShell：Format-Hex -Path .\index.html -Count 3
若显示 EF BB BF，同样表示存在 BOM
二、DOCTYPE 与文档开头
· <!DOCTYPE html> 必须是文件第一行第一列；前面不要有空格、换行、统计脚本或任意文本。
· 如果需要放置顶部注释，请保持极短，避免将 <meta charset> 挤到文档前 1024 字节之外。
· 若见到“Stray doctype”“Stray start tag html/head”，通常是中途又输出了一次 doctype 或 html/head 标签。
三、<meta charset> 的位置与数量
· 只能声明一次，并且放在 head 最前面（title、link、style 等都应位于其后）。
· 不要在它之前放置很长注释或外部脚本；否则会触发“charset 过晚”的报错。
四、注释规范
· HTML 注释必须成对闭合；不要写未闭合注释，否则会报 “End of file inside comment”。
· 注释内容中避免出现连续的两个连字符（为避免被解析为特殊标记，这里不直书该序列）。
五、服务器响应头（强烈建议）
· 理想响应头应包含：Content-Type: text/html; charset=UTF-8
· 检查方式
- 浏览器开发者工具 → Network → 选中文档 → Headers
- 命令行：curl -I https://你的域名/路径
六、线上输出与上游注入
· 某些上层模板、CDN、WAF 可能在页面开头插入片段，破坏 DOCTYPE 位置。
· 若线上与本地不一致，请抓取最终输出校验：
- 浏览器开发者工具 → Network → 选中文档 → Response 查看最终 HTML
- 命令行：curl -s https://你的域名/路径 > dump.html；再将 dump.html 送 W3C 校验
-->
<!-- 可选：极简样式（便于阅读），不需要可整体删除；注意 <style> 必须在 <head> 内 -->
<style>
html, body { height: 100%; }
body {
margin: 0; /* 移除默认外边距，避免内容贴边 */
padding: 24px; /* 留出阅读留白 */
line-height: 1.6; /* 提升可读性 */
color: #222; /* 文本颜色 */
background: #fff; /* 背景色 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei",
sans-serif; /* 常见中英文字体栈，跨平台更稳定 */
}
h2 { margin: 0 0 12px; line-height: 1.3; }
p { margin: 0 0 12px; }
ul { margin: 0; padding-left: 1.25em; }
pre, code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace; /* 代码等宽字体 */
background: #f6f8fa; /* 代码底色，便于区分 */
color: #24292f; /* 代码文字颜色 */
}
pre { padding: 12px; border-radius: 8px; overflow: auto; }
</style>
</head>
<body>
<!-- 你需要的“简单内容”：仅包含一个 H2 标题、一段说明文字、三条要点 -->
<!-- 下面放代码,下面放代码,下面放代码 -->
这里放我的代码
<!-- 上面放代码,上面放代码,上面放代码 -->
<!-- 说明：以下以实体转义的方式输出，可直接复制为源代码使用 -->
<!--（按你的要求，此处的可见代码示例也不再展示；若后续需要恢复，只需取消下面两行注释并补充转义内容）
<pre><code>…此处是代码模板示例…</code></pre>
-->
<!--
发布前自检步骤与排错方法（确保通过 W3C 校验与线上可访问）
一、校验必过清单（逐项核对）
· [ ] 以 UTF-8（无 BOM）保存文件
· [ ] 第一行是 <!DOCTYPE html> 且其前无任何字符
· [ ] <html lang="zh-CN"> 已设置主语言（可避免“建议添加 lang”警告）
· [ ] <head> 内存在且仅存在一个 <title>
· [ ] <meta charset="UTF-8"> 位于 head 最前且仅声明一次
· [ ] <style> 仅在 <head> 中；<body> 内不要放样式或额外 meta/link/script
二、W3C 校验器常见报错与对策
· Non-space characters before doctype
· 说明 doctype 前面存在字符或 BOM；删除多余字符或去掉 BOM
· A charset attribute on a meta element found after the first 1024 bytes
· 说明 charset 声明过晚；将 <meta charset> 上移到 head 最前，并减少其前内容
· Element head is missing a required instance of child element title
· 说明缺少 <title>；在 head 内添加一个且只一个 <title>
· Element style not allowed as child of element body
· 说明把 <style> 写进了 body；移动到 head 内
· End of file inside comment
· 说明注释未闭合；请补上注释结束标记（不要在注释文字中直书结束标记字面形式）
· A document must not include more than one meta element with a charset attribute
· 说明重复声明了 charset；仅保留第一处
三、如何确认“是不是服务器在我页面前面加了东西”
· 浏览器开发者工具 → Network → 选中文档 → Response 查看最终输出
· 或者：curl -s https://你的域名/路径 > dump.html；将 dump.html 送校验器
· 若发现 doctype 前有内容，检查上游模板、Nginx/Apache 配置、CDN/WAF 注入
四、如何确认响应头正确发送了编码
· curl -I https://你的域名/路径
· 期望看到：Content-Type: text/html; charset=UTF-8
· 若缺少 charset，可在服务端/网关添加默认字符集配置（Nginx/Apache/Express 等）
五、如何查找“不可见空格/控制符”
· Linux：sed -n '1p' index.html | od -An -t x1 （查看首行字节）
· macOS：hexdump -C -n 64 index.html （查看前 64 字节）
· VS Code：启用“呈现空白符”（Render Whitespace）以直观看到异常空格
· 若使用 IDE 模板引擎（PHP/Blade、Twig、Freemarker 等），请确保模板文件也为 UTF-8（无 BOM）
六、复制粘贴注意事项
· 不要把 Markdown 的三反引号围栏、聊天记录、带 @ 的说明行直接粘进 HTML
· 不要把演示日志、箭头符号或非 HTML 片段粘在 doctype 前
· 粘贴文字后再检查是否出现了“智能引号”“全角空格”等不期望字符
七、构建流水线与缓存
· 若使用 CI/CD、构建器或模板引擎，请确保不会在 <meta charset> 之前插入任何额外内容
· 若开启了 CDN/缓存，请清理缓存后再校验；旧缓存可能仍含错误版本
-->
<!-- 结束 body 提示：此处之后不应再输出可见内容；若你在此行下方看到多余字符，多半是模板注入或复制误加 -->
</body>
<!-- 结束 html 提示：此注释位于 </html> 之前、仍在文档结构内；请不要在 </html> 之后再写任何内容，以免出现“页面末尾有多余字符”的问题 -->
</html>