HTML和CSS基础，打造你的第一个网页

本教程将教您如何使用HTML和CSS创建基本网页，您需要学习HTML的基本标签和结构，以便在网页中添加文本、图片等元素，我们将探讨CSS的基础知识，包括选择器、样式属性和值等，以帮助您设置字体、颜色、背景等样式，通过编写一个简单的HTML文件和相应的CSS文件，您可以创建一个包含标题、段落和列表的第一个网页，此教程旨在为您提供一个起点，帮助您在互联网上创建和管理网站。

在数字化时代,网页已经成为了信息传播的重要渠道，无论是个人网站、企业官网还是在线课程，都需要通过HTML（超文本标记语言）和CSS（层叠样式表）来构建和维护，对于初学者来说，掌握HTML和CSS基础知识是迈向成功的第一步，本文将详细介绍如何使用HTML和CSS来创建一个简单的网页。

HTML基础

1 标签与属性

HTML文档由一系列的标签组成,这些标签定义了网页的结构和内容。<p>标签用于定义段落，<h1>到<h6>标签用于定义标题，<a>标签用于创建链接等。

每个HTML标签都包含属性,这些属性提供了关于标签的附加信息。<img>标签用于插入图片，其src属性指定了图片的URL地址。

2 创建结构

要创建一个基本的HTML页面结构,需要遵循以下步骤：

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：根元素，包含整个页面的内容。
<head>：包含元数据，如文档标题、字符编码等。
<body>：包含页面的主体内容。

CSS基础

1 选择器与样式

CSS用于定义网页的外观和格式,它通过选择器来选择HTML元素，并应用相应的样式，选择器可以是标签名、类名、ID名或属性名。

在CSS中,可以设置多种样式属性，如颜色、字体、边距、填充等，要设置段落的颜色和字体大小，可以使用以下代码：

p {
  color: blue;
  font-size: 16px;
}

2 应用样式

要将CSS样式应用到HTML元素上,有两种主要方法：

内联样式：直接在HTML元素的标签中指定style属性。<p style="color: red;">。
外部样式：将CSS代码放在外部文件中，并使用<link>标签将其链接到HTML文档。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

打造你的第一个网页

1 创建HTML结构

创建一个包含基本结构的HTML文件,命名为index.html：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">我的第一个网页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个简单的网页示例。</p>
</body>
</html>

2 添加CSS样式

创建一个外部CSS文件,命名为styles.css，并添加一些基本的样式：

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
h1 {
  color: darkblue;
  text-align: center;
}
p {
  color: darkred;
  font-size: 18px;
}

保存这两个文件,并在浏览器中打开index.html文件，你应该能看到一个简单的网页，标题为“欢迎来到我的网站”，段落文字为“这是一个简单的网页示例。”

通过本文的介绍,你应该对HTML和CSS有了基本的了解，并能够创建自己的第一个网页，随着学习的深入，你可以进一步探索JavaScript等更多网页开发技术，不断提升自己的网页制作能力。