【HTML】两个实战项目

简介: HTML的两个实战项目1. 个人简历1. 1 快速生成模板

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 提交与清空按钮



动图演示成品:


相关文章
|
6月前
|
前端开发
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
|
9月前
|
容器
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
216 0
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0
|
3月前
|
前端开发 JavaScript
HTML实战演练之比心
HTML实战演练之比心
|
3月前
|
人工智能 JavaScript 前端开发
HTML实战演练之贪吃蛇美食大作战
HTML实战演练之贪吃蛇美食大作战
|
4月前
|
JavaScript 应用服务中间件 nginx
docker安装的nginx放在html文件下的vue项目404解决
docker安装的nginx放在html文件下的vue项目404解决
|
5月前
Vue3项目中引入html页面
Vue3项目中引入html页面
|
7月前
|
XML C语言 数据格式
七、使用BeautifulSoup4解析HTML实战(一)
七、使用BeautifulSoup4解析HTML实战(一)
|
7月前
|
移动开发 前端开发 HTML5
HTML+CSS-项目:学成在线
HTML+CSS-项目:学成在线
106 1
|
8月前
|
JavaScript
在spring_boot项目中如何将vue组件引入到.html页面进行使用
在spring_boot项目中如何将vue组件引入到.html页面进行使用
117 0