HTML作品集

html-resume-template — HTML 作品集模板

作者 Tombarr

面向软件工程师与 Web 开发者的单页简历模板，使用 HTML、CSS 和 JS 构建，可在浏览器中直接编辑并导出为 PDF。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

整页通过 document.designMode 变为可编辑，修改内容自动保存在浏览器本地

支持 Command/CTRL + B/I 加粗斜体，Shift + Enter 插入换行，Enter 在末尾追加列表项

HTML 与 CSS 均可直接修改，可自行替换整体布局和视觉风格

依赖以 CDN 链接引入 normalize.css、Google Fonts 和 Font Awesome，无需包管理器或构建工具

不向服务器发送或同步数据，全部数据保存在本地 localStorage

模板详细介绍

这是一个单页简历模板，用 HTML、CSS 和 JavaScript 写成，页面既可以在浏览器中查看，也可以导出为 PDF。模板面向软件工程师和 Web 开发者，作者本人也属于这一群体。

编辑方式是该模板的主要特点：整页通过 document.designMode 标记为可编辑，修改内容会自动保存在浏览器本地。在多数浏览器中可用 Command/CTRL + B/I 加粗或斜体；Shift + Enter 在当前元素内插入 <br>，Enter 的行为与上下文相关，在最后一个字符后按下可追加列表项。

布局与样式可直接改 HTML 和 CSS，类似 CSS Zen Garden 的做法，可自行替换整体版式与视觉风格。依赖以 CDN 链接方式引入，包括 normalize.css、Google Fonts 字体和 Font Awesome 图标，不需要包管理器或构建工具。

兼容性方面，作者在 macOS（10.13.5）的 Chrome（67）和 Firefox（61）上做过测试，使用了 localStorage、template、flexbox 和自定义属性，面向现代浏览器。应用不与服务器通信或同步，数据保存在本地；若 localStorage 被禁用，可能无法保存。README 的 TODO 中列出尚未完成的事项：保存成功或出错时缺少反馈、保存的 HTML 文件名不可自定义、尚未支持 Prince。

HTML作品集

适合你的项目吗？

适用场景

软件工程师或 Web 开发者制作个人在线简历
在浏览器中直接修改简历内容并即时查看效果
将简历页面导出为 PDF 用于投递或打印
以现有 HTML/CSS 为基础替换版式，定制个人风格的简历页面

适合人群

需要单页简历并希望直接在浏览器中编辑的软件工程师
熟悉 HTML 和 CSS、希望自行调整布局与样式的 Web 开发者
偏好无构建工具、以 CDN 引入依赖的静态页面作者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
无需包管理器或构建工具，依赖以 CDN 链接形式引入
2
使用 localStorage、template、flexbox 和自定义属性，面向现代浏览器
3
若浏览器禁用 localStorage，编辑内容可能无法保存
4
README 的 TODO 中说明：保存成功或出错时暂无反馈，保存的 HTML 文件名不可自定义，尚未支持 Prince
5
项目采用 Apache-2.0 许可，分发时需随附许可证并保留归属声明；字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 Apache-2.0 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

项目依赖以 CDN 链接引入的第三方资源：normalize.css、Google Fonts 字体与 Font Awesome 图标，这些素材各自适用其自身许可，并非 Apache-2.0；分发或商用前需分别核对并遵守其许可条款。
依赖通过 CDN 链接加载，页面运行与字体、图标显示依赖外部 CDN 服务可用；离线或 CDN 不可访问时相关资源可能无法加载。
使用 localStorage、template、flexbox 与自定义属性，仅面向现代浏览器；在旧版浏览器中可能无法正常显示或保存编辑内容。
若浏览器禁用 localStorage，浏览器内的编辑内容可能无法保存，存在数据丢失风险。
README 的 TODO 表明尚未支持 Prince 等 PDF 导出工具；若需更完善的 PDF 导出，可能需自行集成或使用第三方（可能收费）工具。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

no-charge, royalty-free, irrevocable copyright license
许可证原文

This project uses [normalize.css](https://github.com/necolas/normalize.css), fonts from [Google Fonts](https://fonts.google.com/), and icons from [Font Awesome](https://fortawesome.github.io/Font-Awesome/).
README 原文

Dependencies are managed as links to CDNs, no package managers or build tools required.
README 原文

This software uses `localStorage`, `template`, flexbox, and custom properties and is intended for modern browsers.
README 原文

It may not be able to save if `localStorage` is disabled for any reason.
README 原文

- Support [Prince](https://www.princexml.com/)
README 原文

https://github.com/Tombarr/html-resume-template/blob/master/LICENSE https://github.com/Tombarr/html-resume-template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 76 / 100
技术栈: HTML
网站类型: 作品集

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2023-11-08
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 35dc11f22838baad71c47b29be0e8535b87cfca898c8601bb9b07426f70be59d

2026-10-02T08:18:59.787Z

来源文件 / 仓库

# html-resume-template

Single-page resume template built using HTML, CSS, and JS that can be viewed on the web or exported to a PDF.
A live demo is available at [tombarr.github.io/html-resume-template](https://tombarr.github.io/html-resume-template/).

## Editing

This template has the ability to edit, and automatically save, inside the browser! The entire page is marked editable with [`document.designMode`](https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode).

The below example is from Firefox (61): adding several list items then refreshing the page.

![Inline Editing](./editing_full.gif "Inline Editing")

In most browsers, you can use `Command/CTRL + B/I` to make text bold or italic.

![Text Styling](./bold+italic.gif "Text Styling")

There are also two types of returns, `Shift + Enter`, which adds a `<br>` within the current element:

![shift + enter](./shift+enter.gif "shift + enter")

And `Enter`, which is somewhat contextual. If focused after the last character, it can be used to append list elements:

![enter](./enter.gif "enter")

## Sample

![Resume Sample](./Chrome_sample.jpg "Resume Sample")

## Flexibility

This template can be editted both in HTML and CSS. Just like with [CSS Zen Garden](http://www.csszengarden.com/), you can fully customize the layout and style to suit your needs.

## TODO

- Add feedback when page is saved (or an error occurs)
- Allow custom file names for saved HTML
- Support [Prince](https://www.princexml.com/)

## Acknowledgements

This project uses [normalize.css](https://github.com/necolas/normalize.css), fonts from [Google Fonts](https://fonts.google.com/), and icons from [Font Awesome](https://fortawesome.github.io/Font-Awesome/). Dependencies are managed as links to CDNs, no package managers or build tools required. Built by me, [Tom Barrasso](https://barrasso.me).

## Compatibility

Tested on Chrome (67) and Firefox (61) on mac OS (10.13.5).
This software uses `localStorage`, `template`, flexbox, and custom properties and is intended for modern browsers.

## Security & Privacy

This application does not communicate or sync with a server, and all data is saved locally.
It may not be able to save if `localStorage` is disabled for any reason.

反馈内容错误