html基础制作个人简历练习

原创已于 2025-11-03 21:55:03 修改 · 1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #前端

于 2025-10-24 20:22:49 首次发布

前端基础专栏收录该内容

5 篇文章

订阅专栏

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
前几篇博客介绍了前端基础环境的搭建和html的各个标签和属性的用法，这篇博客就把不同的标签结合起来，实现一个个人简介页面，有助于更好的掌握html基础语法
🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，效果

在网页中完成一个这样的个人简历页面，铁汁们可以先看下每个部分的效果，思考下都是用什么标签实现的

在这里插入图片描述

接下来会对页面进行拆分，分析代码

2，基本信息

首先看下标题和基本信息部分
标题部分的名字写在h1标签中
下面基本信息部分都套在一个div标签中
虽然这里写不写div标签效果都一样，但是写了div标签内容的分组和结构就更加清晰了，这部分就变成了一个整体，后面想用css更改这部分的样式就会更加方便

下面的求职意向，联系电话，个人邮箱都写在p标签中，实现换行效果

我的gitee和博客是用a标签套在p标签中，也是借用p标签实现换行效果

在这里插入图片描述

代码如下：

   <h1>洋不写bug</h1>
   <div>
    <h2>基本信息</h2>
   <img src="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><a href="https://gitee.com/">我的gitee</a></p>
   <p><a href="https://blog.youkuaiyun.com/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源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <h1>洋不写bug</h1>
   <div>
    <h2>基本信息</h2>
   <img src="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><a href="https://gitee.com/">我的gitee</a></p>
   <p><a href="https://blog.youkuaiyun.com/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）

可以写个代码来试一下，就会发现，随着嵌套的层数加深，不仅是形成会变化，缩进也会逐渐变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="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>