做网站需要学jq吗,内蒙古建设厅官网站,宝塔 wordpress,海报生成器文章目录 前言一、综合案例#xff1a;个人简历信息填写页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明#xff0c;关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏#xff0c;会持续更新的。 链接#xff1a; Web前端学习专栏 下面我对… 文章目录 前言一、综合案例个人简历信息填写页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏会持续更新的。 链接 Web前端学习专栏 下面我对这个专栏的内容进行几点说明 适合每一个前端0基础的小伙伴学习。对常用标签以及常用属性进行了详细讲解。最后有两个综合案例实现手把手带大家实现两个综合案例。可以把本篇博客当作查询资料HTML的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。 首先提示一下大家如果是在手机端看这篇博客的小伙伴请移步电脑端学习哈在电脑上会更好看一些如果能够跟着在电脑上进行代码的实现就会更好了 在这个学习过程中将遇到挑战和困难但请相信每一次的努力和坚持都将化为成长的动力。让我们携手共进一起探索Web前端的无限可能
一、综合案例个人简历信息填写页面 接下来我们再来看一个页面: 这个页面就是我们在找工作的时候简历信息填写的一个页面。 那么我们来观察一下这个页面的整体结构: 我们可以看到在性别的前面有一个对应性别的图标那么这个图标我们需要下载通过我放在下面的链接下载就好了 链接: 图片下载链接我们还可以观察到左边的文字相当于是右边输入信息的总称右边是我们输入的信息内容那这个页面是有一定的布局的这个布局我们可以通过表格来完成页面的布局。 接下来我们就来用代码实现一下这个页面。
首先页面最上方的“请填写简历信息”几个字就相当于是我们的表格中的表头信息。我们使用thead标签来实现其次这个表头信息的字体是加大加粗的那么我们就可以使用标题标签来实现这样一个效果。
theadh3请填写简历信息/h3/thead浏览器显示如下 接下来我们就来看姓名这一行我们发现姓名这一行占了两个单元格姓名占了一个单元格输入框占了一个单元格。这里我们使用tr标签来实现一行td标签来实现一个单元格使用input标签来实现输入框。 trtd姓名/tdtdinput typetext/td/tr浏览器显示如下 为了提高用户体验的质量我们希望我们在鼠标点击姓名此时光标能够自动选中文本框这个效果我们可以使用label标签来实现。 trtdlabel forname姓名/label/tdtdinput typetext idname/td/tr浏览器显示如下 此时大家可以试一下效果。 那接下来我们再看性别这一行我们来实现一下这一行。 trtd性别/tdtdinput typeradio namesex idmalelabel formaleimg src./male.png alt width20 height20 男/labelinput typeradio namesex checkedchecked idfemalelabel forfemaleimg src./female.png alt width20 height20 女/label/td/tr 说明: 在这里我们可以看到这里的性别是一个选框所以这里我们使用input标签来实现。这里是单选框所以我们的type属性的取值是radio。在这个选项后面有一个性别的图标我们就需要使用图片标签img来实现。导入图片之后我们原本图片的大小是和页面中的要求是不符合的所以我们就需要使用wudth属性和height属性来设置图片大小。我们还想实现在选择性别的时候只能选择一个不能选择两个。我们就可以将两个选项的name属性的取值相同就可以达到只能选择一个的效果。我们想要设置有一个默认的选中一个性别就需要在想要默认选中的选项中使用checked属性就可以达到目的。为了提升用户的体验感我们想要在鼠标点击图标的时候就能选中对应性别的选项框不只在只有点击选项框的时候才能选中。 我们使用label标签来实现这样的一个效果。 浏览器显示如下 接下来就是出生日期这一行了
代码
trtd出生日期/tdtdselect name idoption value请选择年份/optionoption value2000/optionoption value2001/optionoption value2002/optionoption value2003/optionoption value2004/option/selectselect name idoption value请选择月份/optionoption value1/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/option/selectselect name idoption value请选择日期/optionoption value1/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/optionoption value13/optionoption value14/optionoption value15/optionoption value16/optionoption value17/optionoption value18/optionoption value19/optionoption value20/optionoption value21/optionoption value22/optionoption value23/optionoption value24/optionoption value25/optionoption value26/optionoption value27/optionoption value28/optionoption value29/optionoption value30/optionoption value31/option/select/td/tr说明 这里的出生日期信息的填写是使用一个下拉选项框来对年月日进行选择来实现的所以我们使用select标签和option来实现这个效果。 浏览器显示如下 下面就来到了我们就读学校这一行了。 大家会发现这一行的实现方式和姓名那一行的实现方式是完全一致的。这样就好办多了比着葫芦画瓢就好了。 代码 trtdlabel forschool就读学校/label/tdtdinput typetext name idschool/td/tr
浏览器显示如下
这一行我们就解决了。 接下来再来看应聘岗位这一行
代码 trtd应聘岗位/tdtdinput typecheckbox idfelabel forfe前端开发/labelinput typecheckbox idserverlabel forserver后端开发/labelinput typecheckbox idtextlabel fortext测试开发/labelinput typecheckbox idrunlabel forrun运维开发/label/td/tr说明 这里应聘岗位的选项也是通过选框来进行选择的所以我们可以使用input标签来完成。很明显这些应聘岗位是可以进行多选的所以我们需要让type属性的取值为 checkbox来设置复选框。那么为了提高用户的体验感我们想要达到鼠标点击选项的文字时选项文字对应的选框能够自动勾选上这个时候我们需要使用 label标签来对其进行绑定。 浏览器显示如下 后面我们来实现一下掌握的技能和项目经历这两行
代码 trtd掌握的技能/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd项目经历/tdtdtextarea name id cols30 rows10/textarea/td/tr说明 这里只需要使用 textarea标签来实现一个文本框就行比较简单。 浏览器显示如下 下面我们再来看还有一个选框
我们来实现一下这一行
代码 trtd/tdtdinput typecheckbox idreadlabel forread我已仔细阅读公司的招聘要求/label/td/tr说明 首先我们可以看到在这个选框的前面什么都没有但是它是一个单元格啊所以我们就还用它来占一个单元格但是不填写单元格内容。其次就是要实现那个复选框了。再然后就是我们还是需要绑定文字和选框。 浏览器显示如下 然后我们来实现查看我的状态这样一个超链接 代码 trtd/tdtda href#查看我的状态/a/td/tr说明 前面一个单元格没有任何内容。我这里的 herf#的意思是不跳转到任何页面仍然停留在当前页面。 浏览器显示如下 接下来就是请应聘者确定的板块
代码 trtd/tdtdh3请应聘者确认/h3ulli以上信息真实有效/lili能够尽快去公司实习/lili能接受公司的加班文化/li/ul/td/tr说明 首先还是前面单元格的内容是空白的问题。 然后我们可以看到”请应聘者确认“这几个字是加大加粗的效果这个时候我们就需要借助于标题标签来实现这种效果。 很容易就可以看出确定的这几条内容是由无序列表来实现的。 浏览器显示如下
