HTML模板是符合标准结构的.html文件，必须包含<!DOCTYPE html>、<html lang="zh-CN">、<head>（含<meta charset="UTF-8">在前、<title>）、<body>三层骨架，缺一不可。

HTML 模板不是某种特殊文件类型，它就是符合标准结构的 .html 文件——只要包含 <html>、<head>、<body> 三层骨架，且 <meta charset="UTF-8"> 和 <title> 不缺失，就能被浏览器正确解析并作为网页模板使用。

为什么 <meta charset="UTF-8"> 必须写在 <head> 最前面？

浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），会立即按当前默认编码渲染；若此时还没读到 <meta charset>，就可能按 ISO-8859-1 或系统本地编码解码，导致乱码。这个标签必须是 <head> 中第一个或第二个元素（紧挨着 <title> 前或后），不能塞在 <script> 后面，也不能放在 <body> 里。

• <meta charset="UTF-8"> 要比 <title> 更早出现才最稳妥（W3C 推荐）
• 如果用编辑器保存为 UTF-8 without BOM，但 HTML 里没写该 meta 标签，仍可能乱码
• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 是旧写法，HTML5 中已不推荐

<lang="zh-CN"> 属性到底要不要加？

加，而且建议加在 <html> 标签上。它不直接影响页面显示，但会影响屏幕阅读器语调、搜索引擎对语言区域的识别、甚至某些 CSS 的 :lang() 伪类匹配。省略后，浏览器可能 fallback 到系统默认语言，导致语音朗读生硬或 SEO 信息不完整。

• 值应匹配实际内容语言，如简体中文用 lang="zh-CN"，繁体用 lang="zh-TW"
• 不要写成 lang="zh" 这种泛化值，部分辅助技术无法准确识别
• 嵌套子元素可覆盖，例如 <p lang="en">This is English</p>

为什么空 <body> 会导致 JS 获取 DOM 失败？

不是“空”本身出错，而是很多新手把 <script> 放在 <head> 里，又没加 defer 或 DOMContentLoaded 监听，结果脚本执行时 <body> 还没加载完，document.querySelector('body') 虽能拿到，但里面没有子节点——更常见的是误操作：删光了 <body> 内容却忘了补回一个容器元素，导致后续 JS 找不到挂载点。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• <script> 放在 </body> 前是最简单可靠的方案
• 若必须放 <head>，至少加上 defer 属性（适用于外部脚本）
• 现代项目中，<body> 至少保留一个根容器，如 <div id="app"></div>，避免直接操作空 body

<DOCTYPE html> 缺失会怎样？

浏览器会进入 Quirks Mode（怪异模式），CSS 盒模型、height 计算、vertical-align 行为等全部退回到 IE5.5 时代的非标准逻辑。你写的 flex 布局可能完全失效，100vh 可能撑不满视口，甚至 margin: 0 auto 居中都偏移。

• <!DOCTYPE html> 必须是文件第一行，前面不能有任何字符（包括空格、BOM）
• 大小写不敏感，但惯例全大写 + 小写 html 组合，不要写成 <!doctype HTML>
• HTML5 中这是唯一合法 DOCTYPE，不需要版本号或 DTD 引用

最容易被忽略的是：所有这些标签位置和顺序问题，都不会报错，浏览器照常渲染——但细微偏差会在多设备适配、SEO 抓取、无障碍访问时集中爆发，而那时你很难联想到是模板骨架本身出了问题。