新闻详情页用分段的核心是按逻辑主题切分正文，每段必须配或标题，禁止无标题、跳级或纯样式使用；应与协同构建语义化结构。

新闻详情页用 <section></section> 分段，核心是按逻辑主题切分正文，每段必须有标题（<h3></h3> 或 <h4></h4>），不能只为换行或加间距而用。

每段内容对应一个明确主题

比如一篇政策解读类长文，可拆为「政策背景」「条文要点」「实施时间表」「专家观点」「常见问答」等模块。每个模块用一个 <section></section> 包裹，并配相应层级标题：

• 主标题是 <h1></h1>（整篇新闻标题），内部各节统一用 <h3></h3>
• 避免“第一部分”“第二部分”这类空泛命名，标题要能独立传达该段主旨
• 若某段只是补充说明、无独立信息价值（如一句过渡句），不单独设 <section></section>，直接用 <p></p>

嵌套需符合层级逻辑

<section></section> 可在 <article></article> 内部嵌套，但子节必须从属于父节主题，且标题级别递进：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 外层 <article></article> 含 <h1></h1>（新闻标题）
• 其下第一级分段用 <section><h3></h3></section>
• 若某 <h3></h3> 段内还需再细分（如“专家观点”下分“经济学者”“法律专家”），可用 <section><h4></h4></section>
• 禁止跳级（如 <h1></h1> 下直接跟 <h4></h4>）或平级堆砌（多个 <h3></h3> 却无共同上位主题）

避免常见误用

不是所有视觉区块都适合 <section></section>：

立即学习“前端免费学习笔记（深入）”；

• 纯样式分隔（如用 <section></section> 实现两段间的空白或边框）——改用 <div> 加 CSS <li>没有标题的 <code><section></section> —— 屏幕阅读器无法识别，SEO 效果归零，应补标题或换 <div> <li>把图片说明、作者署名、发布时间等附属信息塞进正文 <code><section></section> —— 这些属于 <header></header> 或 <footer></footer> 范畴
• 将多个不相关的小点硬凑成一段（如“联系方式+版权声明+友情链接”）—— 它们不属于同一主题，不应共用一个 <section></section>

配合其他语义标签使用

<section></section> 是组织正文的工具，需与页面其他结构协同：

• 新闻整体用 <article></article> 包裹，确保可被 RSS 抓取、搜索引擎单独索引
• 文章开头的标题、作者、时间放在 <header></header> 内，时间用 <time datetime="2026-09-25"></time>
• 文末的来源链接、相关推荐、评论入口等放入 <footer></footer>
• 若某段含大量数据表格或图表，可在 <section></section> 内嵌 <figure></figure> + <figcaption></figcaption> 保持语义清晰