标签用于语义化划分逻辑独立的段落，段距靠margin控制，首行缩进用text-indent:2em，禁嵌块级元素。它强调内容结构而非换行，确保可访问性、seo和响应式适配。

关键不在怎么写标签，而在于怎么判断哪里该用段落、怎么控制它呈现出来的呼吸感——排版整洁的本质是语义清晰 + 间距可控 + 缩进得当。

按逻辑切分，别按回车切分

一段文字是否该包进

，取决于它是不是一个完整的意思单元，而不是你敲了多少次回车。浏览器会忽略源码里的换行，硬靠空行“模拟段落”会导致：屏幕阅读器读不出停顿、SEO 抓不到结构、CSS 选不到相邻段落。

• ✅ 正确做法：把“背景介绍”“问题分析”“解决方案”各自独立成段，每段用一对

• ❌ 错误做法：一段话里换三行就插三个
  ，或用多个
  空标签撑开间距
• 非段落内容（如作者署名、版权信息、短标语）改用
  、 或
  ，不塞进

段距只动 margin，其他都别碰

浏览器默认给

加的是 margin-top 和 margin-bottom（约 1em），这就是段与段之间的“空隙”。要调间距，就直接覆盖这两个值：

• 统一设置：p { margin: 0.8em 0; }
• 首段顶边距归零：.article p:first-child { margin-top: 0; }
• 末段底边距归零：.article p:last-child { margin-bottom: 0; }
• 别只设 margin-top —— 相邻段落的上下边距会叠加，造成双倍空白
• line-height 是管段内行高，padding 是往段落内部“撑”，两者都不该用来制造段间距

中文首行缩进用 2em，不是 32px

缩进两个汉字宽度，是中文排版的基本习惯。用 text-indent: 2em 才能随字体大小自适应：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 用户放大字号、切换系统设置、在高 DPI 屏幕上浏览时，2em 始终≈两个字宽
• 32px 是固定像素，在 150% 缩放时可能只剩一字符宽，小屏设备上又容易过宽
• 合法写法：

  正文开始…

• text-indent 只作用于首行，不影响后续自动换行，比用 padding-left 安全得多

别在

里塞块级元素

HTML 规范禁止在

内嵌套

、

、另一个

等块级标签。浏览器遇到

xxx

会自动截断，实际解析成：

xxx

• 结果：DOM 结构断裂、样式错位、SEO 和读屏器误判
• 合法子元素只有行内内容：、、、 等
• 要包裹多段内容，用
  或

  ，再把多个

  放进去

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