从零开始：手把手教你制作第一个静态网页（附完整代码）前端小白必看！HTML 和 CSS 入门教程：打造你的第一个网页新手友好：用 HTML 和 CSS 制作简单而美观的个人主页超详细教程：零基础

南北极之间

于 2024-10-02 20:29:21 发布

阅读量454

点赞数 10

文章标签：前端 html css 大学生期末大作业前端初学者前端初学者教程前端入门

本文链接：https://blog.csdn.net/qq_22182989/article/details/142684768

版权

使用 HTML 和 CSS 制作一个简单的静态网页（完整代码在后面）

在这里插入图片描述

步骤

对于前端初学者来说，制作一个简单的静态网页是入门的第一步。今天，我们将一起学习如何使用 HTML 和 CSS 创建一个包含文本、图片和链接的静态网页，帮助你快速掌握基本的网页制作技能。

一、新建一个 HTML 项目

首先，创建一个新的 HTML 文件，命名为 index.html。你可以使用任何代码编辑器，如 VSCode、Sublime Text 或 Notepad++。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个静态网页</title>
</head>
<body>

</body>
</html>

二、创建基本结构

在 <body> 标签中，添加网页的基本内容，包括标题、段落和列表。

<body>
    <h1>欢迎来到我的个人主页</h1>
    <p>大家好，我是前端开发初学者，这是我制作的第一个静态网页。</p>

    <h2>我的兴趣爱好</h2>
    <ul>
        <li>编程</li>
        <li>阅读</li>
        <li>音乐</li>
        <li>旅行</li>
    </ul>
</body>

<h1> 和 <h2> 标签用于标题。
<p> 标签用于段落文本。
<ul> 和 <li> 标签用于无序列表。

三、使用 CSS 美化页面

在 <head> 标签中，添加 <style> 标签，编写页面的样式。

<head>
    <meta charset="UTF-8">
    <title>我的第一个静态网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f4f4f4;
        }

        h1, h2 {
            color: #333;
        }

        p {
            font-size: 18px;
            color: #666;
        }

        ul {
            list-style-type: square;
            color: #555;
        }

        li {
            margin-bottom: 5px;
        }
    </style>
</head>

设置了字体、背景色和文本颜色。
调整了标题和段落的样式。

四、添加图片和链接

在网页中插入一张图片和一些链接，使页面内容更加丰富。

<body>
    <!-- 之前的内容 -->
    <!-- ... -->

    <h2>我的照片</h2>
    <img src="your-photo.jpg" alt="我的照片" width="200">

    <h2>联系我</h2>
    <p>你可以通过以下方式联系我：</p>
    <ul>
        <li><a href="mailto:your-email@example.com">发送邮件</a></li>
        <li><a href="https://github.com/your-username" target="_blank">访问我的 GitHub</a></li>
    </ul>
</body>

使用 <img> 标签插入图片，记得将 src 属性替换为你的图片路径。
使用 <a> 标签创建超链接，href 属性为链接地址。

更新 CSS 样式，调整图片和链接的样式：

img {
    border-radius: 50%;
    margin-top: 10px;
}

a {
    color: #0088cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

完整代码

将以上部分组合在一起，得到完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个静态网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f4f4f4;
        }

        h1, h2 {
            color: #333;
        }

        p {
            font-size: 18px;
            color: #666;
        }

        ul {
            list-style-type: square;
            color: #555;
        }

        li {
            margin-bottom: 5px;
        }

        img {
            border-radius: 50%;
            margin-top: 10px;
        }

        a {
            color: #0088cc;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的个人主页</h1>
    <p>大家好，我是前端开发初学者，这是我制作的第一个静态网页。</p>

    <h2>我的兴趣爱好</h2>
    <ul>
        <li>编程</li>
        <li>阅读</li>
        <li>音乐</li>
        <li>旅行</li>
    </ul>

    <h2>我的照片</h2>
    <img src="your-photo.jpg" alt="我的照片" width="200">

    <h2>联系我</h2>
    <p>你可以通过以下方式联系我：</p>
    <ul>
        <li><a href="mailto:your-email@example.com">发送邮件</a></li>
        <li><a href="https://github.com/your-username" target="_blank">访问我的 GitHub</a></li>
    </ul>
</body>
</html>