详情页的必须语义化：用含和、标作者，正文用和～，禁用堆砌；css需限定作用域如.post-content，响应式适配小屏阅读习惯，并隔离嵌入内容样式。
文章详情页的 <article></article> 结构必须语义化且可扩展
直接改 CSS 很容易让排版“看起来对”，但实际破坏了内容层级和可访问性。HTML5 中 <article></article> 是详情页内容容器的语义锚点，内部必须用 <header></header>、<section></section>、<footer></footer> 等配合组织，不能全靠 <div> 堆砌。
<p>常见错误：把标题、作者、时间全塞进一个 <code><div class="meta">，导致屏幕阅读器无法识别结构，SEO 也弱化发布时间和作者信息。
<ul>
<li>
<code><header></header> 里只放 <h1></h1>（标题）和 <time datetime="2024-03-15"></time>（带 ISO 格式时间）
<address></address> 包裹，而非 <p class="author"></p>
<p></p>，避免用 <br> 换行或空 <div> 分隔
<li>小标题统一用 <code><h2></h2>～<h4></h4>，禁用 <span style="font-size:1.5em"></span> 模拟CSS 排版关键选择器要避开全局污染
很多模板的 style.css 里写 p { line-height: 1.6; } 这类通配规则，结果影响到导航、侧边栏甚至按钮文字。详情页排版应通过作用域限定生效。
推荐做法是给 <article></article> 加唯一 class，比如 <article class="post-content"></article>，然后所有样式前缀都带上它：
立即学习“前端免费学习笔记（深入）”；
.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 class="brush:php;toolbar:false;"><code></code>、<code><iframe></code> 或 <code><blockquote></code>，这些元素默认样式与正文冲突严重：代码块没背景、视频溢出容器、引用没缩进和引号。</p>
<p>必须单独定义，且不依赖父级 class 传导：</p>
<pre class="brush:php;toolbar:false;">.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>
<p>特别注意：<code><pre class="brush:php;toolbar:false;"></pre> 里的 <code> 不要再设 display: block——它已是块级，重复设置可能触发浏览器兼容问题；aspect-ratio 在旧版 Safari 需 fallback 到 padding-top 百分比技巧，但多数现代模板已可放心使用。
改排版最易忽略的不是样式，而是语义结构是否经得起检查：用浏览器开发者工具切换“无障碍”面板，看 <article></article> 下的子元素是否被正确识别为标题、段落、时间等角色。结构不对，再好看的 CSS 也只是浮沙筑塔。
