简单易学的HTML和CSS静态网页制作代码指南

编辑：宝哥软件园来源：互联网时间：2025-04-13

CAD看图王老版本下载

评分

在现代互联网时代，网页设计已成为一项必备技能。无论是个人博客、企业官网，还是在线商店，网页都是信息传达的重要媒介。对于初学者来说，HTML（超文本标记语言）和CSS（层叠样式表）是制作静态网页的基础。本文将简要介绍HTML和CSS的基本概念，并提供一些简单易学的代码示例，帮助您快速入门静态网页制作。

一、HTML基础

HTML是构建网页的基础语言，它使用标签来定义网页的结构和内容。每个HTML文档通常由以下几个部分组成：

文档类型声明（DOCTYPE）

根元素（）

头部信息（）

主体部分（）

下面是一个简单的HTML文档示例：

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是我用HTML制作的第一个静态网页。</p>
</body>
</html>

在这个示例中，我们首先声明了文档类型（），然后定义了网页的基本结构。在部分，我们设置了字符编码和网页标题。在部分，我们添加了一个标题（

）和一段文本（
）。

二、CSS基础

CSS用于控制网页的外观和布局。通过CSS，我们可以更改文本的颜色、字体、间距、背景等。CSS的基本写法为选择器（选择要应用样式的HTML元素）和一组样式属性。

以下是一个简单的CSS样式示例：

h1 {
    color: blue; /* 文字颜色 */
    font-size: 24px; /* 字体大小 */
}
p {
    font-family: Arial, sans-serif; /* 字体 */
    line-height: 1.5; /* 行高 */
    margin: 20px 0; /* 上下外边距 */
}

在这个示例中，我们为

和
元素定义了不同的样式。蓝色的标题和使用Arial字体的段落，将使网页看起来更加美观。

三、将HTML和CSS结合起来

为了将HTML和CSS结合在一起，我们可以使用内联、内部和外部样式表。对于初学者来说，内部样式表最为简单，直接在部分添加CSS样式。以下是将CSS样式应用到HTML文档的示例：

简单易学的HTML和CSS静态网页制作代码指南图1

<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <title>我的第一个网页</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            font-family: Arial, sans-serif;
            line-height: 1.5;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是我用HTML和CSS制作的第一个静态网页。</p>
</body>
</html>

在这个示例中，我们将CSS样式嵌入了HTML文档中，使得样式和结构更加紧密结合。