今日头条排版参考模板

纯语义HTML · ProseMirror兼容 · 本模板展示全部17个组件的占位示例,替换文字即可复用

使用说明:本模板不含具体文章内容,每个组件用占位文字标注用途。
点击「美化预览」查看理想效果,点击「头条实际效果」查看粘贴后的真实渲染。
复制预览区内容 → 粘贴到头条编辑器 → 替换文字为你自己的内容即可。
— 预览区 —

【深度解析】文章主标题写在这里

一句话摘要,引导读者继续往下看。保持简短,不超过两行。


正文段落内容。每段控制在3-4行以内,段与段之间留空行,让页面有呼吸感。头条正文字号17px,行高2,字间距1px,由编辑器控制。

关键数据和结论要单独成段并加粗,这是头条算法偏好的排版方式。加粗不是为了好看,而是为了突出信息密度。

◆ 章节小标题

小标题下方正文。每300字左右插入一个小标题,帮助读者理清逻辑。头条读者的注意力衰减很快,小标题是留住读者的关键锚点。

核心结论:重要的数据和观点单独成段加粗,让读者即使只扫读也能抓住重点。

▶ 子标题

子标题用于章节内的进一步分层,用▶符号引导。

◆ 列表与要点

头条排版中列表项用语义 ul 标签,li内用 strong 加粗关键词,不依赖CSS圆点。保持列表风格统一,一篇文章内只用一种列表形式。

◆ 引用与数据

引用名人语句或报告数据时,用简洁的引用样式。头条不适合花哨的引用块,保持克制。

"引用文字内容。用于名人名言或报告引用。"

—— 来源署名

87.3%

数据说明文字,描述这个数字的含义

◆ 操作步骤

  1. 第一步:写完文章内容,理清逻辑结构
  2. 第二步:每300字插入小标题,分段不超过4行
  3. 第三步:关键数据加粗单独成段,配图加图注
  4. 第四步:手机端预览确认,再发布

◆ 对比分析

维度 方式A 方式B
特点一 描述A1 描述B1
特点二 描述A2 描述B2
特点三 描述A3 描述B3

◆ 代码示例

const example = "hello";
console.log(example);

◆ 宽表替代形态

当表格列数过多(≥5列)或含长文本列时,用 blockquote 卡片形态替代,每行一卡,信息更清晰。

行标题/关键列 评价标签

列名A:值A

列名B:值B

行标题/关键列 评价标签

列名A:值A

列名B:值B

条目标题

说明文字内容

方法:补充信息

条目标题

说明文字内容

方法:补充信息

◆ 总结

头条排版的核心理念是克制。用符号建立层级,加粗突出重点,短段落保持节奏。

记住三个数字:17px字号、4行分段、300字小标题。


关注我,获取更多实用干货

每周更新,欢迎转发分享