上个月帮一位朋友搭个人博客页面对方给的限制很干脆只能用纯HTML代码不放任何外部CSS和JS文件。当时我愣了一下想着现在随便一个静态站点生成器都能几分钟出整套页面为什么还要退回纯HTML手写但真正动手之后我反而找回了刚学前端时那种“每一行标签都自己掌控”的感觉也重新意识到一个被很多人忽略的事实——HTML本身能做的事情比新手想象的多得多。这篇东西就写给那些想用纯HTML代码做个人博客页面的人。不管你是刚学HTML的学生、想在单位内网放一份单文件说明页的开发还是单纯想理解网页骨架本质的爱好者这篇都能给你一套可以落地的方案。我会把页面布局、语义化标签选择、没有CSS和JS情况下的美化技巧、完整的可运行源码全部讲清楚全程只用一个 .html 文件。1. 为什么还要用纯HTML写个人博客页面1.1 单文件交付的场景比你想的更常见很多人一听到“做网页”就默认要上React、Vue、Webpack但真实世界里有一大堆场景根本不需要这些重型工具。我那位朋友的情况就很典型他在的内网环境不允许上传任意文件只开放了一个HTML文件的上传入口所有外部样式表和脚本都会被安全策略挡掉。这时候一个把结构和样式全部内聚在单个文件里的HTML页面是唯一能跑通的方式。类似的场景还有很多给人发一份带样式的图文说明直接发.html文件比发Word更轻便在线代码分享平台里贴一段可运行的页面课程作业要求“只用HTML完成一个页面”老师就是要考察你对标签本身的理解。在这些场景下纯HTML不是技术倒退而是最合适的选择。1.2 “纯HTML”到底能不能带样式先说清楚边界。严格意义上纯HTML代码指的是单一 .html 文件不依赖外部 .css 文件和 .js 文件。在这个前提下页面内部写style标签和内联样式是允许的因为这些样式规则仍然写在HTML文件里双击打开就能运行不需要额外加载任何资源。我见过有人为了“纯粹”连一个style标签都不用结果页面默认字体、白底黑字连基本的留白都没有。这没必要。CSS本身就是HTML的天然组成部分在 head 里放一个简短的style块既不违背单文件约束又能让结构更清晰属于合理使用。1.3 技术选型不是越新越好做技术选型时最忌讳“只选贵的不选对的”。纯HTML博客页面的核心优势有三条加载快得几乎没有感知、不会被依赖包版本问题困扰、任何人用记事本打开都能看懂原理。缺点是动态交互能力弱、维护大量页面时重复代码多。所以它最适合的场景是个人主页、单页说明、课程作业、原型草稿这类内容更新频率低、交互需求简单的项目。如果你已经能熟练使用各类前端框架偶尔回头写一次纯HTML页面反而是一种很好的基本功检验。页面写不写得清楚往往能看出一个人对HTML语义、文档流、嵌套结构的理解深浅。这也是我建议所有新手先别急着碰框架的原因——骨架没立好再好看的装修也是虚的。2. 动手前先规划博客页面的模块划分与语义化标签选择2.1 先列出页面要展示的内容清单写HTML最怕的就是一上来就开标签写到哪里算哪里。正确做法是先把自己真正要展示的内容列一个清单再考虑怎么用标签去组织它们。我会反复建议读者养成这个习惯因为它能省下大量改结构的时间。一个典型的个人博客首页内容通常包括这几块网站名称和一句简介导航链接首页、文章、关于、友链最新文章列表每篇包含标题、发布时间、分类、摘要、阅读全文链接侧边栏的个人介绍、文章分类、友情链接页脚的版权信息和返回顶部入口。把这些内容写在一张纸上你再看它们页面结构就自然浮现了顶部是header中间核心区是main加aside底部是footer。2.2 语义化标签怎么选纯HTML页面最大的优势不是“能显示”而是“显示得有意义”。现代HTML提供了一整套语义化标签它们的作用是让浏览器、搜索引擎、屏幕阅读器都能理解页面每个区域在讲什么。在小博客页面里我推荐这样分配内容区域推荐标签理由站点标题和简介header页头区域放logo和站点信息导航菜单nav明确告诉浏览器“这是导航链接”文章列表main articlemain表示页面主体article表示独立成篇的内容侧边栏信息aside和主体内容相关的辅助区域底部版权footer页脚放版权和附加导航页面内独立内容块section给aside里的分类、友链做分组很多人喜欢所有东西都用div搞定因为div什么都能装写起来省事。但这会带来两个问题一是别人读你的代码时很难快速理解层级关系二是搜索引擎抓取时无法判断哪里是正文、哪里是导航。用语义化标签之后页面就算没有任何视觉样式文档结构也是清晰的。2.3 html根标签、head区的基础配置接下来是每个页面都少不了的基础配置这部分看起来简单但坑也不少。文档第一行必须写!DOCTYPE html它告诉浏览器“请按现代标准模式解析这个页面”。如果漏掉浏览器会进入怪异模式盒模型的计算方式都会变化页面显示就不可控了。html langzh-CN声明页面语言是简体中文方便浏览器和翻译工具正确处理。meta charsetUTF-8控制字符编码少了它中文就可能显示成乱码这是新手最容易踩的坑之一。meta nameviewport contentwidthdevice-width, initial-scale1.0也很关键它让页面在手机浏览器上按设备宽度渲染而不是按桌面宽度缩小显示。一个支持移动端阅读的博客页面这个标签不能省。最后是title它决定浏览器标签页上显示的文字也是搜索引擎结果里的标题每页最好都不一样。3. 头部导航与文章列表首页核心信息区怎么写3.1 header里放什么header是访客第一眼看到的区域通常包含博客名称、一句说明文字、导航链接。结构上我会在header内部放一个h1作为站点主标题因为一个页面最好只有一个h1它代表整页的主题。博客名称用h1文章标题用h2这样层级才清楚。导航部分用nav标签包裹里面是最常见的链接列表。虽然是纯HTML但我们仍然可以用简单的锚点链接让导航可用href#articles表示点击后滚动到页面里idarticles的那个元素。这种纯原生的跳转方式在单页博客里非常实用。header h1行舟日志/h1 p记录技术、生活与一些零碎思考/p nav a href#articles文章/a a href#about关于/a a href#links友链/a a href#top返回顶部/a /nav /header注意导航的链接不要用“#”占位那会让人点击后跳到页面顶部造成困惑。如果某个链接是外部地址直接用hrefhttps://example.com即可。3.2 文章列表的HTML结构文章列表是博客首页的核心。每一篇文章都是一个独立的article标签这样即使没有任何CSS每篇文章的内容在文档流里也是板块分明的。article里面再放文章标题、元信息、摘要和阅读全文链接。文章标题我推荐用h2因为在站点h1之下文章标题正好是第二层级语义正确。如果你写了多篇文章多个h2是允许的它们代表了文章的并列关系。article h2用 HTML 写博客的第一周/h2 p classmeta time datetime2025-01-122025年1月12日/time · 分类随笔 · 阅读量128 /p p 以前总觉得写博客必须用框架直到这个星期我尝试用纯 HTML 搭建自己的页面才发现最朴素的方式反而让人更专注于内容本身…… /p pa href#阅读全文/a/p /article这里有个细节值得说道摘要文字不要截断得没头没尾最好控制在三到五句话以内让首页既能预览内容又不至于太长。阅读全文链接如果暂时没有对应的详情页href可以先写#但页面正式上线前一定要换成真实地址。3.3 时间、分类、阅读量这些元信息的写法文章标题下方的发布时间、分类、阅读量统称为元信息。纯HTML里没有专门的“元信息”标签但我们可以使用time标签和纯文本的组合来组织。time标签的正确用法是双重的标签内部写给人看的中文日期datetime属性里写机器可读的标准日期格式是YYYY-MM-DD。这样做的好处是搜索引擎和浏览器插件能准确识别发布时间有些浏览器还可以在阅读器模式里利用这个信息排序文章。分类和阅读量用纯文本表示就足够了前面加一个“分类”这样的说明文字再配合CSS做视觉弱化就已经非常清楚。不要为了好看去用一些无意义的嵌套标签纯HTML页面最忌讳结构臃肿。如果你有文章分类页分类文字可以用a标签包起来指向对应的分类视图没有的话就保持纯文本。4. 侧边栏、页脚与信息补充把博客的“边角料”处理好4.1 aside侧边栏适合放什么aside是个很灵活的标签它用来放一些和主体内容相关、但从文档流上可以独立出来的信息。典型内容包括博主个人简介、文章分类列表、热门文章、标签云、友链。在布局上它通常排在main旁边但在HTML文档流里先写main还是先写aside没有严格的强制要求我习惯先写main主体优先让没有CSS的纯文本状态下读者先看到正文。侧边栏内部每一个独立的信息块用section包裹并用h3作为小标题这是一个很完整的语义结构aside section idabout h3关于我/h3 p一个喜欢折腾前端技术的开发者目前专注于 Web 基础架构。/p /section section h3文章分类/h3 ul lia href#前端开发/a/li lia href#生活随笔/a/li lia href#读书笔记/a/li /ul /section /aside分类列表用ul加li组织是最自然的它本质上就是一个无序列表。不要用div强行拼出“一个接一个的块”列表标签在语义和阅读体验上都更合适。4.2 用details/summary实现折叠纯HTML页面不能写JavaScript但很多交互需求其实有原生的HTML方案。折叠面板就是最典型的一个details配合summary可以在没有任何JS的情况下实现“点击展开/收起”的效果这个标签支持度已经很好了现代浏览器都能正常使用。我经常用它来放标签云、历史文章这类“平时不需要全部显示”的信息details summary标签列表点击展开/summary ul lia href#HTML/a/li lia href#CSS/a/li lia href#前端工程化/a/li /ul /details打开页面时summary里的内容默认显示后面的内容折叠起来点击后展开再点收起。这种“纯HTML交互”往往被忽略但它确实解决了实际问题。4.3 footer与addressfooter用来放页脚的版权信息、备案信息、联系方式等。站点版权信息可以用HTML实体copy;表示©符号这样不会因为编码问题显示成乱码。如果页脚里有联系地址还可以用address标签包裹这是专门为联系方式设计的语义标签很多新手都不知道它的存在。footer address 联系邮箱helloexample.com /address pcopy; 2025 行舟日志 · 用纯 HTML 手工打造/p pa href#top返回顶部/a/p /footerfooter里的“返回顶部”链接href指向#top只要body或页面根元素设置了idtop点击就能回到页面顶部。这是最古老的锚点用法但在单页场景下依然好用。我一般把idtop放在body标签上。5. 不加CSS和JS页面怎么才能不显得简陋5.1 用锚点做出“能用的导航”前面已经提到锚点跳转这里展开讲讲。单页博客里锚点链接是最值得优先使用的功能因为博客首页内容较长访客需要快速跳转到不同板块。做法分成两步给目标区域加id然后写href#id的链接。id的命名要见名知意比如主力区块用#articles关于我区域用#about友链用#links。不要用#left、#content1这种和内容无关的名字后期维护会非常痛苦。id还有一个限制同一个页面里id不能重复写代码时注意检查。5.2 style块与内联样式的分寸没有外部CSS文件不代表页面只能维持浏览器默认样式。在head里放一个简洁的style块把字体、间距、布局、配色统一管理是纯HTML页面提升质感的关键一步。我会设置body的默认字体和行高用flex让main和aside左右排列再给文章之间的分隔线做个浅色。内联样式可以用但要有节制。它适合那些只出现一次的调整比如某篇文章需要特殊缩进用styletext-indent: 2em;就够了但如果每个文章标题都要加颜色就必须写进style块统一控制否则代码会变成一锅粥。一个我常用的基础style块大概长这样body { font-family: Microsoft YaHei, PingFang SC, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; line-height: 1.7; color: #333; } .container { display: flex; gap: 24px; } main { flex: 3; } aside { flex: 1; }这里的flex布局让侧边栏固定在右侧且宽度比例为主体的三分之一。这个设定来源于内容阅读经验正文区域占版面约75%时阅读最舒适侧边栏承担辅助信息的角色不需要太宽。5.3 表单和搜索框博客页面上放一个搜索框是常见需求。纯HTML里表单可以正常写只是没有服务端或JS时提交没有实际效果。那还能不能放我的做法是如果只是教学演示或原型可以写form结构并设置action指向某个搜索接口比如百度搜索或站内搜索服务让表单真正“能提交”如果暂时没有后端可以用input加一个搜索按钮作为视觉占位。一个干净的搜索框结构form actionhttps://www.bing.com/search methodget target_blank input typesearch nameq placeholder搜索文章... button typesubmit搜索/button /form这样访客输入关键词点搜索会跳转到必应以“站内关键字”为条件搜索。虽然不是严格意义的站内搜索但胜在能用不需要任何后端代码。5.4 字符实体与注释规范纯HTML页面里某些字符会被浏览器当作代码解析这时候就需要用字符实体entity。最常用的几个lt;表示小于号gt;表示大于号amp;表示和号nbsp;表示不换行空格copy;表示版权符号。比如文章里要展示html这个单词直接写会被浏览器当成标签必须写成lt;htmlgt;。注释也很重要。任何一段时间之后你再回来看自己的HTML都会惊讶于自己忘记了多少当时的设计思路。养成在主要区块开头加注释的习惯比如!-- 文章列表开始 --不仅方便自己维护也给阅读你代码的人提供了路标。但注意注释不要写得过密三五行的量级内每个大块一个就够了。6. 一套可以复制直接用的完整页面源码与验证方法6.1 完整页面代码下面是我把前面所有讨论整合后的完整版本你可以直接复制保存成blog.html浏览器打开就能看效果。整个文件只有纯HTML和一个内嵌style块没有加载任何外部资源符合“纯HTML代码”的约束。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title行舟日志 - 记录技术、生活与思考/title style body { font-family: Microsoft YaHei, PingFang SC, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; line-height: 1.7; color: #333; } header { border-bottom: 2px solid #e5e5e5; padding-bottom: 10px; margin-bottom: 20px; } nav a { margin-right: 15px; text-decoration: none; color: #2563eb; } .container { display: flex; gap: 24px; } main { flex: 3; } article { border-bottom: 1px solid #eee; padding: 15px 0; } .meta { color: #888; font-size: 14px; } aside { flex: 1; background: #f9fafb; padding: 16px; border-radius: 8px; align-self: flex-start; } aside section { margin-bottom: 20px; } footer { border-top: 1px solid #e5e5e5; margin-top: 30px; padding-top: 12px; text-align: center; color: #777; font-size: 14px; } /style /head body idtop header h1行舟日志/h1 p记录技术、生活与一些零碎思考用纯 HTML 手工打造。/p nav a href#articles文章/a a href#about关于/a a href#links友链/a a href#top返回顶部/a /nav /header div classcontainer main idarticles article h2用 HTML 写博客的第一周/h2 p classmetatime datetime2025-01-122025年1月12日/time · 分类随笔 · 阅读量128/p p以前总觉得写博客必须用框架直到这个星期我尝试用纯 HTML 搭建自己的页面才发现最朴素的方式反而让人更专注于内容本身。标签之间的嵌套关系其实就是你对内容结构的理解。/p pa href#阅读全文/a/p /article article h2语义化标签到底在解决什么问题/h2 p classmetatime datetime2025-01-052025年1月5日/time · 分类前端开发 · 阅读量96/p pdiv 用多了页面就成了一个没有方向的容器。语义化标签的意义在于让结构自己会说话哪块是导航哪块是正文哪块是辅助信息看代码就知道。/p pa href#阅读全文/a/p /article article h2没有 JavaScript 也能做的三个交互/h2 p classmetatime datetime2024-12-282024年12月28日/time · 分类前端开发 · 阅读量142/p p锚点跳转、details 折叠、表单提交这三个交互在纯 HTML 条件下就能跑起来。很多时候我们不是缺少工具而是缺少对原生能力的了解。/p pa href#阅读全文/a/p /article /main aside section idabout h3关于我/h3 p一个喜欢折腾前端技术的开发者目前专注于 Web 基础架构与前端工程化。/p /section section h3文章分类/h3 ul lia href#前端开发/a/li lia href#生活随笔/a/li lia href#读书笔记/a/li /ul /section section h3搜索/h3 form actionhttps://www.bing.com/search methodget target_blank input typesearch nameq placeholder搜索文章... button typesubmit搜索/button /form /section section idlinks h3友情链接/h3 ul lia href#阮一峰的网络日志/a/li lia href#MDN Web Docs/a/li lia href#CSS-Tricks/a/li /ul /section details summary标签列表点击展开/summary ul lia href#HTML/a/li lia href#CSS/a/li lia href#前端工程化/a/li /ul /details /aside /div footer pcopy; 2025 行舟日志 · 用纯 HTML 手工打造/p pa href#top返回顶部/a/p /footer /body /html这段代码在桌面浏览器和手机浏览器上都能正常打开结构清楚样式朴素但不难看。你可以替换标题、文章内容、个人介绍、友链地址把它变成你自己的页面。6.2 验证与调试步骤页面写完怎么确认没有结构性错误我最常用的验证手段就三招。第一招浏览器直接打开。这是最直观的验证看排版是否正常、锚点跳转是否准确、details能否展开收起。第二招右键菜单选择“查看页面源代码”检查是否有未闭合的标签。这一步值得慢慢练因为很多结构问题是肉眼扫一遍代码看不出来的但浏览器解析后的结果会暴露出明显的嵌套错乱。第三招把HTML代码复制到W3C官方校验工具里它会帮你检查标签嵌套、属性书写、元素使用是否符合标准。遇到中文乱码时第一时间看head里是否写了meta charsetUTF-8再看文件本身保存时是否选择了UTF-8编码。很多编辑器默认是GBK编码两者不一致就会乱码。6.3 常见问题排查新手在纯HTML博客页面里最常遇到几类问题这里一次说清。锚点跳转不生效先检查目标元素上是否写了id再检查链接是否写的#id注意id区分大小写。页面出现顶部空白body或容器有默认margin我的示例里用margin: 0 auto一并处理了。侧边栏没有并排显示说明flex相关样式没生效检查.container是否写成了display: flex以及main和aside是否都在这个容器里。图片显示不出来图片路径不能用C:\xxx这种本机绝对路径要用相对路径比如images/me.jpg表示当前目录下images文件夹里的图片。如果是外链图片直接用完整URL。这些坑我几乎每次手写HTML都会遇到一遍排查顺序永远优先检查标签闭合、再检查属性值、最后检查路径和编码基本能解决九成问题。最后说点个人体会。完成这个纯HTML博客页面之后我最大的感受是写代码的幸福感有时候恰恰来自克制。用纯HTML不是倒退而是逼着你在有限的工具里做出清晰、有序、可理解的东西。当你不再依赖框架帮你兜底时你才能真正理解浏览器是怎么看待你写的每一行标签的。把这份手感练出来后面学CSS布局、学JavaScript交互都会顺畅得多。