前言❤️❤️hello hello这里是洋不写bug~欢迎大家点赞关注收藏前几篇博客介绍了前端基础环境的搭建和html的各个标签和属性的用法这篇博客就把不同的标签结合起来实现一个个人简介页面有助于更好的掌握html基础语法个人主页洋不写bug的博客所属专栏前端基础铁汁们对于前端的各种常用核心语法都可以在上面的前端专栏学习专栏正在持续更新中有问题可以写在评论区或者私信我哦~1效果在网页中完成一个这样的个人简历页面铁汁们可以先看下每个部分的效果思考下都是用什么标签实现的接下来会对页面进行拆分分析代码2基本信息首先看下标题和基本信息部分标题部分的名字写在h1标签中下面基本信息部分都套在一个div标签中虽然这里写不写div标签效果都一样但是写了div标签内容的分组和结构就更加清晰了这部分就变成了一个整体后面想用css更改这部分的样式就会更加方便下面的求职意向联系电话个人邮箱都写在p标签中实现换行效果我的gitee和博客是用a标签套在p标签中也是借用p标签实现换行效果代码如下h1洋不写bug/h1divh2基本信息/h2imgsrchttps://tse2-mm.cn.bing.net/th/id/OIP-C.M6vwNmkWa2qTef5qyWu8YQAAAA?w155h180c7r0o7cb12dpr1.5pid1.7rm3altp求职意向Java开发/pp联系电话1234567890/pp个人邮箱668899qq.com/ppahrefhttps://gitee.com/我的gitee/a/ppahrefhttps://blog.csdn.net/Lbycomputer?spm1011.2415.3001.5343我的博客/a/p/div进入网页中右键点击检查看下代码会发现这部分就是一个大盒子这个网页就是用div表示每个部分3教育背景和专业技能教育背景需要排个序从小到大使用有序列表掌握的技能不分前后顺序用无序列表教育背景和专业技能部分每个大块都用div包裹两部分是两个大的盒子代码如下divh2教育背景/h2olli2003 - 2009 翻斗幼儿园/lili2009 - 2015 翻斗小学/lili2015 - 2018 翻斗初中/lili2018 - 2021 翻斗高中/lili2021 - 2025 翻斗大学 计算机专业 本科/li/ol/divdivh2专业技能/h2ulli掌握Java技能/lili掌握数据结构/lili掌握前端相关技能/lili掌握phython/li/ul/div4个人项目和个人评价这里留言墙和学习小助手这两个项目组成了一个有序列表因此要在外面套一个大的ol标签留言墙和学习小助手都包在了h3标签中以获得字体加粗的效果另外在功能介绍时使用了无序列表个人评价部分很简单就两行代码整个网页的代码如下divh2个人项目/h2olh3li留言墙/li/h3p开发时间2025年9月1日 - 2025年9月29日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ulh3li学习小助手/li/h3p开发时间2025年10月1日 - 2025年10月29日/pp功能介绍/pulli支持AI问题解答/lili支持同学探讨/li/ul/ol/divdivh2个人评价/h2p喜欢唱,跳,rap,打篮球/p/div5html源码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyh1洋不写bug/h1divh2基本信息/h2imgsrchttps://tse2-mm.cn.bing.net/th/id/OIP-C.M6vwNmkWa2qTef5qyWu8YQAAAA?w155h180c7r0o7cb12dpr1.5pid1.7rm3altp求职意向Java开发/pp联系电话1234567890/pp个人邮箱668899qq.com/ppahrefhttps://gitee.com/我的gitee/a/ppahrefhttps://blog.csdn.net/Lbycomputer?spm1011.2415.3001.5343我的博客/a/p/divdivh2教育背景/h2olli2003 - 2009 翻斗幼儿园/lili2009 - 2015 翻斗小学/lili2015 - 2018 翻斗初中/lili2018 - 2021 翻斗高中/lili2021 - 2025 翻斗大学 计算机专业 本科/li/ol/divdivh2专业技能/h2ulli掌握Java技能/lili掌握数据结构/lili掌握前端相关技能/lili掌握phython/li/ul/divdivh2个人项目/h2olh3li留言墙/li/h3p开发时间2025年9月1日 - 2025年9月29日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ulh3li学习小助手/li/h3p开发时间2025年10月1日 - 2025年10月29日/pp功能介绍/pulli支持AI问题解答/lili支持同学探讨/li/ul/ol/divdivh2个人评价/h2p喜欢唱,跳,rap,打篮球/p/div/body/html6列表知识补充不知道铁汁们看这个页面有没有在发现一个问题在专业技能和功能介绍这部分已在下图中圈出都是使用的无序列表也都没有设置type属性因此使用的都是默认属性那为什么专业技能下面的无序列表前面是实心圆点而功能介绍下面的无序列表前面是空心圆点 除此之外功能介绍下面的无序列表也缩进了更多这是因为ul无序列表标签前面已经套了一层ul列表项标签嵌套语法规则第 1 层嵌套ul默认是实心圆disc第 2 层嵌套的ul默认是空心圆circle第 3 层及更深嵌套的ul默认是方块square可以写个代码来试一下就会发现随着嵌套的层数加深不仅是形成会变化缩进也会逐渐变大!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyulli第一层列表项 1/lili第一层列表项 2ulli第二层列表项 1/lili第二层列表项 2ulli第三层列表项 1/lili第三层列表项 2/li/ul/li/ul/lili第一层列表项 3/li/ul/body/html结语这个网页相对来说比较基础如果是初学前端的铁汁们有时间可以自己练习一下巩固下基础以上就是今天的所有内容啦完结撒花