文章强调语义化HTML结构优先：标题用/置于内，时间用，图文混排用Flex/Grid封装于等容器，图片须配、精准alt及尺寸控制，正文用语义标签分层并优化可读性。

文章详情页的结构设计，核心是让标题、图片和正文既语义清晰又视觉协调。重点不是“怎么排好看”，而是“怎么让机器和人都能准确理解内容关系”——标题是内容主干，图片是支撑证据或情绪补充，文字是逻辑展开。

标题必须用语义化标签包裹

标题不能只靠加粗或大字号模拟，必须使用

（全文唯一）或

（多章节时），且放在

内部最上方。避免用

+ CSS 模拟标题，否则搜索引擎、屏幕阅读器和 RSS 工具无法识别其层级意义。

• 正确写法：

  人工智能如何改变新闻写作

  ...
• 发布时间需用 标签，并带 datetime 属性，例如：2026年7月28日 09:15
• 若含副标题，可用
  包裹
  和
  ，保持语义完整

图文混排优先用 Flex 或 Grid 控制内部排列

每组“图+文”应封装在独立容器中（如

或

），避免全局浮动或绝对定位。现代布局推荐：

• 左右图文：容器设 display: flex; flex-direction: row; gap: 1.5rem;，图片固定宽度（如 width: 320px;），文字部分用 flex: 1; 自适应
• 上下图文：容器设 display: flex; flex-direction: column; align-items: center;，图片加 width: 100%; height: auto; 保证响应式
• 环绕排版（少用）：仅对小图配短段落，用 float: left; margin-right: 1rem;，但需注意后续元素清除浮动或用 overflow: hidden; 包裹

图片必须带语义与性能保障

配图不是装饰，而是内容的一部分。每张图都要满足三项基本要求：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 用

  + +

  组合：确保结构可被解析，
  提供图注说明，而非仅靠 alt 文本
• alt 属性描述画面实质：例如 “两名工程师在实验室调试神经网络训练平台”，而不是 “配图” 或 “示意图”
• 加载与尺寸可控：添加 loading="lazy"，并设置真实 width 和 height（防布局偏移），或用 CSS aspect-ratio: 16 / 9; 替代

正文段落需分层且可读性强

纯文字部分要避免大段堆砌。合理利用 HTML 语义标签划分信息单元：

• 首段可加
  或
  突出导语
• 关键数据、引述、术语解释可用
  结构化呈现
• 长文建议插入小标题（
  及以下），配合锚点链接提升跳转体验
• 行高设为 line-height: 1.6;～1.8;，段间距用 margin-bottom: 1.5rem;，别依赖


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