html解析器从字节流开始标记化，不等文件下载完即启动；先按charset解码为字符，再用有限状态机逐字符产出token，如开始标签、属性、文本等，作为构建dom树的原材料。
HTML解析器从字节流开始做标记化（tokenization）
浏览器不等整个HTML文件下载完就开始解析，一收到字节流就进入解码阶段：先按charset声明（如UTF-8）把字节转成字符，再交由HTML解析器的状态机逐字符扫描。这个过程不是“读一行、分析一行”，而是用预定义的有限状态机识别起始标签、结束标签、属性名/值、注释、文本节点等Token。比如遇到<section data-id="31"></section>，解析器会依次产出：HTMLStartTagToken（含标签名section）、AttributeToken（name=data-id, value=31）、HTMLStartTagToken闭合符号。这些Token是构建DOM树的原材料，和CSS或JS无关。
块级元素的“分块”行为在DOM树构建阶段就已固化
当解析器把Token喂给树构建器（Tree Constructor），它会依据HTML规范决定如何挂载节点。关键点在于：<div>、<code><section></section>、<article></article>、<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>等元素的“独占一行”“前后换行”不是CSSdisplay: block赋予的，而是它们在DOM树中被创建时，就自动触发了块级格式化上下文（BFC）参与规则——比如垂直方向margin折叠、width默认为auto撑满父容器。即使你删掉所有CSS，<section></section>仍会在渲染树中生成独立盒模型；而<span></span>或<em></em>则不会触发BFC，其布局完全依赖父块级容器的行内流上下文。
语义化分块标签（<section></section>、<article></article>、<main></main>）不改变解析流程，但影响DOM结构可信度
这些标签本身不会让解析器多做一步或多建一个节点，它们和<div>一样都走相同的Token→Element→DOM Node路径。区别在于：树构建器会为<code><article></article>打上isArticle内部标记，供后续无障碍API、SEO爬虫、屏幕阅读器提取语义。误用会导致实际结构与语义脱钩：
-
<section></section>必须配<h2></h2>–<h6></h6>标题，否则无法表达“主题分组”意图 -
<article></article>内容应能脱离当前页面被RSS抓取或单独分享，套在轮播图容器里就是语义污染 -
<main></main>在整个DOM中只能出现一次，重复会导致辅助技术跳过次要内容
自定义data-属性不影响解析，但可能干扰JS驱动的动态分块逻辑
像data-tools="135编辑器"或data-color="#c94e4e"这类属性，解析器只当作普通AttributeToken存进元素的attributes集合，既不触发新节点也不改变盒模型。真正容易出问题的是后续JS代码基于这些属性做条件渲染——比如用document.querySelectorAll('[data-id]')批量初始化模块，若服务端未输出该属性，或拼写错误（data-idd），就会漏掉整块内容。更隐蔽的坑是：某些编辑器生成的data-custom和data-color值相同，看似冗余，实则是为兼容旧版JS逻辑而保留的降级字段，删掉可能导致样式错乱。
display: flex强行让<article></article>变成横向排列，它在DOM树和辅助技术中的语义权重依然不变——解析器只认标签名和嵌套关系，不看CSS。
