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