HTML文档必须有且仅有一个<html>根元素，其直接子元素<head>和<body>缺一不可；<head>仅容元信息，放可见内容会触发解析纠错导致DOM错乱；<meta charset>需置于<head>开头防乱码；<title>唯一且必在<head>内；<link>和<script>阻塞渲染，建议加defer或移至<body>底；<p>内禁嵌<div><h1><ul>等块级标签，<li>须在<ul>/<ol>内；<br><hr><img>等标签需合规书写；<div><span>无语义，勿滥用；<html lang>影响可访问性、SEO及CSS伪类；<!DOCTYPE html>须首行无空格/BOM/注释，否则触发怪异模式；移动端需<meta viewport>；DOM构建无宽容期，错误嵌套修正不可控。
<html> 必须存在，且只能有一个；<head> 和 <body> 是它的直接子元素，缺一不可 —— 这是浏览器解析页面的硬性前提，不是可选“习惯”。
为什么 <head> 里不能放可见内容
浏览器只把 <head> 中的内容当作元信息处理，里面写 <p> 或 <div> 不会渲染，但会触发 HTML 解析器纠错（比如自动把错位的 <p> 移到 <body> 下），导致 DOM 结构和预期不一致。常见现象是：开发者工具里看到元素“跳位置”，或 CSS 选择器突然失效。
-
<meta charset="UTF-8">必须放在<head>开头附近，否则中文可能乱码（尤其在 IE 或旧版 Safari 中） -
<title>只能出现一次，且必须在<head>内；重复写会被后一个覆盖，但不会报错 -
<link rel="stylesheet">和<script>放在<head>会阻塞渲染，如需提升首屏速度，<script>建议加defer或移至<body>底部
<body> 里哪些标签不能嵌套、哪些必须闭合
HTML5 对部分标签的嵌套做了宽松处理（比如 <p> 可以自动闭合），但仍有明确禁止项：不能在 <p> 里放 <div>、<h1>、<ul> 等块级容器标签；也不能把 <li> 直接丢在 <body> 里——它必须包裹在 <ul> 或 <ol> 中。否则解析器会补全结构，但补全逻辑因浏览器而异，容易引发样式错位。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<br>和<hr>是自闭合标签，写成<br>或<br/>都合法，但不要写<br></br>（XHTML 风格在 HTML5 中无效） -
<img>必须有src属性，否则会触发 404 请求；alt虽然不是强制，但缺失会影响可访问性和 SEO -
<div>和<span>没有语义，纯为布局/样式服务，别为了“套层”而滥用，该用<article>或<nav>时就别硬塞<div>
lang 属性和 DOCTYPE 的实际影响
<html lang="zh-CN"> 不只是给翻译工具看的：屏幕阅读器靠它切换发音规则，搜索引擎用它判断内容语言权重，CSS 中的 :lang() 伪类也依赖这个值。而 <!DOCTYPE html> 缺失会导致浏览器进入怪异模式（Quirks Mode），此时盒模型、字体渲染、JS 行为都可能偏离标准 —— 尤其在老版本 IE 或某些嵌入式 WebView 中，表现比现代浏览器更明显。
立即学习“前端免费学习笔记（深入）”；
-
lang值推荐用 BCP 47 标准，比如简体中文用zh-CN，繁体中文用zh-TW，别写成zh或chinese -
<!DOCTYPE html>必须是文档第一行，前面不能有任何空格、BOM 或注释，否则同样触发怪异模式 - 如果项目要兼容微信内置浏览器或某些安卓 WebView，建议在
<head>加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端默认缩放可能失真
真正容易被忽略的是：DOM 加载顺序和标签嵌套合法性之间没有“宽容期”——浏览器一边解析一边构建 DOM，错误嵌套会在解析中途被修正，但修正结果不可控。与其依赖纠错，不如写对第一遍。
