真正开始排版需正确使用：每个应包裹逻辑完整的信息单元，不可仅作换行；须配合等语义元素，保持结构清晰；line-height用无单位值（如1.6），标题层级严格递进，唯一且包裹全部主内容。
用对 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 才算真正开始排版
很多人把 <p></p> 当成换行工具，连续写三个 <p></p>
<p></p>
<p></p> 来“空行”，这会让语义彻底丢失，屏幕阅读器会念出三段空内容，SEO 也抓不到有效文本块。
- 每个
<p></p>必须包裹一个逻辑完整的信息单元，比如一句结论、一个现象描述、一个操作步骤 - 别在
<p></p>里塞标题或列表——<h2></h2>和<ul></ul>是兄弟关系，不是子元素 - 移动端下，
<p></p>默认 margin-top/margin-bottom 是浏览器设定的（通常约 1em），不要靠删 margin 来“压紧”文字，那会破坏可访问性缩放时的呼吸空间
line-height 设成无单位数字才是真稳定
写 line-height: 24px 看似精确，但一旦父级 font-size 变成 18px 或用户调大系统字号，行高就卡死不动，文字上下偏移、ascender/descender 粘连全由此来。
立即学习“前端免费学习笔记（深入）”；
- 正文统一用
line-height: 1.6（配合font-size: 16px）——这是浏览器默认、系统缩放兼容、移动端防强制放大的交集点 - 标题用
line-height: 1.4配font-size: 1.5em，保持比例关系，避免视觉节奏断裂 - 绝对不要在
<p></p>上设line-height: normal，它依赖字体度量，不同字体渲染差异极大
标题层级崩掉，90% 是跳级或滥用 <section></section>
<h1></h1> 只能出现一次，且必须是文章主标题；<h2></h2> 是一级子章节，<h3></h3> 是二级——<h1></h1> 后直接跟 <h3></h3> 就是典型崩塌。更隐蔽的问题是把整篇内容包进 <section></section>，再在里面套一堆 <section></section>，结果每个 <section></section> 都被解析器当成独立可分发单元，语义权重反超主文。
- 一篇文章只有一个
<article></article>，它应直接包裹<h1></h1>、导语、正文、作者信息等全部主内容 -
<section></section>只用于内部逻辑分组，且每组必须有明确小标题（<h2></h2>或<h3></h3>），不能光靠 class 名称“背景”“方法”来暗示结构 - 导语、作者栏这类辅助内容，用
<p class="lead"></p>或<aside></aside>，别硬塞<h4></h4>
混排中文字与西文时，letter-spacing 和 writing-mode 得分开控
中文和英文混排时，盲目加大 letter-spacing 会让汉字字距失衡，而强行用 writing-mode: vertical-rl 又会让数字和拉丁字母歪斜——这两者根本不是同一类问题。
- 纯中文段落慎用
letter-spacing，汉字本身已有字间留白；仅在标题强化或手写体防重叠时微调（建议0.02em～0.05em） - 竖排需求优先用
writing-mode: vertical-rl+text-orientation: mixed（保持数字/英文水平），别用 JS 拆字+绝对定位那种反模式 - 如果只是局部右对齐引用或签名，用
text-align: right即可，不用动 writing-mode
<p></p> 的语义边界和 <article></article> 的唯一性——它们不决定样式，却决定了文字是否能被正确读取、索引和复用。样式可以重写，语义错位了，就得重构 DOM。 
