高压电工复审考点解析：从电气原理到安全操作要点
2026/9/18 10:01:15
上个月帮一位朋友搭个人博客页面，对方给的限制很干脆：只能用纯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 + article | main表示页面主体，article表示独立成篇的内容 |
| 侧边栏信息 | aside | 和主体内容相关的辅助区域 |
| 底部版权 | footer | 页脚，放版权和附加导航 |
| 页面内独立内容块 | section | 给aside里的分类、友链做分组 |
很多人喜欢所有东西都用div搞定，因为div什么都能装，写起来省事。但这会带来两个问题：一是别人读你的代码时很难快速理解层级关系；二是搜索引擎抓取时，无法判断哪里是正文、哪里是导航。用语义化标签之后，页面就算没有任何视觉样式，文档结构也是清晰的。
2.3 html根标签、head区的基础配置
接下来是每个页面都少不了的基础配置，这部分看起来简单，但坑也不少。
文档第一行必须写<!DOCTYPE html>，它告诉浏览器“请按现代标准模式解析这个页面”。如果漏掉，浏览器会进入怪异模式，盒模型的计算方式都会变化，页面显示就不可控了。<html lang="zh-CN">声明页面语言是简体中文，方便浏览器和翻译工具正确处理。<meta charset="UTF-8">控制字符编码，少了它中文就可能显示成乱码，这是新手最容易踩的坑之一。
<meta name="viewport" content="width=device-width, initial-scale=1.0">也很关键，它让页面在手机浏览器上按设备宽度渲染，而不是按桌面宽度缩小显示。一个支持移动端阅读的博客页面，这个标签不能省。最后是<title>，它决定浏览器标签页上显示的文字，也是搜索引擎结果里的标题，每页最好都不一样。
3. 头部导航与文章列表：首页核心信息区怎么写
3.1 header里放什么
header是访客第一眼看到的区域，通常包含博客名称、一句说明文字、导航链接。结构上，我会在header内部放一个h1作为站点主标题，因为一个页面最好只有一个h1，它代表整页的主题。博客名称用h1，文章标题用h2，这样层级才清楚。
导航部分用nav标签包裹，里面是最常见的链接列表。虽然是纯HTML，但我们仍然可以用简单的锚点链接让导航可用：href="#articles"表示点击后滚动到页面里id="articles"的那个元素。这种纯原生的跳转方式在单页博客里非常实用。
<header> <h1>行舟日志</h1> <p>记录技术、生活与一些零碎思考</p> <nav> <a href="#articles">文章</a> <a href="#about">关于</a> <a href="#links">友链</a> <a href="#top">返回顶部</a> </nav> </header>注意导航的链接不要用“#”占位，那会让人点击后跳到页面顶部，造成困惑。如果某个链接是外部地址，直接用href="https://example.com"即可。
3.2 文章列表的HTML结构
文章列表是博客首页的核心。每一篇文章都是一个独立的article标签，这样即使没有任何CSS，每篇文章的内容在文档流里也是板块分明的。article里面再放文章标题、元信息、摘要和阅读全文链接。
文章标题我推荐用h2，因为在站点h1之下，文章标题正好是第二层级，语义正确。如果你写了多篇文章，多个h2是允许的，它们代表了文章的并列关系。
<article> <h2>用 HTML 写博客的第一周</h2> <p class="meta"> <time datetime="2025-01-12">2025年1月12日</time> · 分类：随笔 · 阅读量：128 </p> <p> 以前总觉得写博客必须用框架，直到这个星期我尝试用纯 HTML 搭建自己的页面，才发现最朴素的方式反而让人更专注于内容本身…… </p> <p><a 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 id="about"> <h3>关于我</h3> <p>一个喜欢折腾前端技术的开发者，目前专注于 Web 基础架构。</p> </section> <section> <h3>文章分类</h3> <ul> <li><a href="#">前端开发</a></li> <li><a href="#">生活随笔</a></li> <li><a href="#">读书笔记</a></li> </ul> </section> </aside>分类列表用ul加li组织是最自然的，它本质上就是一个无序列表。不要用div强行拼出“一个接一个的块”，列表标签在语义和阅读体验上都更合适。
4.2 用details/summary实现折叠
纯HTML页面不能写JavaScript，但很多交互需求其实有原生的HTML方案。折叠面板就是最典型的一个，details配合summary可以在没有任何JS的情况下实现“点击展开/收起”的效果，这个标签支持度已经很好了，现代浏览器都能正常使用。
我经常用它来放标签云、历史文章这类“平时不需要全部显示”的信息：
<details> <summary>标签列表（点击展开）</summary> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">前端工程化</a></li> </ul> </details>打开页面时，summary里的内容默认显示，后面的内容折叠起来；点击后展开，再点收起。这种“纯HTML交互”往往被忽略，但它确实解决了实际问题。
4.3 footer与address
footer用来放页脚的版权信息、备案信息、联系方式等。站点版权信息可以用HTML实体©表示©符号，这样不会因为编码问题显示成乱码。如果页脚里有联系地址，还可以用address标签包裹，这是专门为联系方式设计的语义标签，很多新手都不知道它的存在。
<footer> <address> 联系邮箱：hello@example.com </address> <p>© 2025 行舟日志 · 用纯 HTML 手工打造</p> <p><a href="#top">返回顶部</a></p> </footer>footer里的“返回顶部”链接，href指向#top，只要body或页面根元素设置了id="top"，点击就能回到页面顶部。这是最古老的锚点用法，但在单页场景下依然好用。我一般把id="top"放在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左右排列，再给文章之间的分隔线做个浅色。
内联样式可以用，但要有节制。它适合那些只出现一次的调整，比如某篇文章需要特殊缩进，用style="text-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 action="https://www.bing.com/search" method="get" target="_blank"> <input type="search" name="q" placeholder="搜索文章..."> <button type="submit">搜索</button> </form>这样访客输入关键词点搜索，会跳转到必应以“站内关键字”为条件搜索。虽然不是严格意义的站内搜索，但胜在能用，不需要任何后端代码。
5.4 字符实体与注释规范
纯HTML页面里，某些字符会被浏览器当作代码解析，这时候就需要用字符实体（entity）。最常用的几个：<表示小于号，>表示大于号，&表示和号， 表示不换行空格，©表示版权符号。比如文章里要展示<html>这个单词，直接写会被浏览器当成标签，必须写成<html>。
注释也很重要。任何一段时间之后你再回来看自己的HTML，都会惊讶于自己忘记了多少当时的设计思路。养成在主要区块开头加注释的习惯，比如<!-- 文章列表开始 -->，不仅方便自己维护，也给阅读你代码的人提供了路标。但注意注释不要写得过密，三五行的量级内每个大块一个就够了。
6. 一套可以复制直接用的完整页面源码与验证方法
6.1 完整页面代码
下面是我把前面所有讨论整合后的完整版本，你可以直接复制保存成blog.html，浏览器打开就能看效果。整个文件只有纯HTML和一个内嵌style块，没有加载任何外部资源，符合“纯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> <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 id="top"> <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 class="container"> <main id="articles"> <article> <h2>用 HTML 写博客的第一周</h2> <p class="meta"><time datetime="2025-01-12">2025年1月12日</time> · 分类：随笔 · 阅读量：128</p> <p>以前总觉得写博客必须用框架，直到这个星期我尝试用纯 HTML 搭建自己的页面，才发现最朴素的方式反而让人更专注于内容本身。标签之间的嵌套关系，其实就是你对内容结构的理解。</p> <p><a href="#">阅读全文</a></p> </article> <article> <h2>语义化标签到底在解决什么问题</h2> <p class="meta"><time datetime="2025-01-05">2025年1月5日</time> · 分类：前端开发 · 阅读量：96</p> <p>div 用多了，页面就成了一个没有方向的容器。语义化标签的意义在于让结构自己会说话：哪块是导航，哪块是正文，哪块是辅助信息，看代码就知道。</p> <p><a href="#">阅读全文</a></p> </article> <article> <h2>没有 JavaScript 也能做的三个交互</h2> <p class="meta"><time datetime="2024-12-28">2024年12月28日</time> · 分类：前端开发 · 阅读量：142</p> <p>锚点跳转、details 折叠、表单提交，这三个交互在纯 HTML 条件下就能跑起来。很多时候我们不是缺少工具，而是缺少对原生能力的了解。</p> <p><a href="#">阅读全文</a></p> </article> </main> <aside> <section id="about"> <h3>关于我</h3> <p>一个喜欢折腾前端技术的开发者，目前专注于 Web 基础架构与前端工程化。</p> </section> <section> <h3>文章分类</h3> <ul> <li><a href="#">前端开发</a></li> <li><a href="#">生活随笔</a></li> <li><a href="#">读书笔记</a></li> </ul> </section> <section> <h3>搜索</h3> <form action="https://www.bing.com/search" method="get" target="_blank"> <input type="search" name="q" placeholder="搜索文章..."> <button type="submit">搜索</button> </form> </section> <section id="links"> <h3>友情链接</h3> <ul> <li><a href="#">阮一峰的网络日志</a></li> <li><a href="#">MDN Web Docs</a></li> <li><a href="#">CSS-Tricks</a></li> </ul> </section> <details> <summary>标签列表（点击展开）</summary> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">前端工程化</a></li> </ul> </details> </aside> </div> <footer> <p>© 2025 行舟日志 · 用纯 HTML 手工打造</p> <p><a href="#top">返回顶部</a></p> </footer> </body> </html>这段代码在桌面浏览器和手机浏览器上都能正常打开，结构清楚，样式朴素但不难看。你可以替换标题、文章内容、个人介绍、友链地址，把它变成你自己的页面。
6.2 验证与调试步骤
页面写完怎么确认没有结构性错误？我最常用的验证手段就三招。
第一招，浏览器直接打开。这是最直观的验证，看排版是否正常、锚点跳转是否准确、details能否展开收起。第二招，右键菜单选择“查看页面源代码”，检查是否有未闭合的标签。这一步值得慢慢练，因为很多结构问题是肉眼扫一遍代码看不出来的，但浏览器解析后的结果会暴露出明显的嵌套错乱。第三招，把HTML代码复制到W3C官方校验工具里，它会帮你检查标签嵌套、属性书写、元素使用是否符合标准。
遇到中文乱码时，第一时间看head里是否写了meta charset="UTF-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交互，都会顺畅得多。