文章强调语义化HTML结构优先：标题用<h1>/<h2>置于<article>内，时间用<time datetime>，图文混排用Flex/Grid封装于<figure>等容器，图片须配<figcaption>、精准alt及尺寸控制，正文用语义标签分层并优化可读性。
文章详情页的结构设计，核心是让标题、图片和正文既语义清晰又视觉协调。重点不是“怎么排好看”，而是“怎么让机器和人都能准确理解内容关系”——标题是内容主干，图片是支撑证据或情绪补充，文字是逻辑展开。
标题必须用语义化标签包裹
标题不能只靠加粗或大字号模拟，必须使用 <h1>（全文唯一）或 <h2>（多章节时），且放在 <article> 内部最上方。避免用 <div> + CSS 模拟标题，否则搜索引擎、屏幕阅读器和 RSS 工具无法识别其层级意义。
- 正确写法：
<article><h1>人工智能如何改变新闻写作</h1>...</article> - 发布时间需用 <time> 标签，并带
datetime属性，例如：<time datetime="2026-07-28T09:15:00+08:00">2026年7月28日 09:15</time> - 若含副标题，可用 <header> 包裹 <h1> 和 <p class="subtitle">，保持语义完整
图文混排优先用 Flex 或 Grid 控制内部排列
每组“图+文”应封装在独立容器中（如 <figure> 或 <div class="media">），避免全局浮动或绝对定位。现代布局推荐：
- 左右图文：容器设
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;包裹
图片必须带语义与性能保障
配图不是装饰，而是内容的一部分。每张图都要满足三项基本要求：
立即学习“前端免费学习笔记（深入）”；
-
用 <figure> + <img> + <figcaption> 组合：确保结构可被解析，
<figcaption>提供图注说明，而非仅靠 alt 文本 - alt 属性描述画面实质：例如 “两名工程师在实验室调试神经网络训练平台”，而不是 “配图” 或 “示意图”
-
加载与尺寸可控：添加
loading="lazy"，并设置真实width和height（防布局偏移），或用 CSSaspect-ratio: 16 / 9;替代
正文段落需分层且可读性强
纯文字部分要避免大段堆砌。合理利用 HTML 语义标签划分信息单元：
- 首段可加 <blockquote> 或 <aside> 突出导语
- 关键数据、引述、术语解释可用 <dl><dt><dd> 结构化呈现
- 长文建议插入小标题（<h3> 及以下），配合锚点链接提升跳转体验
- 行高设为
line-height: 1.6;～1.8;，段间距用margin-bottom: 1.5rem;，别依赖<br>
