使用 HTML 和 CSS 开发交互式简历

2025-05-24

使用 HTML 和 CSS 开发交互式简历

有一段时间，我曾考虑创建一个 HTML 版本的简历，使其看起来与纸质版本一模一样。

作为一名 Web 开发人员，我觉得用 HTML 文件而不是 PDF 或 Word 文档来发送简历会很酷。这样既能体现原创性，又能展现我的一些能力。

注意：虽然制作 HTML 简历可能很酷，能为招聘流程增添乐趣，但实际操作起来可能不太方便。尤其是考虑到大多数招聘网站不支持上传 HTML 格式的简历。

存在一些明显的限制和可预见的问题，但我可以解决它们：

  • 它不应该包含 JavaScript：许多浏览器在本地文件上运行时会阻止 JavaScript。如果我发送了简历，却被浏览器阻止，并显示一条令人讨厌的安全消息，那就太糟糕了。
  • 它应该可以离线工作：即使查看文档的人没有网络连接，文档仍然应该正确显示。因此无需 CDN 或在线图片或文件。
  • 它应该是独立的：我不能发送一堆图片、CSS 和 HTML 文件，因为如果其中一个文件丢失或未下载，简历看起来会很糟糕。样式和图片（如果需要，可以使用 SVG）必须内联在一个 HTML 文件中。
  • 它应该在大多数浏览器中都能正常工作：使用一个花哨的功能可能会失败甚至适得其反。它必须能在大多数现代浏览器中正常工作……包括 IE11，它在企业环境中仍然很流行。
  • 它应该对人和机器友好：它不仅应该可以通过网络访问，而且还应该易于被计算机处理和理解……即使大多数招聘网站不接受 HTML 作为上传文件的有效格式。

考虑到这一点，我开始着手编写该文件的第一个版本。

第一次尝试

用 HTML 模仿我的纸质简历相对容易，然后我更进一步，添加了一些交互性：

经典交互简历截图

交互式HTML版本的简历，绿色部分可以激活。

看起来还不错，但我已经有一份纸质版的简历了。虽然有一些交互功能，但看起来还是有点简陋，没有达到要求的全部要求。而且，我没有充分利用 HTML 和 CSS 提供的所有功能。

所以我决定超越这一点......

扩展版本

为什么要把它限制在看起来枯燥乏味的纸质版？或者（半）静态 HTML？甚至只有一个可视化版本？如果大多数简历都会被机器处理，为什么还要让它只“人性化”呢？

我开发了新版简历，这次它增添了更多花哨的功能：一种交互式体验，打印出来后看起来就像我的普通纸质简历一样。以下是演示：

为了开发这个版本，我重点关注了五个关键要素：

  1. 对设计和交互性有不同的看法。
  2. 多种样式模式（用于屏幕和打印机）。
  3. 使用语义 HTML。
  4. 元数据。
  5. 微数据。

其理念是，简历既包含展示部分（第1点和第2点），也包含数据部分（第3点、第4点和第5点）。如果简历在视觉上吸引人类读者，就更有可能引起注意。同时，简历通常由计算机处理，因此使其对机器阅读器具有吸引力也是其中很重要的一部分。

语义HTML

HTML5 的一大变化是引入了许多语义标签。开发者无需拘泥于div“或”，p而是可以使用能够传达内容含义的标签。

但我们不必只关注典型的<section>“或” <main>（你也应该用）。简历中还可以使用其他不太常见的语义标签，例如：

  • <time>：表示时间段，非常适合标记以前的工作日期或毕业日期等；或
  • <address>：需要指出的是，这不是用于实际地址，而是与最近<article>或相关的人的联系信息<body>，它可以包含电子邮件、URL、Twitter 句柄……

另外，别忘了<ul>和<ol>。它们并非新的 HTML5 标签，但也很重要。一个常见的错误是将<div>或组合在一起，<section>而实际上应该是元素列表。你之前/现在的工作和认证都是列表。好好利用它们吧。

...我应该听取自己关于列表的建议，因为我在开发 HTML 简历时就犯了这个错误😬

如果说“纸质简历”注重拼写和语法，那么对于网页版简历来说，合理的内容结构也同样重要。别忘了：

  • 将内容分成几个部分。
  • 为每个部分添加标题。
  • 有一个正确的标题顺序（不要跳过标题）。
  • 在代码中留下注释。
  • 使用适当的语义标签。
  • 使其成为标准 HTML 和 CSS。
  • 考虑浏览器支持（即使这意味着放弃一些花哨的东西）。

正确构建内容结构对设计简历样式非常有帮助。但请记住：你的简历即使在纯 HTML 中（没有任何 CSS）也能看起来美观。这样，即使样式出现问题，你仍然可以获得有用的内容。

设计与互动

现在我们已经构建并构建了 HTML，是时候通过 CSS 来增添一些魔力了。我知道这听起来可能有些老套，但事实确实如此，唯一的限制就是你的想象力。

突出显示“你的”。这部分应该由你来做。我可以描述我是如何创作的，但这对你来说就不属于个人了。最终，你需要提出一个设计并应用它。

与 HTML 一样，请考虑文档的类型和目标受众：

  • 记住颜色对比度和可访问性。
  • 使用可读的字体（不要忘记常见的备用字体！）
  • 不要使用闪光颜色。
  • 不要使用可能分散注意力的动画。
  • 保持专业。

……除非你不想这么做。再说一次，这是你发挥创造力的时刻。做你觉得对的事（只要确保它能上网就行）。

对于我来说，我选择了一种相对简单的卡片样式，带有对角线切口，其中的信息根据哪个部分处于活动状态而被向上或向下推（有关更多信息，请继续阅读）。

交互性

我们没有使用任何 JavaScript，因此添加交互性将会有点挑战......但这是可行的。

诀窍在于使用视觉上隐藏的表单元素（主要是单选按钮或复选框）来保存文档状态，并跟踪每个给定时间应该显示哪些部分。然后，您可以使用标签来激活/停用输入框。

这是我以前创建CSS 游戏时用过的方法。可能需要一点时间来适应，但这对 CSS 来说是一个很好的练习，并且能帮助你学习很多关于选择器和修饰符的知识。

以下是其简化版：



<input type="radio" name="section" id="radio-section-0" checked />
<input type="radio" name="section" id="radio-section-1" />
<input type="radio" name="section" id="radio-section-2" />

<section id="section-0">
  <h2><label for="radio-section-0">Introduction</label></h2>
  <div>
    Content for the introduction.
  </div>
</section>
<section id="section-1">
  <h2><label for="radio-section-1">Previous Experience</label></h2>
  <div>
    Content for the Previous Experiences.
  </div>
</section>
<section id="section-2">
  <h2><label for="radio-section-2">Side Projects</label></h2>
  <div>
    Content for the side projects.
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode 


input {
  display: none;
}

section > div {
  display: none;
}

#radio-section-0:checked ~ #section-0 > div {
  display: block;
}

#radio-section-1:checked ~ #section-1 > div {
  display: block;
}

#radio-section-2:checked ~ #section-2 > div {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

您可以在这里看到它的工作原理（单击标题以激活每个部分）：

就我而言，我有两组单选按钮：

  • 跟踪用户所在的部分（默认为第一个）。
  • 另一个则跟踪哪个位置（在体验部分内）应该是可见的。

请记住，单选按钮组越多，页面就越复杂。

打印样式

我们有一份看起来很棒的交互式简历，但如果用户尝试打印它，效果就不太好。解决方案：将打印版本的样式与屏幕版本进行区分。

CSS 允许在媒体规则内使用特定的打印样式print：



@media print {
  /* styles specific for printing */
}
Enter fullscreen mode Exit fullscreen mode

我们可以在那里定义任何东西，不同的位置、显示、颜色……任何 CSS 允许的功能。但是使用print媒体规则，开发人员可以指定更多内容，例如打印机的一些默认设置：页面大小、边距、分页符、孤行和寡行控制等等。

我遇到的一个问题是页面尺寸。这很重要。虽然屏幕以像素为单位，但打印机却不是，如果我们使用的纸张尺寸不正确，可能无法获得预期的效果。在美国，最常见的尺寸是“信纸”，但您可以指定其他尺寸，例如 A4，或者以 、 或其他单位表示的具体px值cm：



@media print {
  @page {
    size: letter;
  }
}
Enter fullscreen mode Exit fullscreen mode

通过为屏幕和打印机定义不同的样式，两种格式的可视化效果将完全不同：

两个样式表的比较

同一文档与“屏幕样式”和“打印机样式”的比较

虽然可能需要加倍努力，但不同的结果是值得的。

元数据

我写了一篇关于网页元数据重要性的文章（这样他们就不会“困惑”了）。它包含有关元数据和微数据的信息（请参阅下一节），所有内容也适用于此。

以下是一些需要添加到您的 HTML 交互式简历中的内容：

HTML 元数据

这是经典的<meta>标签，包含有关文档的一般信息：作者、标题、描述等。它们由搜索引擎爬虫读取（或曾经由搜索引擎爬虫读取），并提供有关您的页面（在本例中为您的简历）的重要信息。

一些例子：



<title>[your name]'s Resume</title>
<meta author="[your name or link to your website]">
<meta name="keywords" content="[your name],resume,curriculum vitae,cv" />
<meta name="description" content="[your name]'s Interactive Resume" />
Enter fullscreen mode Exit fullscreen mode

它或许不像以前那么重要或相关，但仍然是。而且添加它们也会带来一些小麻烦。

社交媒体元数据

我们生活在一个互联的世界，文档可能会在社交媒体上分享。分享的可能不仅限于 Facebook 或 Twitter，还有 LinkedIn 或其他专业社交网络。

因此，您可能想要添加OpenGraph元标记，甚至一些社交媒体元标记：



<!-- OpenGraph -->
<meta property="og:title" content="Resume of Alvaro Montoro" />
<meta property="og:type" content="document" />
<meta property="og:url" content="[link to your site]" />
<meta property="og:image" content="[link to your picture]" />
<meta property="og:description" content="[same as meta description]" />

<!-- Twitter specific -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="[link to your site]" />
<meta name="twitter:title" content="[same as HTML title]" />
<meta name="twitter:description" content="[same as meta description]" />
<meta name="twitter:image" content="[link to your picture]" />
Enter fullscreen mode Exit fullscreen mode

请记住，这些都是建议：它们的内容不必与 HTML 元标记完全相同（即使最终可能如此），并且所有这些都是可选的（尤其是看图片，在某些国家/地区可能不适合简历，而在其他国家/地区则是必须的。）

超越元数据：微数据

虽然使用 HTML 元数据和语义标签是一个很好的举措，但它并不能提供机器处理和理解文档中包含的数据所需的全部信息。例如，让我们看一下以下代码：



<section>
  <h2>Candidate</h2>
  <p>
    Name: <span>Alvaro Montoro</span>
  </p>
  <p>
    Email: <span>alvaromontoro@gmail.com</span>
  </p>
  <p>
    Website: <a href="https://alvaromontoro.com">https://alvaromontoro.com</a>
  </p>
  <p>
    Alvaro is a <span>Web Developer</span> 
    that enjoys <span>HTML and CSS</span>.
  </p>
</section>
Enter fullscreen mode Exit fullscreen mode

计算机看到这段简单的HTML代码，会想： “太棒了！这里有一个包含标题、内容和链接的部分”，但它根本不知道内容是什么。有些程序可能更智能，能够检测到电子邮件，但内容、电子邮件和链接之间的关系却无法清晰地理解。

如果有办法指定它，那不是很好吗？好消息是，确实有！通过使用微数据，您可以提供有关内容本身的附加信息。这些信息对于阅读它的人来说可能很明显，但对于机器来说却不那么明显。让我们对上面的代码进行一些更改：



<section itemscope itemtype="http://schema.org/Person">
  <h2>Candidate</h2>
  <p>
    Name: <span itemprop="name">Alvaro Montoro</span>
  </p>
  <p>
    Email: <span itemprop="email">alvaromontoro@gmail.com</span>
  </p>
  <p>
    Website: <a itemprop="url" href="https://alvaromontoro.com">https://alvaromontoro.com</a>
  </p>
  <p>
    Alvaro is a <span itemprop="jobTitle">Web Developer</span> 
    that enjoys <span itemprop="knowsAbout">HTML and CSS</span>.
  </p>
</section>
Enter fullscreen mode Exit fullscreen mode

现在，机器看到的将不仅仅是一个部分。它会知道该部分描述了一个名叫 Alvaro Montoro 的人，他拥有指定的电子邮件和 URL，并且也是一位专攻 HTML 和 CSS 的 Web 开发人员。

人类不会受到 HTML 中这些新属性的影响，但文档的语义会因此而得到提升……如果处理它的机器能够理解微数据的话。

我不会深入研究微数据——这部分已经太长了，如果需要的话，我稍后会写一篇完整的文章——只知道它itemtype用于识别数据类型，itemprop用于类型中的特定属性，并且有不同的模式可用（您可以在Schema.org上看到它们），其中一些将有助于构建简历：

  • 人物：可用于描述您自己、您的推荐人或文档中提到的任何人。
  • 组织：用它来描述您工作过的公司。
  • OrganizationRole：这将提供有关您的职位和角色的详细信息（主要是职称和任职期限）。
  • EducationalOrganization：用于描述您参加过的不同学校、大学、新兵训练营等。
  • CreativeWork：它可用于描述您在简历中创建和突出显示的任何项目或艺术品。

这篇文章篇幅很长，或许应该拆分成更详细的小篇幅（或许下次再说）。如果你还在看……谢谢你的阅读 :)

文章来源：https://dev.to/alvaromontoro/developing-an-interactive-resume-with-html-and-css-5007
Devto 翻译
PREV
使用 CSS 中的圆圈绘制荷马·辛普森
NEXT
CSS 单行代码可以改进（几乎）每个项目