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