WEB前端教程：给自己做一个在线简历

我相信很多同学很着急的在零基础体验就开始看这个题了，没关系，如果你时间足够，没问题的。但是希望你记住，在这个系列课程中，完成多少任务并不重要，我们没有什么指标或者打分，来记录或者评估，你是不是一个快枪手。我们希望你在这个系列课程中，能够扎扎实实地掌握每一个基础知识，能够不断思考、实践，来形成自己的学习方法论，顺便提高自己的英文阅读能力以及写作能力。所以，不要在这里刷题，这里是个学习的平台，而不是培训考试速成培训班。

课程目标

我们希望你能够通过简历的制作，更加清楚地了解 HTML 是什么，HTML5 是什么。学习基本的 HTML 标签，理解各种标签的使用场景.

任务预览

今天你将独立制作一个线上个人简历。我这时候，你先不要考虑这个简历会长什么样，你重点要放在一个哲学问题上，就是简历里面的每个内容，它是什么。也许你还没太懂啥意思，所以，先看看下面几个内容。

阅读学习

制作一个在线简历，你需要掌握 HTML 一系列基本标签，重点掌握 <h1> ,<h2>,<p> ,<a>, <div>, <ul>, <img>。

阅读下面的资料，具体学习各个标签用法，

我们再来看看 a 标签的一个实践，实现一个锚点导航

a 锚点制作教程(opens new window)

下面有一个锚点实例，您可以感受一下锚点的效果，并且进行自主练习

锚点案例(opens new window)

如果您还学有余力的，你可以去到最底部，我们推荐了一些能够帮助您学习 HTML 的学习资源，您可以参考学习，快速提高自己。

任务作业

参考示例图 (opens new window),完成一个属于你自己的个人简历，你不需要和样例完全一样，你可以添加或者删除一些内容，具体内容由你而定。

步骤和提示
1. 创建一个 HTML 文件，比如 resume.html 文件。
2. 如果您不方便用 IDE 进行开发，您可以选择更加方便的方式：使用 codepen 作为我们的开发工具，打开 codepen (opens new window)，创建一个新的页面（Create -> New Pen）。它有三个代码编写的窗口，分别是 HTML 、CSS 、JS，下方是一个预览效果的窗口。
3. 然后我们在 HTML 窗口中开始输入一些内容吧，我们假设现在要为自己创建一个在线简历，那简历都包含什么呢？给一些参考：
  - 包括“个人简历”四个字
  - 你的姓名，有可能只有姓名，有可能是姓名：张三这样的模式
  - 你的各种联系方式，比如：手机：18600000000，邮箱：joinefe@baidu.com
  - 你的学历，比如：本科：百度前端学园
  - 项目经验，比如：项目 A ：项目时间：2017.1 - 2017.8 ，项目描述：在项目 A 中负责了 xxxxx
  - 你可以参考自己的简历内容，也可以参考网上一些热门简历内容，比如羡辙的简历（她简历的样式每年校招简历总能看见很多人在复用，所以，希望大家以后做简历的时候换个样式吧，哪怕是换个颜色也是极好的）。
4. 现在你需要把你之前想到的简历内容的每一个内容拆解到对应的 HTML 元素，你需要考虑很多问题，举几个例子：
  - 大标题“简历”二字，是否适合使用<h1><h2>之类的标题元素
  - “姓名：张三”这几个字，我是用一个<xxx>元素呢？还是拆成<yyy>姓名</yyy><zzz>张三</zzz>（xxx，yyy，zzz 均为示意）
  - “项目经验：A 项目，xxxx，B 项目，xxxxx”这部分内容结构有点小复杂，怎么用合适的 HTML 元素来组装呢？
  在这个过程中，需要注意的事儿，你要考虑的主要问题，就是为你的内容找到语义合适的 HTML 元素，暂时不要考虑样式的问题，切记。
好的，愉快地写代码吧，内容不需要太多，这段编码时间别超过 2 个小时。上个闹钟，如果超过了，暂停一下，重新去阅读一下上面的参考资料，看看自己有没有实现得不合理的地方，然后优化一下。
自测问题
来最后小验证一下，你是否能流畅地回答以下问题：
- 链接是什么概念，对应什么标签？
- 常用标签都有哪些，都适合用在什么场景？
- ol 、ul 、li 、dl 、dd 、dt 等这些标签都适合用在什么地方，举个例子。
- img 中的 src 和 alt 属性有什么作用?
- img 的中 title 属性会产生什么效果？
- 一个页面只能有一个 h1 吗？为什么？
- div 和 span 的区别是什么，它们俩有什么不同？
- a 标签的 tagert 属性值有哪些？对应作用是什么？
- 小练习
  给您的简历页面添加一个页内目录，可以快速定位到简历的某个位置。
  - 步骤和提示
    1. 打开您本地环境的 resume.html(您任务作业中创建的个人简历)
    2. 实现一个页内目录导航效果:在标题"个人简历"下面, 创建一个无序列表，包含三个项目，每一个项目里面是一个链接，这个显示为个人简历的目录导航，这个导航内容显示什么呢？这可以根据您自己创建的简历内容而定，我们给一个参考,目录导航显示内容如下所示：
      - 个人信息
      - 联系方式
      - 教育经历
      - 工作经历
      - 个人项目
      - 奖项证书
      - 自我评价
      在这个过程中，需要注意的事儿，你要考虑的主要问题，您需要快速定位的几个板块要什么元素包裹，需要使用什么属性来完成锚点功能，我们依然暂时不要考虑样式的问题
      总结
      找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：
      - 日期，今天的学习总用时，今天学习的目标是什么，是否达成
      - 哪些东西今天了解得比较透彻，说说自己的理解
      - 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
      - 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决
      - 更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
      - 长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-13 11:40
阅读 ( 490 )
分类：WEB前端开发