详情页的<article>必须语义化：用<header>含<h1>和<time>、<address>标作者，正文用<p>和<h2>～<h4>，禁用<div>堆砌；CSS需限定作用域如.post-content，响应式适配小屏阅读习惯，并隔离嵌入内容样式。
文章详情页的 <article> 结构必须语义化且可扩展
直接改 CSS 很容易让排版“看起来对”，但实际破坏了内容层级和可访问性。HTML5 中 <article> 是详情页内容容器的语义锚点，内部必须用 <header>、<section>、<footer> 等配合组织，不能全靠 <div> 堆砌。
常见错误：把标题、作者、时间全塞进一个 <div class="meta">，导致屏幕阅读器无法识别结构，SEO 也弱化发布时间和作者信息。
-
<header>里只放<h1>（标题）和<time datetime="2024-03-15">（带 ISO 格式时间） - 作者信息建议用
<address>包裹，而非<p class="author"> - 正文段落必须用
<p>，避免用<br>换行或空<div>分隔 - 小标题统一用
<h2>～<h4>，禁用<span style="font-size:1.5em">模拟
CSS 排版关键选择器要避开全局污染
很多模板的 style.css 里写 p { line-height: 1.6; } 这类通配规则，结果影响到导航、侧边栏甚至按钮文字。详情页排版应通过作用域限定生效。
推荐做法是给 <article> 加唯一 class，比如 <article class="post-content">，然后所有样式前缀都带上它：
立即学习“前端免费学习笔记（深入）”；
.post-content h1 {
font-size: 2.25rem;
margin-bottom: 0.5rem;
}
.post-content p {
margin-bottom: 1.25rem;
line-height: 1.7;
}
.post-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
}
注意：不要用 ID 选择器（如 #post-body）做排版控制——ID 在页面中必须唯一，而模板可能用于多篇文章复用，ID 冲突会导致 CSS 失效或 JS 报错。
响应式断点要匹配真实设备阅读习惯
不少模板只设 @media (max-width: 768px) 一刀切，但手机用户在竖屏下真正需要的是更紧凑的行高、更大的点击区域和更早的字体缩放临界点。
- 正文
font-size建议从1rem（16px）起步，在480px宽度以下升到1.125rem，避免小屏文字过小 -
line-height在移动端可设为1.5，比桌面端的1.7更利快速扫读 - 图片
max-width必须是100%，但记得加height: auto防止拉伸变形 - 避免在
@media里重写整个排版流（比如突然改成 flex column），优先用margin、padding和font-size微调
嵌入内容（代码块、视频、引用）需独立样式隔离
详情页常插入 <pre><code>、<iframe> 或 <blockquote>，这些元素默认样式与正文冲突严重：代码块没背景、视频溢出容器、引用没缩进和引号。
必须单独定义，且不依赖父级 class 传导：
.post-content pre {
background: #f6f8fa;
border-left: 4px solid #007acc;
padding: 1rem;
overflow-x: auto;
margin: 1.5rem 0;
border-radius: 0 4px 4px 0;
}
.post-content iframe {
max-width: 100%;
aspect-ratio: 16/9;
}
.post-content blockquote {
border-left: 3px solid #d0d0d0;
padding: 0.5rem 1rem;
margin: 1.5rem 0;
color: #555;
font-style: italic;
}
特别注意：<pre> 里的 <code> 不要再设 display: block——它已是块级，重复设置可能触发浏览器兼容问题；aspect-ratio 在旧版 Safari 需 fallback 到 padding-top 百分比技巧，但多数现代模板已可放心使用。
改排版最易忽略的不是样式，而是语义结构是否经得起检查：用浏览器开发者工具切换“无障碍”面板，看 <article> 下的子元素是否被正确识别为标题、段落、时间等角色。结构不对，再好看的 CSS 也只是浮沙筑塔。
