段落必须用<p>而非<div>，标题须按<h1>–<h6>层级规范使用，强调用<strong>/<em>而非<b>/<i>，换行优先CSS控制而非<br>，语义缺失会损害SEO与可访问性。
用 <p> 而不是随意堆 <div> 写段落
浏览器默认给 <p> 加了上下外边距，语义上也明确这是“一段文字”，搜索引擎和读屏软件会识别它为独立内容块。直接用 <div> 包文本，既没语义、又得手动重置 margin，还可能影响 SEO 和可访问性。
常见错误：把标题、说明、列表项全塞进 <div>，结果样式混乱、缩放时文字重叠、屏幕阅读器念成“一堆没名字的盒子”。
- 正文段落一律用
<p> - 小说明、注释类短文本可用
<small>（语义是附属信息，不是单纯变小） - 避免嵌套
<p><p>...</p></p>—— HTML5 不允许<p>互相嵌套
<h1> 到 <h6> 必须按层级写，不能只看大小
标题标签的意义不在字号，而在文档结构。一个页面只能有一个 <h1>（通常是主标题），子模块用 <h2>，子模块里的小节用 <h3>，以此类推。跳级（比如 <h1> 后直接 <h4>）或乱用（比如用 <h3> 当强调文字）会让大纲解析失败，影响目录生成、SEO 权重分配和键盘导航顺序。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先画草稿：标出哪是主标题、哪是章节、哪是小提示，再选对应
<hN> - 别靠 CSS 把
<h2>改成比<h1>还大 —— 视觉可以调，语义不能骗 - 用浏览器开发者工具的“无障碍”面板检查标题树是否连贯
强调和特殊语义别只靠 <b> / <i>，优先用 <strong> / <em>
<b> 和 <i> 只表示“视觉加粗/斜体”，而 <strong> 表示内容重要性高（读屏器会加重语气），<em> 表示语气强调（读屏器会变调）。HTML5 明确区分了表现与语义。
典型误用场景：
- 用
<i>写英文书名、生物拉丁名 → 应该用<cite>或<span>+ class - 用
<b>做关键词高亮 → 应该用<strong>（如果真重要）或<mark>（如果是搜索匹配高亮） - 在按钮里写
<b>提交</b>→ 按钮文本本身已有语义，无需额外强调标签
长文本换行和空格处理：用 <br> 少，用 CSS 控制多
<br> 是强制换行符，仅适用于诗歌、地址、歌词等**内容本身需要换行**的场景。日常段落中滥用 <br> 替代段落分隔，会导致响应式失效（小屏下不该断行的地方硬断）、复制粘贴时出现多余换行、打印样式错乱。
更可控的做法：
- 段落之间用
<p>分隔，靠 CSS 的margin控制间距 - 想保留原文换行和空格？用
<pre>（适合代码、日志）或white-space: pre-line（适合用户输入的富文本预览） - 单字/词强制不换行？用
<span>+white-space: nowrap
<p style="white-space: pre-line;">第一行 第二行（两个空格后换行） 第三行</p>实际写静态页时，最容易被忽略的是标题层级断裂和
<div> 泛滥——看着渲染正常，但一开无障碍模式或跑 Lighthouse 审计就暴雷。语义标签不是“写了更好”，而是“不写就埋坑”。 
