纯HTML做个人博客页面这件事，我太有发言权了。前阵子帮一个完全没有前端基础的同事搭个人展示页，他连CSS和JavaScript是什么都搞不清楚，硬是用一段纯HTML代码把博客界面撑起来了，效果居然还行。很多人一搜“HTML网页制作”，就默认必须搭配CSS和JS才能玩，实际上纯HTML能做的事情比你想象的多，尤其是做信息结构清晰的个人博客页面——文章列表、导航栏、图文介绍、页脚版权，这些用纯HTML标签完全可以实现。这篇博文我打算用一套可直接运行的完整代码，带你从零写一个个人博客页面，把每个标签为什么这么用、每个结构怎么拆都讲明白，顺便把我踩过的坑一起交代清楚。
1. 为什么选纯HTML搭建个人博客页面
1.1 纯HTML方案能做什么、局限在哪
先给结论：HTML是超文本标记语言，它天生负责的是内容和结构，而不是样式和交互。所谓“纯HTML代码做博客页面”，指的是只用<h1>、<p>、<a>、<img>、<ul>这类标签把页面骨架搭出来，不引入外部CSS文件，也不写交互脚本。这么做出来的页面，主要内容齐全，浏览器默认样式也能把它渲染得整齐可读，适合做个人博客的静态版本或原型图。
但你要清楚它的边界。纯HTML页面里，所有文章内容都是“写死”在代码里的，新增一篇文章就得手动改代码；菜单可以点击跳转，但不会有下拉折叠；没有搜索功能，也没有文章浏览量统计。如果你想做一个真正动态更新的博客，后续还得引入CSS美化和JavaScript或者后端模板引擎。不过对于刚入门HTML的朋友来说，先把纯HTML结构写对写规范，是性价比最高的学习路径。
1.2 适合哪些场景与人群
这套方案最典型的使用场景有这么几类：HTML课程的大作业、个人简历展示页、博客站点的静态原型、GitHub Pages上托管的轻量个人主页。每类场景需求不一样，比如大作业要突出标签用得多，简历页要信息层级清晰，GitHub Pages则适合极简风格。
我从后台看到很多同学在搜“html新手”“html简单网页代码”，说明大多数人刚开始学的时候，缺的不是复杂框架，而是一个能跑通的最小实例。纯HTML博客页面正是这样一个最小实例：一篇文章列表页需要用到header、nav、main、article、aside、footer这些语义化标签，几乎覆盖了HTML最核心的常用标签。把这一个页面拆透，你后续学盒子模型、浮动布局、Flex布局时就有了具体的载体。
1.3 页面整体结构设计思路
我搭这个页面前，习惯先在纸上画一个简单线框图，把页面从上到下拆成几个区域，再用方框画出来。典型的个人博客页面结构是：
- 顶部：站点标题 + 导航菜单
- 主体左侧（或居中区域）：文章列表，每篇文章有标题、日期、摘要、阅读全文链接
- 主体右侧：侧边栏，放博主介绍、标签、热门文章
- 底部：版权信息、备案号或社交链接
纯HTML阶段不需要考虑复杂的栅格系统，因为浏览器默认的块级元素会从上往下排列，天然就是流式布局。你只要按顺序把标签写对，页面就会按预期顺序展示，这也是HTML“内容优先”特性的一个体现。核心思路就是：先把内容逻辑分块，再用对应语义的标签去装内容。
2. 动手前的准备与HTML页面基础骨架
2.1 工具与文件组织
写纯HTML对工具的要求低到几乎没有。Windows自带的记事本、macOS的文本编辑、VS Code，任何一个能存文本的工具都行。我强烈推荐VS Code，因为它有语法高亮和自动补全，能避免很多低级错误，比如漏掉闭合标签。
文件组织方面，我习惯在本地建一个my-blog文件夹，里面放index.html，再建一个images目录放图片。纯静态页面暂时用不到css和js目录，但如果你后续想升级成带样式的版本，建议一开始就按这个格式来，省得后面再搬文件。打开浏览器时直接双击index.html，或者用VS Code的Live Server插件起一个本地服务，两种方式都可以预览。
2.2 HTML文档基本骨架解析
一个HTML页面标准化骨架长这样：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人博客</title> </head> <body> </body> </html>这里每一行都有讲究。<!DOCTYPE html>告诉浏览器按现代标准模式渲染页面，而不是兼容模式，少了它某些标签的边距和布局会莫名其妙出错。<html lang="zh-cn">声明页面主语言是简体中文，既方便浏览器翻译插件识别，也利于搜索引擎判断内容语言。<meta charset="utf-8">是中文网页的生命线，不写它页面容易出现乱码；<meta name="viewport">这行则是移动端适配的基础，保证页面在手机上不至于被缩放得特别小。<title>内容会显示在浏览器标签页上，也是搜索引擎结果中的标题，最好不要用“新建文档”之类的默认值。
2.3 第一个可用页面的最小实现
在动手拆模块之前，我先给你一个可以完整运行的骨架级博客页面，你可以先复制到本地打开看效果，再往下读我逐行拆解。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小林的个人博客</title> </head> <body> <header> <h1>小林的知识仓库</h1> <p>记录前端学习路上的点滴</p> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">前端笔记</a></li> <li><a href="#">生活随笔</a></li> <li><a href="#">关于我</a></li> </ul> </nav> <main> <article> <h2>用纯HTML写博客是一种什么体验</h2> <p>发布日期：2025年1月12日</p> <p>不少人觉得不用CSS就没法看，其实把结构与标签用对，页面依然有清晰的信息层级……</p> <a href="#">阅读全文</a> </article> <article> <h2>我的第一篇博客文章</h2> <p>发布日期：2025年1月5日</p> <p>这篇文章记录我搭建个人独立博客的第一天，也是把HTML深入学习的第一天……</p> <a href="#">阅读全文</a> </article> </main> <footer> <p>Copyright © 2025 小林的知识仓库</p> </footer> </body> </html>这个页面虽然没做任何样式，但浏览器默认会呈现出标题加粗、段落间距舒适、列表带圆点的效果，信息层级一目了然。新手看不懂这么大段代码时不要慌，下一章我会把每个区域单独拆出来讲。
3. 核心内容模块：个人博客页面这样拆
3.1 顶部导航与站点标题
博客页面的顶部是访客第一眼看到的地方。我习惯用<header>标签包裹站点标题和副标题，用<nav>包裹导航菜单。<header>是语义化标签，表示页面头部，<nav>专门用来放导航链接区域，爬虫能更快识别页面结构。
导航菜单本质是一个超链接列表，标准的写法是用无序列表<ul>包住每个菜单项<li>，里面再放<a>链接。为什么要套一层<ul>而不是直接用<a>排成一行？因为列表能表达“这些链接属于同一组菜单”的逻辑关系，对后续做样式和响应式布局都很方便。示例代码如下：
<header> <h1>小林的知识仓库</h1> <p>记录前端学习路上的点滴</p> </header> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="frontend.html">前端笔记</a></li> <li><a href="life.html">生活随笔</a></li> <li><a href="about.html">关于我</a></li> </ul> </nav>这里我特意把href从#换成了具体页面文件名。#是空链接，点击只会跳回页面顶部，适合做占位；真实导航应指向目标页面，比如about.html。如果你只想做单页博客，菜单链接可以指向页面内部的区块ID，写法是href="#articles"，配合目标区域id="articles"实现页面内锚点跳转，这个技巧在后面的优化章节还会细讲。
3.2 博文列表卡片区
个人博客页面的重头戏是文章列表。我从不用一个整体段落包住所有文章，而是把每篇独立文章放进一个<article>标签里，再用<main>标签包住整个内容区域。这样做的逻辑是：<article>表示一个独立的、可复用的内容块，一篇文章就是一个完整的语义单元，搜索引擎也更容易提取正文。
一篇文章的骨架包括标题、发布日期、摘要和阅读全文链接。发布日期我建议用<time>标签包起来，并加上datetime属性，如下：
<main> <article> <h2>用纯HTML写博客是一种什么体验</h2> <p>发布于 <time datetime="2025-01-12">2025年1月12日</time></p> <p>不少人觉得不用CSS就没法看，其实把结构与标签用对，页面依然有清晰的信息层级。关闭浏览器默认样式后很多东西才会现出原形……</p> <a href="post-01.html">阅读全文</a> </article> <article> <h2>我的第一篇博客文章</h2> <p>发布于 <time datetime="2025-01-05">2025年1月5日</time></p> <p>这篇文章记录我搭建个人独立博客的第一天，也是把HTML深入学习的第一天。以后回头看一定会很有意思……</p> <a href="post-02.html">阅读全文</a> </article> </main><h2>用来做文章标题而不是<h1>，是因为站点主标题在<header>里已经占用了<h1>。如果每个<article>都用<h1>，页面会有多个一级标题，既不符合语义规范，也不利于SEO。文章多次出现时，我建议所有列表页文章标题统一用<h2>，如果后续页面里有小节，再往下用<h3>、<h4>，保持层级递进。
3.3 侧边栏：关于作者、标签和热门文章
侧边栏是博客页面丰富信息量的重要模块，在HTML里对应<aside>标签，表示与主体内容相关的辅助信息。我用它来放博主简介、文章标签和热门文章列表。
博主简介部分我用一张头像图片加一段自我介绍。图片要用<img>标签，并且一定要写alt属性，这样图片加载失败时用户能看到替代文字，屏幕阅读器也能正确播报内容。代码是这样：
<aside> <section> <h2>关于博主</h2> <img src="images/avatar.jpg" alt="小林的头像" width="120" height="120"> <p>我是小林，前端学习者，正在努力把每一个基础标签用得明明白白。</p> </section> <section> <h2>热门标签</h2> <ul> <li><a href="#">前端基础</a></li> <li><a href="#">HTML标签</a></li> <li><a href="#">CSS布局</a></li> <li><a href="#">博客搭建</a></li> </ul> </section> <section> <h2>热门文章</h2> <ul> <li><a href="#">纯HTML页面如何做SEO优化</a></li> <li><a href="#">我的第一台云服务器</a></li> <li><a href="#">Markdown写作入门</a></li> </ul> </section> </aside>这里我用<section>给侧边栏里的每一块信息再分了个“区中区”。<section>适合给内容分区，而<aside>表达“和主内容相关但不属于主内容”。很多新手分不清这两个标签，我的经验是：如果这段内容被拿走后页面主体依然完整，那它就非常适合放<aside>；如果把页面按章节划分成块，每块内部需要独立标题时，就用<section>。
3.4 页脚与版权信息
页脚是页面收尾的地方，对应<footer>标签。放版权声明已经是博客圈的通行做法，我还会补充一个友情链接和社交入口。纯HTML阶段的页脚不需要做得很复杂，注意别把重要信息漏掉即可：
<footer> <p>Copyright © 2025 小林的知识仓库</p> <p> 邮箱：<a href="mailto:xiaolin@example.com">xiaolin@example.com</a> | GitHub：<a href="https://github.com">@xiaolin</a> </p> </footer>mailto:链接是一种特殊的链接协议，点击后会自动打开用户的默认邮件客户端并新建邮件到指定地址，适合作为纯静态页面上的联系方式。如果你的页面以后要放备案号，同样的位置加一行文字就行。页脚在HTML结构里虽然只有几行，但它是用户滚动到底部时对站点形成信任感的重要区域，别留空白。
3.5 纯HTML版本完整代码汇总
把上面几个模块组合起来，就是一个完整的、可直接运行的纯HTML个人博客页面。我把代码贴在这里，你可以直接建一个index.html并复制进去：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小林的个人博客</title> </head> <body> <header> <h1>小林的知识仓库</h1> <p>记录前端学习路上的点滴</p> </header> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="frontend.html">前端笔记</a></li> <li><a href="life.html">生活随笔</a></li> <li><a href="about.html">关于我</a></li> </ul> </nav> <main> <article> <h2>用纯HTML写博客是一种什么体验</h2> <p>发布于 <time datetime="2025-01-12">2025年1月12日</time></p> <p>不少人觉得不用CSS就没法看，其实把结构与标签用对，页面依然有清晰的信息层级。这篇文章分享我坚持用纯HTML写作的收获。</p> <a href="post-01.html">阅读全文</a> </article> <article> <h2>我的第一篇博客文章</h2> <p>发布于 <time datetime="2025-01-05">2025年1月5日</time></p> <p>这篇文章记录我搭建个人独立博客的第一天，也是把HTML深入学习的第一天。</p> <a href="post-02.html">阅读全文</a> </article> </main> <aside> <section> <h2>关于博主</h2> <img src="images/avatar.jpg" alt="小林的头像" width="120" height="120"> <p>我是小林，前端学习者，正在努力把每一个基础标签用得明明白白。</p> </section> <section> <h2>热门标签</h2> <ul> <li><a href="#">前端基础</a></li> <li><a href="#">HTML标签</a></li> <li><a href="#">CSS布局</a></li> <li><a href="#">博客搭建</a></li> </ul> </section> <section> <h2>热门文章</h2> <ul> <li><a href="#">纯HTML页面如何做SEO优化</a></li> <li><a href="#">我的第一台云服务器</a></li> <li><a href="#">Markdown写作入门</a></li> </ul> </section> </aside> <footer> <p>Copyright © 2025 小林的知识仓库</p> <p> 邮箱：<a href="mailto:xiaolin@example.com">xiaolin@example.com</a> | GitHub：<a href="https://github.com">@xiaolin</a> </p> </footer> </body> </html>保存后双击打开，你会看到页面顶部是站点名和菜单，中间是两篇文章，右侧是博主信息，底部是版权。这个版本虽然没有漂亮的设计感，但它把页面结构表达得非常标准，是后续所有美化和功能开发的基础。
4. 在不引入外部框架的前提下做体验优化
4.1 页面内锚点跳转与“一键返回顶部”
纯HTML不写JavaScript也能实现一个实用的交互：锚点跳转。原理很简单，给页面中的目标元素加一个id属性，再用<a>链接指向#加这个id，浏览器就会自动滚动到对应位置。
比如，我想让“前端笔记”菜单直接跳转到页面上某一篇文章区块：
<nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="#post1">最新文章</a></li> <li><a href="#about">关于博主</a></li> </ul> </nav>然后在对应的<article>标签上加上id="post1"，在侧边栏<section>上加上id="about"。点击菜单时，浏览器会瞬间定位到指定区块。加一个“返回顶部”链接也是同样的思路：
<a href="#top">返回顶部</a>只要<body>起始位置或最外层容器标上id="top"即可。这个小功能几乎在每个长页面里都用得上，而且不需要写JavaScript，纯HTML就能实现。需要注意的是，同一个页面内id值不能重复，否则锚点跳转会出现歧义。
4.2 用内联样式和嵌入样式做适当美化
你一定想问：纯HTML页面看起来太朴素，能不能加一点样式？答案是能，而且有两种不用独立CSS文件的方式。第一种是给具体标签加style属性，这叫内联样式；第二种是在<head>里用<style>标签包一段CSS，这叫嵌入样式。
我给前面导航栏做一个简单背景色示例：
<nav style="background-color: #f0f0f0; padding: 10px;"> <ul> <li><a href="index.html">首页</a></li> </ul> </nav>或者更推荐在<head>里统一写：
<style> nav { background-color: #f0f0f0; padding: 10px; } article { border-bottom: 1px solid #ddd; margin-bottom: 20px; } </style>我的经验是：如果想保持“纯HTML代码”的定位，可以少量使用内联样式做关键区域的强调，但整体美化还是建议逐步往嵌入样式和后续独立CSS文件过渡。因为样式一旦多起来，内联方式会让代码变得难以维护，改一个边距要翻很多行。你现在只用纯HTML阶段，理解“样式可以内嵌”就足够了。
4.3 用表单和按钮做一点“伪交互”
除了锚点跳转，纯HTML里还有个常用的交互点：表单。你可以做一个简单的搜索框和订阅输入框。不写后端时，表单提交没有实际效果，但你可以借助按钮的onclick属性触发浏览器弹窗，也算是一个简单交互演示。
这里要注意：onclick本质是JavaScript的写法，如果严格限定“不能有一行JavaScript”，那就不加；但很多课程作业里老师说的“纯HTML”其实允许多个浏览器特性绑定。这里按需取舍，我给出一个无害的示例：
<form> <label for="keyword">搜索：</label> <input type="text" id="keyword" name="keyword" placeholder="输入关键词"> <button type="button" onclick="alert('纯HTML页面暂未接入搜索功能');">搜索</button> </form>点击按钮后浏览器会弹出提示，告诉用户功能还没有实现。这种做法在原型演示中很常见，既让页面看起来完整，又不会因为死链接让用户困惑。如果你不希望出现任何JS痕迹，可以把button的type改成submit，提交后页面会刷新，也算一种反馈，只是体验一般。
4.4 HTML注释：给未来的自己留条退路
写代码时我习惯留下清晰注释，个人博客页面也不例外。HTML注释的格式是<!-- 注释内容 -->，浏览器渲染时不会显示它。注释能帮你在一个月后打开这个文件时，快速想起当初每一块区域在做什么。
我一般这样写注释：
<!-- 顶部导航 --> <nav> ... </nav> <!-- 文章列表区域 --> <main> ... </main> <!-- 侧边栏：关于博主、标签、热门文章 --> <aside> ... </aside>别小看这件事。我见过太多初学者写完一个页面后，下次想改结构时完全不知道从哪下手，最后只能删掉重来。注释就是给代码做index，成本极低，收益极高。
4.5 图片与资源路径的常见写法
博客页面里最常踩坑的就是图片路径。关于图片，你必须先弄清楚相对路径和绝对路径的区别。https://example.com/images/a.jpg是绝对路径，指向网络上的固定地址；images/a.jpg是相对路径，相对于当前HTML文件所在的目录来定位资源。
我的文件结构是：
my-blog/ ├── index.html └── images/ └── avatar.jpg那么在index.html里引用头像就应该写src="images/avatar.jpg"。如果index.html和images目录不在同一层级，路径就要跟着调整。还有两个非常容易忽略的细节：文件名的大小写要跟实际文件保持一致，我把图片改成Avatar.jpg后引用路径还是avatar.jpg，在Windows本地看可能正常，部署到线上是Linux服务器时就会404；路径分隔符统一用正斜杠/，不要用Windows资源管理器里的反斜杠\。
5. 常见问题与排查技巧实录
5.1 中文乱码：绝大多数是编码问题
页面里显示“å°æž—çš„”这类乱码字符，几乎都是<meta charset="utf-8">这一行出了问题。要么编码声明没写，要么文件被存成了非UTF-8编码，比如系统默认的ANSI或GB2312。VS Code右下角可以查看和修改文件编码，确保是UTF-8。还有一种情况是编辑器里看正常，浏览器里乱码，这种往往是浏览器自动识别编码失败，可以手动在浏览器菜单里切换编码试试。
我建议你新建HTML文件时，第一件事就是写上<!DOCTYPE html>和<meta charset="utf-8">这两行，再开始写内容，养成习惯后基本不会乱码。
5.2 图片和链接打不开：路径问题要按图索骥
这是纯HTML页面里出现频率最高的问题。点链接没反应，先看href指向的文件是否存在，以及相对于当前页面目录的位置是否正确。图片不显示，按F12打开开发者工具，切到Network面板看图片请求是不是404，是404就说明路径不对；如果显示200但图片不显示，可能是文件名大小写问题或者图片文件本身损坏。
排查路径问题我有一个笨但有效的方法：从index.html所在目录出发，一层一层按相对路径推算。比如当前文件在my-blog/index.html，图片在my-blog/images/avatar.jpg，那么从当前文件出发，要先进入images目录再找到avatar.jpg，所以路径就是images/avatar.jpg。
5.3 页面样式混乱：先查闭合标签
纯HTML页面经常出现这种情况：某一段文字突然变斜体、后面的内容都缩进错了、列表全粘在一起。十次有九次都是标签没闭合。浏览器解析HTML时有一套容错机制，不会因为漏写了</div>或</p>就报错，它会自己猜结构，猜错就会渲染出奇怪效果。
排查时我会从上往下逐段看，重点检查有没有成对的标签，比如<ul>必须有</ul>，<article>必须有</article>，<a>必须有</a>。也可以用VS Code的格式化功能，缩进错乱的地方通常就是标签结构出错的地方。实在找不到问题时，可以每次注释掉一个区块，刷新页面看故障是否消失，用二分法快速定位问题区域。
5.4 手机打开页面字太小：缺少viewport声明
很多人在电脑上打开页面很正常，一发到手机就发现字小得看不清，要手动放大。原因几乎都是<head>里少了viewport元信息。加上这行后，页面会按设备宽度进行布局：
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width表示页面宽度跟随设备屏幕宽度，initial-scale=1.0表示初始缩放比例为1。这是移动端适配的基础，建议所有页面默认都带上，连纯HTML页面也不例外。不过要提醒你，就算加上这行，纯HTML布局在手机上也是从上到下纵向排列，文章和侧边栏会排得很长，需要后续配合CSS才能做出真正的双栏响应式布局。
5.5 纯HTML页面的后续扩展方向
如果你把上面的内容都实践了一遍，很有可能会觉得页面太简陋。这是正常反应，接下来往这几个方向扩展就行。
第一是加CSS文件。把<style>里的内容搬到独立的style.css文件，然后在<head>里加一行<link rel="stylesheet" href="style.css">，整个页面就能拥有统一的样式定义，想怎么美化都行，这是纯HTML阶段完成后最自然的下一步。
第二是用JavaScript增强交互。比如把“阅读全文”改成点击展开全文，给导航加一个移动端汉堡菜单，给文章列表做分页。学习顺序建议还是HTML → CSS → JavaScript，基础结构没走稳之前不要硬上框架。
第三是接入轻量级模板，比如把文章内容用Markdown写好再转换为HTML，或者直接尝试静态站点生成器。但这个选项明显比纯HTML复杂得多，适合你已经积累了一批文章之后再考虑。
5.6 常用标签与属性速查表
我把这个项目里反复出现的常用标签整理成一个表格，方便你对照查阅：
| 标签 | 语义 | 典型用途 | 常用属性 |
|---|---|---|---|
<header> | 页面头部 | 站点标题、副标题 | 无 |
<nav> | 导航区 | 菜单链接列表 | 无 |
<main> | 主体内容 | 文章列表区域 | 无 |
<article> | 独立内容块 | 单篇文章 | id |
<section> | 内容分块 | 侧边栏每个分区 | 无 |
<aside> | 辅助信息 | 侧边栏整体 | 无 |
<footer> | 页脚 | 版权信息 | 无 |
<h1>~<h6> | 标题层级 | 标题与小节标题 | 无 |
<p> | 段落 | 正文段落 | 无 |
<a> | 超链接 | 导航、阅读全文、邮箱链接 | href、id配合锚点 |
<img> | 图片 | 头像、配图 | src、alt、width、height |
<ul>、<li> | 无序列表 | 菜单项、标签列表 | 无 |
<time> | 时间 | 发布日期 | datetime |
<form>、<input>、<button> | 表单交互 | 搜索框、订阅 | type、placeholder |
这张表不是让你背，而是写页面时参考。每用完一个标签，你可以在旁边写一行注释说明它的作用，这样既复习了语义，也方便后期维护。
最后分享一点我的个人习惯
我最初学HTML时总觉得纯标签太low，非要马上套上各种框架。实践多了才体会到，一个人能把纯HTML的结构写得有条不紊，比会背十个框架更有用。做个人博客页面这件事，真正的价值不在于页面看起来多花哨，而在于你亲手把控了从内容结构到信息分层的全过程。这套纯HTML代码我建议你放在手边，以后写任何静态页面，都可以拿它当起点，需要样式加CSS，需要交互加JavaScript，需要动态数据再引入工具链。它就像一个朴素但可靠的毛坯房，后续想怎么装修都看你自己的需求和审美。别忘了经常按下F12看看元素结构，那里面呈现的，正是你写下的每一行标签带来的布局结果。
