新手HTML与CSS入门教程

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年8月3日 16:41 本文热度 996

今天我们将一起学习 HTML 和 CSS 的基础知识，并通过一个实际项目——待办事项页面，带你从零开始掌握网页开发的核心技能。
无论你是小白还是有一定基础的开发者，这篇文章都将为你提供清晰的指引和实操经验。

HTML与CSS是什么？

HTML（超文本标记语言） 是网页的“骨架”，负责定义页面结构，比如标题、段落、输入框等。
CSS（层叠样式表） 则是网页的“装修”，用来美化页面，比如设置颜色、布局、圆角等。

一个简单的比喻：

• HTML 像毛坯房，提供了基本的框架。
• CSS 像室内装修，决定了房子的风格和美观度。

没有HTML，CSS无法独立工作；没有CSS，HTML页面会显得单调。两者相辅相成，构成了现代网页的基础。

开发环境准备

在开始写代码之前，我们需要准备以下工具：

1. 代码编辑器：推荐使用 VS Code，它支持代码高亮、自动补全等功能。

• 下载方式：打开浏览器，搜索“VS Code”，进入官网，下载适合你系统的版本。
• 中文设置：安装后，点击左侧扩展图标，搜索“Chinese”，安装并重启VS Code即可。

2. 浏览器：用于预览和调试网页，推荐 Chrome 或 Firefox。
3. AI辅助工具（可选）：可以使用AI模型（如Kimi、星火、文心一言）解答代码疑问，加速学习。

• 国内用户可登录对应官网直接使用。

4. 项目文件夹：创建一个文件夹（如“todo-app”），用于存放代码文件。

• 在VS Code中打开该文件夹，点击“新建文件”，命名为 index.html。

第一个HTML文件

让我们从一个简单的HTML文件开始：

1. 打开 index.html，输入 ! 并按 Tab 键，VS Code会自动生成以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

1. 保存文件（快捷键：Windows - Ctrl+S；Mac - Cmd+S）。
2. 右键文件，选择“在浏览器中打开”，你会看到页面显示“Hello, World!”。

小技巧：

• 调整浏览器和VS Code窗口并排，一边写代码一边预览。
• 修改代码后，记得保存并刷新浏览器查看效果。

打造待办事项页面

接下来，我们将通过HTML和CSS创建一个功能简单但美观的待办事项页面，包含以下元素：

• 渐变背景
• 白色主容器（带圆角）
• 标题
• 输入框和按钮（横向排列）
• 三个待办事项（包含复选框、任务名称和删除按钮）

1. 设置渐变背景

我们希望页面背景从紫色渐变到蓝色。打开浏览器，右键检查参考页面的背景，获取CSS代码：

body {
    background: linear-gradient(to right, rgb(123, 67, 151), rgb(66, 103, 178));
}

将以上CSS写入 index.html 的 <style> 标签中：

<style>
    body {
        background: linear-gradient(to right, rgb(123, 67, 151), rgb(66, 103, 178));
    }
</style>

保存并刷新，页面背景变为渐变色。

2. 创建主容器

在 <body> 中添加一个白色容器，设置宽度、高度、圆角和居中：

<div class="todo-app"></div>

CSS样式：

.todo-app {
    width: 98%;
    height: 500px;
    background: #ffffff;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 1%;
    box-sizing: border-box;
}

• width: 98%：容器宽度占页面98%，自适应屏幕。
• border-radius: 5px：圆角效果。
• box-sizing: border-box：确保内边距不影响容器尺寸。

3. 添加标题

在 <div class="todo-app"> 中添加标题：

<div class="title">XXX的To-Do App</div>

CSS样式：

.title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    padding-top: 30px;
}

• text-align: center：水平居中。
• padding-top: 30px：标题与容器顶部距离。

4. 输入框和按钮

在标题下方添加输入框和按钮，包裹在一个容器中以实现横向排列：

<div class="todo-form">
    <input class="todo-input" placeholder="Add To-Do">
    <div class="add-todo">Add To-Do</div>
</div>

CSS样式：

.todo-form {
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
}

.todo-input {
    width: 60%;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 5px005px;
    padding-left: 15px;
    outline: none;
}

.add-todo {
    width: 100px;
    height: 50px;
    background: linear-gradient(to right, rgb(123, 67, 151), rgb(66, 103, 178));
    color: #ffffff;
    border-radius: 05px5px0;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    user-select: none;
}

• display: flex：使输入框和按钮横向排列。
• border-radius: 5px 0 0 5px：输入框左侧圆角。
• cursor: pointer：按钮悬停时显示手指图标。

5. 待办事项列表

添加三个待办事项，每个包含复选框、任务名称和删除按钮：

<div class="item done">
    <input type="checkbox" checked>
    <span class="name">吃饭</span>
    <span class="del">删除</span>
</div>
<div class="item">
    <input type="checkbox">
    <span class="name">学习</span>
    <span class="del">删除</span>
</div>
<div class="item">
    <input type="checkbox">
    <span class="name">运动</span>
    <span class="del">删除</span>
</div>

CSS样式：

.item {
    display: flex;
    align-items: center;
    margin: 20px30px;
    box-shadow: 02px4pxrgba(0, 0, 0, 0.1);
}

.name {
    flex: 1;
    margin-left: 10px;
}

.del {
    color: red;
    cursor: pointer;
}

.done {
    text-decoration: line-through;
    opacity: 0.4;
}

• align-items: center：垂直居中。
• box-shadow：添加阴影效果。
• text-decoration: line-through：完成任务显示删除线。

6. 完整代码

以下是完整的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXX的To-Do App</title>
    <style>
        body {
            background: linear-gradient(to right, rgb(123, 67, 151), rgb(66, 103, 178));
        }
        .todo-app {
            width: 98%;
            height: 500px;
            background: #ffffff;
            border-radius: 5px;
            margin-top: 40px;
            margin-left: 1%;
            box-sizing: border-box;
        }
        .title {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            padding-top: 30px;
        }
        .todo-form {
            display: flex;
            margin-top: 20px;
            margin-left: 30px;
        }
        .todo-input {
            width: 60%;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 5px005px;
            padding-left: 15px;
            outline: none;
        }
        .add-todo {
            width: 100px;
            height: 50px;
            background: linear-gradient(to right, rgb(123, 67, 151), rgb(66, 103, 178));
            color: #ffffff;
            border-radius: 05px5px0;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            user-select: none;
        }
        .item {
            display: flex;
            align-items: center;
            margin: 20px30px;
            box-shadow: 02px4pxrgba(0, 0, 0, 0.1);
        }
        .name {
            flex: 1;
            margin-left: 10px;
        }
        .del {
            color: red;
            cursor: pointer;
        }
        .done {
            text-decoration: line-through;
            opacity: 0.4;
        }
    </style>
</head>
<body>
    <div class="todo-app">
        <div class="title">XXX的To-Do App</div>
        <div class="todo-form">
            <input class="todo-input" placeholder="Add To-Do">
            <div class="add-todo">Add To-Do</div>
        </div>
        <div class="item done">
            <input type="checkbox" checked>
            <span class="name">吃饭</span>
            <span class="del">删除</span>
        </div>
        <div class="item">
            <input type="checkbox">
            <span class="name">学习</span>
            <span class="del">删除</span>
        </div>
        <div class="item">
            <input type="checkbox">
            <span class="name">运动</span>
            <span class="del">删除</span>
        </div>
    </div>
</body>
</html>