HTML代码规范必须严格遵循：1.第一行必须为<!DOCTYPE html>（全大写，无前置字符）；2.<html>需带符合BCP 47标准的lang属性（如zh-CN）；3.<meta charset="UTF-8">须紧贴<head>开头；4.标签名、属性名小写，属性值用双引号。

HTML代码规范不是“写得好看就行”，而是直接影响渲染一致性、可维护性和无障碍支持的关键约束。不按规则来，轻则样式错乱、JS选不到元素，重则SEO降权、屏幕阅读器无法识别。

必须声明 <!DOCTYPE html> 且放在第一行

浏览器靠这个触发标准模式（Standards Mode）。漏掉、写错位置、或写成 <!doctype html>（小写 d）都可能让 IE 或旧版 Edge 进入怪异模式（Quirks Mode），导致盒模型、Flex 布局行为异常。

• <!DOCTYPE html> 必须全大写 DOCTYPE，且前面不能有任何字符（包括空格、BOM、注释）
• 常见错误：<!-- 注释 --><!DOCTYPE html> 或 <html><!DOCTYPE html> —— HTMLHint 的 doctype-first 规则会直接报错
• 不要写成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 这类过时声明，HTML5 只认 <!DOCTYPE html>

<html> 标签必须带 lang 属性

这是 W3C 强制推荐项，影响屏幕阅读器发音、搜索引擎语言识别，也关系到某些 CSS 伪类（如 :lang()）的行为。不加 lang，lang="zh-CN" 和 lang="en" 的默认字体 fallback 也可能不同。

• 值要符合 BCP 47 标准，比如中文用 lang="zh" 或更精确的 lang="zh-CN"，英文用 lang="en" 或 lang="en-US"
• 避免写成 lang="chinese" 或 lang="cn" —— 这些不是合法语言标签，部分辅助技术会忽略
• 如果页面含多语言内容（如中英混排段落），应在对应元素上用 lang 覆盖，例如 <span lang="en">Hello</span>

<meta charset="UTF-8"> 必须出现在 <head> 最早位置

这个 meta 标签决定了浏览器如何解码 HTML 文件。它必须在 <head> 内、且尽可能靠前（理想是第二行），否则前面的文本（如标题、脚本内字符串）可能被错误解析为 Latin-1，出现乱码。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

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

• HTMLHint 的 meta-charset-require 规则会检查：是否缺失、是否在 <head> 外、是否值为空或非法（如 charset=GBK）
• 不要写成 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> —— 已过时，且解析优先级低于 charset 属性
• 确保文件本身也以 UTF-8 无 BOM 编码保存，否则即使写了 charset 也没用

所有标签名和属性名必须小写，属性值统一用双引号

这不是风格偏好，而是 HTML5 规范明确要求。大写标签（如 <DIV>）或单引号属性（class='header'）虽能被现代浏览器容忍，但会破坏与 XML 工具链（如 XSLT）、SSR 框架或静态分析工具（如 HTMLHint 的 tagname-lowercase）的兼容性。

• 自闭合标签（<img>、<input>）不用斜线：<img src="a.jpg" alt="desc">，而非 <img src="a.jpg" alt="desc" />
• 布尔属性（disabled、required）不写值，也不写等号：<button disabled>，而不是 <button disabled="disabled">
• 避免混合大小写，比如 <Img> 或 <div CLASS="a"> —— 这些在 HTMLHint 下都会触发警告

真正难的不是记住这几条，而是在团队协作、模板引擎、第三方组件嵌入时守住边界。比如 Vue 单文件组件里 <template> 中的 HTML 片段，很容易因格式化插件或手误破坏 lang 或 charset 位置；又比如 CMS 输出的富文本，常偷偷塞进大写标签或缺失 DOCTYPE。规范落地，靠的是配置 HTMLHint + pre-commit hook，而不是靠人盯。