HTML和CSS基础，手把手教你写第一个网页

本文将指导你创建一个简单的网页，用`定义文档类型，确保浏览器正确解析网页，在标签内添加和标签，用于存放元数据，如字符集和链接到样式表，而则放页面内容。，在中插入标签，设定网页标题，然后在中输入文本、图片等元素，并用至`标记设置标题，利用CSS修饰网页，设置字体、颜色及布局，完成这些步骤后，保存文档即可见。

在数字化时代，掌握网页设计的基础知识至关重要，网页主要由两部分组成：HTML（超文本标记语言）和CSS（层叠样式表），HTML负责构建网页的结构，而CSS则用于定义其样式,本文将引导你逐步学习如何使用HTML和CSS创建你的第一个网页。

第一步：HTML基础知识

HTML是一种标记语言，用于创建网页的结构，它使用一系列标签来定义不同的元素，如标题、段落、列表和链接等。

学习HTML的基本语法：了解如何使用<p>标签来定义段落，<h1>到<h6>等。
创建一个简单的HTML页面：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的HTML页面。</p>
</body>
</html>

在这个例子中，<!DOCTYPE html>声明了文档类型，<html>元素是整个页面的根元素，<head>元素包含了页面的元数据，如字符集和标题，而<body>元素则包含了可见的页面内容。

第二步：添加CSS样式

为了让网页更加美观，我们需要使用CSS来定义元素的样式，CSS可以让我们控制网页的布局、颜色、字体等。

内联样式：在HTML元素中使用style属性来添加CSS样式。

<p style="color: blue; font-size: 20px;">这是一段带有样式的文本。</p>

内部样式：将CSS样式放在HTML文档的<head>部分的<style>标签中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是一段带有样式的文本。</p>
</body>
</html>

外部样式：将CSS样式保存在外部文件中，并在HTML文档中通过<link>元素引用，创建一个CSS文件（例如styles.css）,并在其中编写样式规则：

/* styles.css */
p {
    color: blue;
    font-size: 20px;
}

在HTML文档的<head>部分添加以下代码来引用外部样式表：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一段带有样式的文本。</p>
</body>
</html>