HTML是标记语言而非编程语言，浏览器通过解析HTML文本构建DOM树，再结合CSSOM生成渲染树，经布局、绘制、合成七步链路最终显示页面。
HTML 不是编程语言，也不是运行时技术，它本身不“执行”也不“计算”——它是一套浏览器能读懂的结构化标记规则。所谓“原理”，本质是浏览器如何把一串带 <tag></tag> 的纯文本，变成你看到的页面。
浏览器怎么把 index.html 变成网页？
这不是魔法，而是有明确的七步链路：从收到文件开始，到最终像素上屏。关键不是记住每一步名字，而是理解哪些环节你可控、哪些你根本插不上手。
-
HTML Parser只认标准语法：比如<div><p>hello</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>能正确建出嵌套节点；但写成<div><p>hello</p></div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>就会自动纠错（实际生成<div><p>hello</p></div>），这种行为不可预测，别依赖 - DOM 树一旦生成，就可被 JavaScript 操作 —— 但注意：
document.write()在页面加载完成后调用会清空整个 DOM，这是老代码里高频翻车点 - CSSOM 构建和 DOM 解析是并行但阻塞的：如果
<link rel="stylesheet">加载慢，DOM 构建完也得等样式表解析完才继续渲染，所以关键 CSS 要内联或预加载
<script></script> 放哪儿？为什么 defer 和 async 行为不同？
脚本位置和属性直接决定 DOM 是否可用、执行时机是否可控。很多人以为“放
