博客HTML结构应使用语义化标签：用<article>包裹全文，<h1>作唯一主标题，小节用<h2>～<h4>，代码块嵌套<pre>，引用用<blockquote>，列表用<ul>/<ol>；避免全<div>堆砌、<h1>错放、<pre>不包等返祖错误。
直接用 HTML 写博客页面，不等于“手写全部结构+样式+交互”——真正可行的路径是：用语义化 HTML 搭骨架，靠现代 CSS（比如 flex 和 grid）控布局，再按需加轻量 JS。硬套旧式表格布局或全靠 <div> 堆砌，反而难维护、无障碍差、响应式崩。
怎么组织博客文章的 HTML 结构才不算返祖？
浏览器和读屏器靠 HTML 语义理解内容层级。一篇普通技术博客，<article> 是必须的容器，标题用 <h1>（仅一个），小节用 <h2>～<h4>，代码块包在 <pre><code> 里，引用用 <blockquote>，列表优先用 <ul>/<ol> 而非 <p> + 手动换行。
常见错误现象：
- 全篇只用
<div>+ class 模拟标题，SEO 和无障碍直接掉档 -
<h1>出现在侧边栏或页脚，导致主内容结构混乱 - 代码块只用
<pre>不嵌<code>，失去语法高亮语义基础
侧边栏+主内容两栏布局，CSS 怎么写最稳？
别碰 float 或绝对定位做两栏——兼容性和流式排版太脆弱。现代方案就两条路：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
display: flex：父容器设display: flex，主内容区加flex: 1，侧边栏设固定宽（如width: 280px）或flex: 0 0 280px - 用
display: grid：父容器设grid-template-columns: 1fr 280px，再用grid-column控制子元素落位
性能/兼容性影响：两者在 Chrome/Firefox/Safari（含 iOS 16+）都无压力；若需支持 IE11，只能选 flex 并补 flex-wrap: wrap 防窄屏错位。
文章内嵌代码块怎么避免被 CSS 意外截断？
很多博客模板一加 overflow-x: auto 就导致代码块在移动端缩成一条线，或复制时带空格。关键在三处控制：
-
<pre>必须设white-space: pre（不是pre-wrap）保证换行保留 -
<code>加word-break: normal防长变量名强制折行 - 整块加
overflow-x: auto时，<pre>需配max-width: 100%，否则超出视口不触发滚动
示例片段：
<pre 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>
</pre>
为什么「最新教程」常踩图片懒加载和响应式图床的坑？
博客里插图多，但直接写 <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 也救不回图片体验。
