HTML的两个实战项目

1. 个人简历

1. 1 快速生成模板

   写中文也不会乱码

1.2 根据简历格式进行预设计

名字

   基本信息

       岗位

       电话

       邮箱

       博客

       git

   教育背景

       基本上只有大学是加分项

   专业技能

       学了啥写啥

   我的项目

       做了啥写啥

   个人评价

简历简简单单就最好了，虽然我们会用一些花里胡哨的html代码。

1.3 开始创作吧

HTML基础知识博客：

博客链接

1.3.1 基本信息

1.3.2 教育背景

有序列表

1.3.3 专业技能

无序列表

1.3.4 我的项目

有序列表与无序列表的嵌套使用

1.3.5 自我评价

   你有什么写什么

这样就完成了一份简单的简历啦，发给面试官一个HTML文件，不比word好多了！

2. 输入简历信息页面设计

2.1 设计大概框架

   输入姓名

   输入性别

       再右边上传图片

   输入出生日期

       年月日（下拉表单）

   就读学校（文本框）

   掌握的技能（10×30）

   项目经历（10×30）

   选择是否已阅读公司招聘要求

       复选框模拟可取消的选项

       附上文档链接

   需要让应聘者确认的信息列表

   清空按钮和提交按钮

2.2 开始创作吧

   input标签在这里反复使用，其实，如果不涉及按钮，不用form去环绕，也无妨

   这里虽然用不到表格，但是为了格式好看，不紧凑，我用到了表格去划分，且不需要到表头和边框

!DOCTYPE html>
    
html lang="en">
    
  head>
    
    meta charset="UTF-8" />
    
    meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    title>
    Document/title>
    
  /head>
    
  body>
    
    div>
    
      h1>
    请填写简历信息/h1>
    
      table width="500px" cellspacing="0">
    
        form
          action="https://blog.csdn.net/Carefree_State?spm=1001.2101.3001.5343"
        >
    
            tbody>
    
                !-- 内容 -->
    
            /tbody>
    
        /form>
    
      /table>
    
    /div>
    
  /body>
    
/html>
    

2.2.1 输入姓名

   想象一个透明的表格！

2.2.2 上传照片

2.2.3 输入性别

   用到label标签，让label点击对应图片，选中对应input标签

       文本类input

       选择类input

2.3.4 输入生日日期

   用到表单标签

2.2.5 就读学校

   这样写的好处是，点击就读学校文章，也会选中文本框！

2.2.6 应聘岗位

   用到复选框，和刚才的技巧

2.2.7 掌握技能与项目经历

   那么大的空间，就不用刚才的技巧了

2.2.8 上传附件

   可能会上传证书或者一些资料等等

2.2.9 应聘者确认

2.2.10 提交与清空按钮

动图演示成品：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！