h5网站如何做,网站模板批量下载,做网站的用户需求分析,这是我自己做的网站吗文章目录 前言一、 综合案例#xff1a;个人简历信息展示页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明#xff0c;关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏#xff0c;会持续更新的。 链接#xff1a; Web前端学习专栏 下面我… 文章目录 前言一、 综合案例个人简历信息展示页面 前言 这篇博客仅仅是对HTML的基本结构进行了一些说明关于HTML的更多讲解以及CSS、Javascript部分的讲解可以关注一下下面的专栏会持续更新的。 链接 Web前端学习专栏 下面我对这个专栏的内容进行几点说明 适合每一个前端0基础的小伙伴学习。对常用标签以及常用属性进行了详细讲解。最后有两个综合案例实现手把手带大家实现两个综合案例。可以把本篇博客当作查询资料HTML的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。 首先提示一下大家如果是在手机端看这篇博客的小伙伴请移步电脑端学习哈在电脑上会更好看一些如果能够跟着在电脑上进行代码的实现就会更好了 在这个学习过程中将遇到挑战和困难但请相信每一次的努力和坚持都将化为成长的动力。让我们携手共进一起探索Web前端的无限可能
一、 综合案例个人简历信息展示页面 接下来我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面. 我们先来看一下页面 我们首先看到的是我们页面中的姓名紧接着下面是我们的基本信息板块教育背景板块专业技能板块还有我的项目板块还有一个个人评价板块。 接下来我们就通过代码来实现这样一个页面。 我们可以观察到这个姓名非常突出的字体很大我们就可以通过h1标签来实现这样的效果。
h1论迹/h1接下来就是我们的基本信息板块了为了让我们的页面结构比较整洁此时我们就通过div标签来表示这个板块。 div/div姓名下面就有一个基本信息的几个大字这个时候我们就可以使用不同的标题标签来实现这个效果了。我们观察到这个基本信息的标题比上面姓名的标题稍微小一点我们就可以使用h2标签。 h2基本信息/h2浏览器显示如下 再往下看我们可以看到这个板块首先有一张图片这里使用img标签来将图片进行插入。这个图片我们直接通过外部网址url来进行导入。 img srchttps://img2.baidu.com/it/u978276174,890356570fm253fmtautoapp120fJPEG?w712h500 alt
此时我们打开页面看一下效果 我们发现这张图片稍微有点大那我们可以通过width属性和heiight属性的不同取值去设置这个图片的大小。 img srchttps://img2.baidu.com/it/u978276174,890356570fm253fmtautoapp120fJPEG?w712h500 alt width200 height200浏览器显示如下 在基本信息板块中除了一个图片还有其他的基本信息那么我们可以看到这些基本信息都是单独的一行那么这个时候我们就可以使用段落标签p来实现这样的效果。这些都是嵌套在div标签中的这个时候我们为了页面更加简洁就可以将这些基本信息放在一个小盒子里通过span标签来实现。 spanp求职意向C开发/p/span
spanp联系电话123456789/p/span
spanp个人邮箱123456789.com/p/span浏览器显示如下 那么接下来我们看到还有“我的 gitee”和“我的博客”没有实现这个时候时候我们就要使用到超链接a标签了。我们使用a标签就要跳转到某一个地址这里我们就跳转到“我的gitee”和“我的博客”的地址。 spanpa hrefhttps://gitee.com/pepper-cloth我的gitee/a/p/spanspanpa hrefhttps://blog.csdn.net/2303_80341387?spm1000.2115.3001.5343我的博客/a/p/span浏览器显示如下 我们一点击页面中的我的gitee和我的博客就会跳转到对应的链接页面。 那么此时我们就写完了我们的基本信息板块。接下来再来看我们的教育背景板块。 那么同样地我们为了使页面更加简洁我们把教育背景这个板块放在一个大盒子里面使用div标签来实现这一效果。
div/div接下来我们还是首先看到教育背景这个标题我们可以看到教育背景和基本信息是对应的所以我们和基本信息一样都使用h2标签来实现。
h2教育背景/h2浏览器显示如下 我们可以观察下这些教育背景是有序的那么我们就可以使用有序标签ol来实现这个效果。 olli2000-2006 xxx小学 小学/lili2006-2009 xxx初中 初中/lili2009-2012 xxx高中 高中/lili2012-2016 xxx大学 计算机专业 本科/li/ol浏览器显示如下 那教育背景的板块我们就实现好了接下来看专业技能板块。
首先还是为了页面的整洁和标题问题和上面的是一个道理哈 divh2专业技能/h2/div浏览器显示如下 我们可以看到这个专业技能是使用的无序列表ul标签来实现的。 ulli掌握C基础语法扎实已经熟练刷题/lili常见的数据结构都可以独立实现并熟练应用/lili熟知计算机网络理论并且可以独立排查常见问题/lili掌握Web开发能力并且独立开发了学校的留言墙功能/li/ul浏览器显示如下 再来看一下我的项目这一个板块首先还是老一套的标题和页面结构的整洁性问题。 divh2我的项目/h2/div接下来我们可以看到每一个项目都有一个小标题那么这些项目与项目之间可以用有序列表来表示而功能介绍中的内容我们又可以通过无序列表来表示。 代码 divh2我的项目/h2olh3li留言墙/li/h3p开发时间2023年4月1日 ~ 2023年4月28日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ul/ololh3li学习小助手/li/h3p开发时间2023年6月1日 ~ 2023年6月28日/pp功能介绍/pulli支持错题检索/lili支持同学探讨/li/ul/ol/div浏览器显示如下 那么这个板块我们就完成了。 接下来我们来看最后一个板块个人评价 首先还是标题和页面的结构整洁性问题 divh2个人评价/h2/div浏览器显示如下 接下来的内容就是使用一个p标签就好了
p热爱生活热爱编程/p浏览器显示如下 好了到这里我们就完成了整个页面的实现。 我们来看一下完整的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title填写简历信息/title
/head
bodyh1论迹/h1divh2基本信息/h2img srchttps://img2.baidu.com/it/u978276174,890356570fm253fmtautoapp120fJPEG?w712h500 alt width200 height200spanp求职意向C开发/p/spanspanp联系电话123456789/p/spanspanp个人邮箱123456789.com/p/spanspanpa hrefhttps://gitee.com/pepper-cloth我的gitee/a/p/spanspanpa hrefhttps://blog.csdn.net/2303_80341387?spm1000.2115.3001.5343我的博客/a/p/span/divdivh2教育背景/h2olli2000-2006 xxx小学 小学/lili2006-2009 xxx初中 初中/lili2009-2012 xxx高中 高中/lili2012-2016 xxx大学 计算机专业 本科/li/ol/divdivh2专业技能/h2ulli掌握C基础语法扎实已经熟练刷题/lili常见的数据结构都可以独立实现并熟练应用/lili熟知计算机网络理论并且可以独立排查常见问题/lili掌握Web开发能力并且独立开发了学校的留言墙功能/li/ul/divdivh2我的项目/h2olh3li留言墙/li/h3p开发时间2023年4月1日 ~ 2023年4月28日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ul/ololh3li学习小助手/li/h3p开发时间2023年6月1日 ~ 2023年6月28日/pp功能介绍/pulli支持错题检索/lili支持同学探讨/li/ul/ol/divdivh2个人评价/h2p热爱生活热爱编程/p/div
/body
/html浏览器显示如下
