博客html结构应使用语义化标签：用包裹全文，作唯一主标题，小节用～，代码块嵌套，引用用，列表用/；避免全堆砌、错放、不包等返祖错误。
直接用 HTML 写博客页面，不等于“手写全部结构+样式+交互”——真正可行的路径是：用语义化 HTML 搭骨架，靠现代 CSS（比如 flex 和 grid）控布局，再按需加轻量 JS。硬套旧式表格布局或全靠 <div> 堆砌，反而难维护、无障碍差、响应式崩。
<h3>怎么组织博客文章的 HTML 结构才不算返祖？</h3>
<p>浏览器和读屏器靠 HTML 语义理解内容层级。一篇普通技术博客，<code><article></article> 是必须的容器，标题用 <h1></h1>（仅一个），小节用 <h2></h2>～<h4></h4>，代码块包在 <pre class="brush:php;toolbar:false;"><code></code> 里，引用用 <code><blockquote></blockquote></code>，列表优先用 <code><ul></ul></code>/<code><ol></ol></code> 而非 <code><p></p></code> + 手动换行。</pre>
常见错误现象：
- 全篇只用
<div> + class 模拟标题，SEO 和无障碍直接掉档 <li> <code><h1></h1>出现在侧边栏或页脚，导致主内容结构混乱 - 代码块只用
<pre class="brush:php;toolbar:false;"></pre>不嵌<code>，失去语法高亮语义基础 - 用
display: flex：父容器设display: flex，主内容区加flex: 1，侧边栏设固定宽（如width: 280px）或flex: 0 0 280px - 用
display: grid：父容器设grid-template-columns: 1fr 280px，再用grid-column控制子元素落位 -
<pre class="brush:php;toolbar:false;"></pre>必须设white-space: pre（不是pre-wrap）保证换行保留 <code>加word-break: normal防长变量名强制折行- 整块加
overflow-x: auto时，<pre class="brush:php;toolbar:false;"></pre>需配max-width: 100%，否则超出视口不触发滚动
侧边栏+主内容两栏布局，CSS 怎么写最稳？
别碰 float 或绝对定位做两栏——兼容性和流式排版太脆弱。现代方案就两条路：
性能/兼容性影响：两者在 Chrome/Firefox/Safari（含 iOS 16+）都无压力；若需支持 IE11，只能选 flex 并补 flex-wrap: wrap 防窄屏错位。
文章内嵌代码块怎么避免被 CSS 意外截断？
很多博客模板一加 overflow-x: auto 就导致代码块在移动端缩成一条线，或复制时带空格。关键在三处控制：
示例片段：
<pre class="brush:php;toolbar:false;" style="white-space: pre; max-width: 100%; overflow-x: auto;">
<code class="js">function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}</code>
为什么「最新教程」常踩图片懒加载和响应式图床的坑？
博客里插图多，但直接写 <img src="xxx.jpg"> 会拖慢首屏、在 Retina 屏模糊、横竖屏切换时拉伸变形。必须做三件事：
- 用
loading="lazy"属性（所有现代浏览器已支持），但首页首图要删掉它，防折叠屏下误判为“不在视口” - 用
srcset+sizes适配分辨率：<img src="a-400.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px"> - 避免用第三方图床返回的原始尺寸链接（如
xxx.com/abc.jpg），优先走cloudinary或imgix的动态参数（w_800,q_auto），不然改版时全量重传
最容易被忽略的是：很多静态博客生成器（如 Hugo/Jekyll）默认把 Markdown 中的 ![]() 渲染成裸 <img>，得靠插件或自定义模板注入 srcset 和 loading——这步不手动干预，再新的 CSS 也救不回图片体验。
