p标签前后空行因默认margin，内容不换行因文本流排布；h1–h6核心是语义层级而非样式；href需有效url，相对路径易错；hr表主题分隔、br仅排版换行。

为什么 p 标签前后自动空行，但内容不换行？

因为 p 是块级元素，默认有上下外边距（margin），视觉上表现为“空行”；但它内部的文本仍按正常流排布，遇到边界才折行。直接敲回车不会生效，必须用 <br> 强制换行。

常见错误：在 p 里写多行纯文本，以为换行会保留——实际会被浏览器合并为单行空格分隔。

• 正确做法：段落用 p，段内换行用 <br>
• 替代方案：用 white-space: pre-line CSS 控制，但需明确加在样式中
• 兼容性注意：所有现代浏览器都支持 p 的默认 margin 行为，无需重置除非主动设计

h1 到 h6 不只是字号大小，更是语义层级

搜索引擎和读屏器依赖 h1–h6 的嵌套结构理解页面逻辑。跳过层级（比如 h1 后直接写 h3）会破坏可访问性，也影响 SEO。

实际使用中容易忽略两点：

• 一个页面应有且仅有一个 h1（通常为标题），不能靠 h2 + CSS 加大字号来“伪装”
• h6 并非“最小可用标题”，而是语义最弱的标题；若内容不构成标题，就该用 p 或 span，而非降级硬套
• 不要用 h1–h6 控制样式——改用 class 配合 CSS

a 标签的 href 值不是“随便填路径”

href 必须是有效 URL，否则链接失效或触发意外跳转。相对路径易出错，尤其嵌套目录下。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

典型问题场景：

• href="about.html" 在子目录页中会找子目录下的 about.html，而非根目录
• 解决办法：用绝对路径前缀 /about.html（从根开始）或完整协议 https://example.com/about.html
• href="#" 会导致页面顶部跳转，如仅作 JS 触发，建议写成 href="javascript:void(0)" 或用 button 替代
• target="_blank" 必须配 rel="noopener"，否则存在安全风险（ opener 可控制原页面）

hr 和 br 容易混淆，但用途完全不同

hr 是主题分隔符，表示段落间的内容转换；br 是纯排版换行，不带语义。

误用后果明显：

• 用 br 分隔两个段落 → 语义断裂，屏幕阅读器无法感知结构变化
• 用 hr 替代段落间距 → 语义过重，可能被误读为章节切换
• hr 默认有上下 margin，若要消除，CSS 中设 margin: 0 即可，不用删标签
• br 是自闭合标签，写成 <br> 或 <br> 均可，但统一用前者更简洁

复杂点在于：这些标签单独看都很简单，但组合时语义叠加、样式继承、可访问性反馈会相互干扰。真正写得干净，靠的不是记住语法，而是每次写之前问一句：“这个标签在这里，是否表达了它本该表达的意思？”

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！