HTML文档必须以<!DOCTYPE html>开头且位于首行首字符，<html>为唯一根元素须带lang属性，<meta charset="UTF-8">须紧贴<head>开头，<main>有且仅有一个且不可嵌套，<section>必须含标题。
HTML文档必须以 <!DOCTYPE html> 开头，否则会触发怪异模式
浏览器看到没有 <!DOCTYPE html> 或写错（比如漏空格、大小写混用、加了多余字符），就会退回到怪异模式。这时候盒模型、行高、表格边距等渲染行为和标准模式完全不同，调试时经常表现为布局突然错位、width 不生效、margin 合并异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE html>必须是文件第一行、第一个字符，前面不能有空格、注释或 BOM - 不要写成
<!doctype html>（小写）或<!DOCTYPE HTML>（大写）——虽然多数浏览器容忍，但规范只要求小写doctype和小写html - 旧项目迁移时，如果发现样式大面积失效，先检查这一行是否缺失或被注释掉了
<html> 是唯一根元素，lang 属性影响可访问性和 SEO
<html> 标签包裹整个文档，它不是可选的“装饰”，而是解析器识别结构的锚点。没有它，<head> 和 <body> 会被浏览器自动补全，但补全逻辑不可控，尤其在服务端渲染或模板拼接时容易出问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<html lang="zh-CN">比<html>多做的不只是告诉搜索引擎语言，屏幕阅读器会据此切换语音引擎，字体回退策略也会受影响 - 多语言站点不要只在
<html>上设lang，局部内容如英文引文可用<span lang="en">单独标注 - 避免
lang=""或lang="auto"—— 这些值无效，会被忽略
<head> 里的 <meta charset="UTF-8"> 必须紧贴 <head> 开始
这个 <meta> 标签的位置非常关键：它必须出现在 <head> 内前 1024 字节内，否则浏览器可能已按默认编码（如 ISO-8859-1）开始解析，导致中文变乱码，且后续再出现 <meta charset> 也无效。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把它放在
<head>的第一行，紧跟在<head>标签后，前面不要有任何空行、空格或注释 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">替代 —— 它已被废弃，且兼容性差 - 服务端输出 HTML 时，如果动态插入脚本或广告代码到
<head>开头，要确保不挤掉这行<meta>
语义化标签不是“换汤不换药”，<main> 和 <section> 有强制约束
很多开发者把 <header> 当成 <div class="header"> 的替代品，却忽略它们的语义约束。<main> 就是个典型：W3C 明确要求每个页面**有且仅有一个** <main>，且不能嵌套在 <article>、<aside>、<footer>、<header> 或 <nav> 内部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<main>包裹页面核心内容（如文章正文、产品列表），而不是整个页面容器 -
<section>必须有标题（<h1>–<h6>），否则语义不成立；没标题就用<div> - 辅助工具（如 VoiceOver、NVDA）依赖这些标签跳转，错误嵌套会导致导航混乱，不是“看起来一样就行”
实际写 HTML 时，最容易被跳过的不是怎么用新标签，而是那些看似“不起眼”的位置约束和单一性规则——比如 <meta charset> 必须靠前、<main> 只能一个、<html> 不能省略。它们不报错，但会在特定场景下让页面表现不可预测。
