报纸排版网页的关键在于语义化标签、多列布局与字体节奏：用<article><section>替代<div>，column-count实现分栏，line-height与font-size组合控制阅读节奏，<figure><figcaption>规范图片嵌入。
零基础做不出报纸排版风格的网页——不是因为HTML太难，而是你一开始就试图用 <div> 堆满整个页面，结果文字挤成一团、标题找不到层级、栏宽忽宽忽窄。报纸排版的核心不是“画框”，是“分栏 + 行高节奏 + 字体权重秩序”，HTML 本身就能支撑，关键在怎么选标签、怎么设限制。
用 <article> 和 <section> 替代一堆 <div>
很多人一上来就写 <div class="title">、<div class="byline">、<div class="content">，看似灵活，实则放弃语义约束，后期加CSS时反而更难控制宽度和换行行为。报纸排版依赖清晰的内容区块边界，浏览器对语义化标签有默认的流式处理逻辑，能帮你省掉不少重置代码。
-
<article>包裹整篇报道（含标题、作者、正文、配图说明），它天然支持独立的宽度上下文 -
<header>放主标题和副标，<footer>放刊号、日期、版权声明，它们会自动与内容形成呼吸感 - 长文分段用
<section>而非<div>，尤其当某段带小标题（<h2>）时，<section>能让该小标题在文档大纲中被识别，也方便后续用 CSS 的column-count针对性分栏
两栏布局别碰 float，直接上 column-count + column-gap
报纸最典型的双栏/三栏效果，用浮动或 Flex 布局强行拆容器，容易导致图片卡断、首行缩进错位、跨栏标题失控。现代浏览器对多列排版支持很稳，column-count 是专为文本流设计的，它会自动平衡各栏行数，且不破坏段落语义。
- 只对
<article>或<section>设置column-count: 2，不要套在<p>上 - 必须搭配
column-gap: 1.5rem（不能用margin模拟，否则会导致最后一栏空白过大） - 想让某段不参与分栏？给它加
break-inside: avoid，比如引语块、图片说明、作者署名行 - 注意：
column-width是建议值，浏览器会根据容器宽度自动调整栏数；而column-count是强制值，更适合报纸这种固定栏数场景
字体节奏靠 line-height 和 font-size 组合，不是靠 <br> 换行
新手常手动敲 <br> 控制空行，结果放大屏幕后行距崩塌、打印时错位。报纸阅读依赖稳定的视觉节奏，这由行高与字号的比值决定，不是像素堆砌。
立即学习“前端免费学习笔记（深入）”；
- 主标题用
font-size: 2.5rem+line-height: 1.1（紧凑有力） - 正文用
font-size: 1.125rem+line-height: 1.65（保证易读性，1.6 是报纸常用黄金比） - 所有
<p>默认不设margin-bottom，改用margin-block-end: 1.2em（相对字体单位，缩放时同步） - 避免用
<h1>到<h6>全套，报纸通常只用<h1>（主标）、<h2>（小标）、<h3>（栏目名），多余层级会打乱视觉重量分配
图片嵌入必须用 <figure> + <figcaption>，且限制最大宽度
报纸里图片不是装饰，是信息单元的一部分，有明确位置归属（如“主图居中”“小图右挂”）。用 <img> 单独塞进去，既无法标注来源，也无法响应式收缩，还容易撑破栏宽。
- 每张图必须包裹在
<figure>内，说明文字放<figcaption>，它会自动与图片绑定，CSS 可统一控制对齐 - 给
<figure>设max-width: 100%和width: 100%，再配合figure img { height: auto }，确保不溢出当前栏宽 - 需要“跨栏大图”？给
<figure>加column-span: all（仅 Chrome/Firefox 支持，Safari 需用break-before: column+ 单独容器模拟） - 千万别用
width: 600px这类固定值，报纸网页要在手机、iPad、桌面屏都可读，栏宽是动态的
真正卡住人的从来不是语法，是没意识到报纸排版本质是“控制文本流的呼吸感”：栏数决定节奏密度，行高决定阅读耐力，语义标签决定结构韧性。写完 HTML 后，先关掉所有 CSS 看一遍结构是否自然可读——如果纯文本状态下标题、段落、图注还能分清主次，那离报纸味就不远了。
