前言❤️❤️
hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
前几篇博客介绍了前端基础环境的搭建和html的各个标签和属性的用法，这篇博客就把不同的标签结合起来，实现一个个人简介页面，有助于更好的掌握html基础语法
🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~
1，效果
在网页中完成一个这样的个人简历页面，铁汁们可以先看下每个部分的效果，思考下都是用什么标签实现的
接下来会对页面进行拆分，分析代码
2，基本信息
首先看下标题和基本信息部分
标题部分的名字写在h1标签中
下面基本信息部分都套在一个div标签中
虽然这里写不写div标签效果都一样，但是写了div标签内容的分组和结构就更加清晰了，这部分就变成了一个整体，后面想用css更改这部分的样式就会更加方便
下面的求职意向，联系电话，个人邮箱都写在p标签中，实现换行效果
我的gitee和博客是用a标签套在p标签中，也是借用p标签实现换行效果
代码如下：
<h1>洋不写bug</h1><div><h2>基本信息</h2><imgsrc="https://tse2-mm.cn.bing.net/th/id/OIP-C.M6vwNmkWa2qTef5qyWu8YQAAAA?w=155&h=180&c=7&r=0&o=7&cb=12&dpr=1.5&pid=1.7&rm=3"alt=""><p>求职意向：Java开发</p><p>联系电话：1234567890</p><p>个人邮箱：668899@qq.com</p><p><ahref="https://gitee.com/">我的gitee</a></p><p><ahref="https://blog.csdn.net/Lbycomputer?spm=1011.2415.3001.5343">我的博客</a></p></div>
进入网页中右键点击检查看下代码，会发现这部分就是一个大盒子，这个网页就是用div表示每个部分
3，教育背景和专业技能
教育背景需要排个序，从小到大，使用有序列表
掌握的技能不分前后顺序，用无序列表
教育背景和专业技能部分每个大块都用div包裹，两部分是两个大的盒子
代码如下：
<div><h2>教育背景</h2><ol><li>2003 - 2009 翻斗幼儿园</li><li>2009 - 2015 翻斗小学</li><li>2015 - 2018 翻斗初中</li><li>2018 - 2021 翻斗高中</li><li>2021 - 2025 翻斗大学 计算机专业 本科</li></ol></div><div><h2>专业技能</h2><ul><li>掌握Java技能</li><li>掌握数据结构</li><li>掌握前端相关技能</li><li>掌握phython</li></ul></div>4，个人项目和个人评价
这里留言墙和学习小助手这两个项目组成了一个有序列表，因此要在外面套一个大的ol标签
留言墙和学习小助手都包在了h3标签中，以获得字体加粗的效果
另外在功能介绍时使用了无序列表
个人评价部分很简单，就两行代码🤣
整个网页的代码如下：
<div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间：2025年9月1日 - 2025年9月29日</p><p>功能介绍</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul><h3><li>学习小助手</li></h3><p>开发时间：2025年10月1日 - 2025年10月29日</p><p>功能介绍</p><ul><li>支持AI问题解答</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>喜欢唱,跳,rap,打篮球</p></div>5，html源码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>洋不写bug</h1><div><h2>基本信息</h2><imgsrc="https://tse2-mm.cn.bing.net/th/id/OIP-C.M6vwNmkWa2qTef5qyWu8YQAAAA?w=155&h=180&c=7&r=0&o=7&cb=12&dpr=1.5&pid=1.7&rm=3"alt=""><p>求职意向：Java开发</p><p>联系电话：1234567890</p><p>个人邮箱：668899@qq.com</p><p><ahref="https://gitee.com/">我的gitee</a></p><p><ahref="https://blog.csdn.net/Lbycomputer?spm=1011.2415.3001.5343">我的博客</a></p></div><div><h2>教育背景</h2><ol><li>2003 - 2009 翻斗幼儿园</li><li>2009 - 2015 翻斗小学</li><li>2015 - 2018 翻斗初中</li><li>2018 - 2021 翻斗高中</li><li>2021 - 2025 翻斗大学 计算机专业 本科</li></ol></div><div><h2>专业技能</h2><ul><li>掌握Java技能</li><li>掌握数据结构</li><li>掌握前端相关技能</li><li>掌握phython</li></ul></div><div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间：2025年9月1日 - 2025年9月29日</p><p>功能介绍</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul><h3><li>学习小助手</li></h3><p>开发时间：2025年10月1日 - 2025年10月29日</p><p>功能介绍</p><ul><li>支持AI问题解答</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>喜欢唱,跳,rap,打篮球</p></div></body></html>6，列表知识补充
不知道铁汁们看这个页面有没有在发现一个问题：
在专业技能和功能介绍这部分（已在下图中圈出）
都是使用的无序列表，也都没有设置type属性，因此使用的都是默认属性
那为什么专业技能下面的无序列表前面是实心圆点，而功能介绍下面的无序列表前面是空心圆点 ？
除此之外，功能介绍下面的无序列表也缩进了更多
这是因为，ul无序列表标签前面已经套了一层ul列表项标签，嵌套语法规则：
- 第 1 层嵌套<ul>：默认是实心圆（disc）
- 第 2 层嵌套的<ul>：默认是空心圆（circle）
- 第 3 层及更深嵌套的<ul>：默认是方块（square）
可以写个代码来试一下，就会发现，随着嵌套的层数加深，不仅是形成会变化，缩进也会逐渐变大
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ul><li>第一层列表项 1</li><li>第一层列表项 2<ul><li>第二层列表项 1</li><li>第二层列表项 2<ul><li>第三层列表项 1</li><li>第三层列表项 2</li></ul></li></ul></li><li>第一层列表项 3</li></ul></body></html>结语💕💕
这个网页相对来说比较基础，如果是初学前端的铁汁们有时间可以自己练习一下，巩固下基础
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉
