HTML文字排版核心是语义化层级：用h1–h6构建逻辑大纲（h1唯一、严格递进），strong/em替代b/i实现语义强调，列表须合法嵌套，行高字号用em/rem等相对单位确保可访问性与响应式兼容。
HTML 文字排版的层级设计，本质是用语义标签构建逻辑骨架，再靠 CSS 控制视觉节奏——光套 <div> 或硬塞 <br> 会破坏结构、拖慢渲染、让屏幕阅读器失效。
用 <h1>～<h6> 定义真实内容层级
标题不是“加大加粗的文本”，而是文档大纲的锚点。搜索引擎和辅助技术全靠它理解页面结构。
-
<h1>必须且仅能出现一次，代表整页唯一主题（比如文章标题），别用来做 logo 或 banner 字 - 子级标题必须严格递进：
<h2>→<h3>→<h4>，跳级（如<h2>后直接<h4>）会让大纲断裂 - 公文或长报告中，
<h2>对应“一、”，<h3>对应“（一）”，但注意：这些序号应由 CSS 的counter-increment生成，而非手写在标签里
段落与强调标签不能混用 <b>/<i>
<p> 是段落容器，<strong> 和 <em> 是语义强调，三者分工明确。滥用 <b> 或 <i> 会导致语义丢失，尤其对依赖 ARIA 的读屏软件。
- 需要突出关键信息（如警告、必填项）用
<strong>，它自带语义权重，CSS 可覆盖默认粗体样式 - 表达语气转折或轻度强调（如反语、术语首次出现）用
<em>，而非<i> -
<p>内部禁止嵌套<p>或<div>；若需分组，用<section>或带 class 的<div>包裹多个<p>
列表结构必须合法，否则 DOM 会被浏览器自动修正
浏览器对 <ul> 和 <ol> 的子元素有硬性限制：只允许 <li>、<ul>、<ol>。塞进 <div> 或 <p> 会触发“修复模式”，把非法节点踢出列表外——你在 DevTools 看到的 DOM 和写的 HTML 根本不一致。
立即学习“前端免费学习笔记（深入）”；
- 横向导航菜单这类“伪列表”，先设
ul { list-style: none; padding-left: 0; }，再用li { display: inline-block; }或 Flex 布局 - 带图标或编号的列表项，用
li::before生成内容，避免在 HTML 里写<span class="icon">•</span> - 多级列表嵌套时，子
<ul>必须作为父<li>的最后一个子节点，否则缩进错乱
行高、字号、间距必须用相对单位协同控制
固定像素值（如 line-height: 24px）在响应式场景下极易失效。文字放大、系统缩放、不同设备 DPI 都会让它失准。
- 正文起步设
p { font-size: 16px; line-height: 1.6; }—— 这是浏览器默认、系统缩放兼容、移动端防强制放大的交集点 - 标题用无单位倍数：
h2 { font-size: 1.5em; line-height: 1.4; }，保证父子行高比例稳定 - 段间距统一用
margin-bottom: 1.2em，别混用padding和margin，否则嵌套容器会出现双倍空白
真正难的不是写对标签，而是在改需求时守住语义边界：当产品说“这个标题要变小一点”，别急着调 font-size，先确认它是否还该是 <h3>；当设计师给出行高 28pt 的公文要求，得意识到这是绝对值，必须换算成相对单位并验证在缩放 200% 下是否仍可读。
