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

本教程将指导您使用HTML和CSS创建第一个网页，我们通过创建一个简单的HTML结构来构建网页骨架，包括`、、和`标签，我们添加文本、图片等元素，并使用CSS进行美化，设置字体、颜色及布局，我们学习添加超链接、列表和表格等丰富内容，并利用响应式设计提升网页的适应性和用户体验，完成后的网页将清晰展示信息，并能在不同设备上自适应显示。

在数字化时代,网页已经成为信息传播的重要渠道，掌握HTML和CSS基础技能，是我们进入这个世界的必经之路，本文将详细指导大家如何从零开始，一步步打造出属于自己的第一个网页。

HTML基础：构建网页骨架

HTML简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言，它定义了网页内容的结构和样式，是网站开发的基础。

开始你的第一个网页

我们需要一个文本编辑器来编写HTML代码,常见的文本编辑器有记事本、Sublime Text、Visual Studio Code等，选择一个合适的文本编辑器后，新建一个文件，并将其保存为.html格式，例如index.html。

在文件中输入以下基本HTML结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html> 声明文档类型，告诉浏览器这是一个HTML5文档。
<html lang="zh"> 设置网页语言为中文。
<head> 部分包含元数据，如字符集、视口设置和网页标题。
<meta charset="UTF-8"> 确保网页内容以UTF-8编码显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 使网页在移动设备上正确显示，` 标签设置网页标题，出现在浏览器标签页上。

添加页面内容

在<body>标签内，我们可以添加文本、图片、链接等各种网页元素。

<h1>欢迎来到我的网页</h1>
<p>这是一个简单的段落。</p>
<img src="example.jpg" alt="示例图片">
<a href="https://www.example.com">点击访问示例网站</a>

CSS基础：美化网页

CSS简介

CSS（Cascading Style Sheets，层叠样式表）用于定义网页的样式，它使得文档的结构和内容更加易读易懂。

为网页添加样式

要在HTML文档中应用样式,需要使用<style>标签或外部CSS文件，这里我们使用<style>标签，在<head>部分添加以下代码：

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    h1 {
        color: #333;
    }
    p {
        color: #666;
        font-size: 16px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    a {
        color: #007BFF;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
</style>

这段代码设置了网页的字体、背景色、标题颜色、段落颜色和大小等样式。