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



动图演示成品:


s:103
+关注
目录
打赏
0
0
0
0
34
分享
相关文章
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
142 7
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
82 2
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
170 1
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
58 0
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
70 6
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等