纯HTML博客模板应使用语义化标签构建结构：用替代div堆砌，唯一且包裹正文，置于body底部；优于用于博文；标题层级需严格递进，不可或缺。
纯 HTML 博客模板不需要 JavaScript 就能跑起来，但容易卡在结构混乱、移动端错位、语义缺失这三处——直接照抄“完整代码”反而更难改。
用 <header></header> <main></main> <footer></footer> 定义骨架，别用 <div> 堆砌
<p>浏览器和屏幕阅读器靠语义标签识别内容层级。用 <code><div id="header"> 不如直接写 <code><header></header>；<main></main> 必须且只能出现一次，包裹全部正文；<footer></footer> 要放在
- 错误写法：
<div class="footer">© 2026</div> —— 搜索引擎不认，无障碍工具跳过
- 正确写法：
<footer><p>© 2026 张三的博客</p></footer>
- 额外提醒：
<section></section> 适合每篇博文，<article></article> 更精准（带独立 URL 时优先用它）
响应式布局靠 CSS，HTML 只管“告诉浏览器这是什么”
<div class="footer">© 2026</div> —— 搜索引擎不认，无障碍工具跳过<footer><p>© 2026 张三的博客</p></footer>
<section></section> 适合每篇博文，<article></article> 更精准（带独立 URL 时优先用它）HTML 本身不处理宽度、换行、隐藏菜单。所谓“手机适配”，99% 是靠 @media 规则和 flex/grid 实现的。HTML 的责任是提供干净结构，让 CSS 有据可依。
立即学习“前端免费学习笔记（深入）”；
- 别在 HTML 里写
style="width:100%; max-width:1200px;"—— 后期改配色或断点时全得翻 DOM - 导航栏用
<nav></nav>包裹，CSS 才能统一控制@media (max-width: 768px)下的折叠逻辑 - 图片必须加
alt属性，否则在禁用 CSS 或慢网下变成空白块，且影响 SEO
标题层级不能跳着来，<h1></h1> 到 <h6></h6> 是逻辑链，不是字号开关
一篇博客页里，<h1></h1> 应该是文章主标题（全页唯一），<h2></h2> 是章节，<h3></h3> 是子节。用 <h1></h1> 写侧边栏标题、用 <h3></h3> 写文章标题，会破坏大纲解析，导致语音朗读错乱、SEO 权重分散。
- 首页：一个
<h1></h1>（博客名），若干<h2></h2>（文章标题） - 文章页：一个
<h1></h1>（本文标题），<h2></h2>用于小节，<h3></h3>用于子项 - 绝对避免：
<h1><h2><h1></h1></h2></h1>这类嵌套或回退
最常被忽略的是 <meta name="viewport"> —— 没它，哪怕写了 @media，手机浏览器也会强制缩放成 PC 版，所有响应式努力归零。
