用HTML做自我介绍

最新推荐文章于 2025-04-14 12:04:35 发布

人工智障001

最新推荐文章于 2025-04-14 12:04:35 发布

阅读量3.1k

点赞数 34

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/2401_82944012/article/details/140207703

版权

用HTML做自我介绍

准备
开肝
- 分析
- 简便得搭个小框架
修饰
最后

准备

要有一个自我介绍的网页，并且做出炫酷的效果，我们得先创建一个文件，后缀名为.html，像这样
在这里插入图片描述

点击是，
之后右键，打开方式，选择vscode。按下英文感叹号，回车

开肝

分析

我们想要四个小div内容分别是姓名、年龄、专业、爱好，爱好再是一个介绍的段落，在右下角还有一个超链接。

简便得搭个小框架

我们将所有的东西放在boxes的div中。而四个小div内容分别是姓名、年龄、专业、爱好我们将它们的类定为box。
开始简便得大小框架，向我这样敲一遍。
在这里插入图片描述
注意必须要有第一行的提示，如果没有，需要删去最后一个字符再打一遍，如果他有了按下回车。
这是一个小框架就出现了。像这样：

然后“Ctrl + s”保存，然后回到卓面上你创建的文件然后双击运行。现在应该什么也没有。
这是到现在的所有代码：

<!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>
    <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p></p>
        <a href=""></a>
    </div>
</body>
</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>
    <div class="boxes">
        <div>姓名：MMO死神永生</div>

最低0.47元/天解锁文章