纯html个人博客应以语义化结构、正确路径、锚点导航和响应式基础为务实起点：用明确内容层级，图片用相对路径，导航用href="#id"锚点，必加viewport和rem字体，移动端用css实现隐藏/展开菜单。

纯 HTML 搭建个人展示博客，不是“从零开始造轮子”的理想化练习，而是快速落地、能直接打开浏览器看效果、后续方便加功能的务实起点。它不依赖构建工具、不涉及部署配置，但必须避开新手常踩的结构陷阱和语义误用。

用 @#@#@#@#@#@#@#@#@#@0

别写 javascript:void(0) 或空 href="#"，后者会跳到页首且污染 history

配合一点 CSS 让滚动平滑：html { scroll-behavior: smooth; }（现代浏览器都支持）

如果导航固定在顶部，记得给 section 加上 padding-top，否则标题会被遮住

用 <meta name="viewport"> 和响应式字体撑起移动端基础

不加 viewport，手机上看到的只是缩放后的小网页，用户得手动 pinch-zoom，体验直接归零。这不是“锦上添花”，而是底线。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 必须在 里加：<meta name="viewport" content="width=device-width, initial-scale=1">
• 字体大小别写死 px，用 rem 或 em：body { font-size: 1.125rem; }（即 18px），再配合媒体查询微调
• 图片加 max-width: 100%; height: auto;，防止横向溢出
• 导航菜单在小屏下先隐藏，靠一个 checkbox + label + CSS 实现展开（无需 JS），比写一堆 toggle 更轻量可靠

HTML 博客最难的不是写标签，而是判断哪些内容真该放在 HTML 里 —— 比如访问统计代码、评论框、文章搜索，这些留到后期用 JS 动态插入更稳妥。一开始就把结构语义理清、路径写对、移动端可读，后面加功能才不会返工。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！