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

本文将教您如何使用HTML和CSS制作您的第一个网页，介绍HTML的基本结构，包括`、和`标签，并讲解如何插入文本、图片和链接，阐述CSS的重要性，它用于设置网页样式和布局，通过实例演示如何用CSS调整字体、颜色、边框等属性，解释网页的响应式设计，以适应不同设备和屏幕尺寸，掌握这些技能后，您即可创建属于自己的首个网页。

在数字化时代，掌握网页设计的基础知识至关重要，网页主要由HTML（超文本标记语言）和CSS（层叠样式表）构成,本文将引导你一步步学习并制作自己的第一个网页。

HTML基础

HTML是创建网页的标准标记语言，通过标记标签,我们可以描述网页的结构和内容。

基本结构

网页的最小单位是标签，最常用的标签包括<!DOCTYPE html>、<html>、<head>和<body>。<!DOCTYPE html>声明文档类型；<html>标签包裹整个HTML文档；<head>包含元数据，如标题和字符编码；<body>则包含可见的网页内容。

标签种类

HTML有多种标签，用于表示文本、链接、图片、列表等,以下是一些常用标签：

文本标签：<h1>至<h6>；<p>表示段落。
链接标签：<a href="URL">链接文本</a>创建超链接。
图片标签：<img src="URL" alt="图片描述">插入图片。
列表标签：<ul>表示无序列表；<ol>表示有序列表；<li>表示列表项。

CSS基础

CSS用于描述HTML文档的样式，通过选择器和属性,我们可以控制网页的外观。

选择器

选择器用于定位HTML元素，对其进行样式设置,常见的选择器包括：

元素选择器：直接使用元素名作为选择器，如p、h1等。
类选择器：以开头，后面跟类名，如.class-name。
ID选择器：以开头，后面跟ID名，如#id-name。

属性选择器

属性选择器用于根据元素的属性及其值进行样式设置。[href]选择具有href属性的元素。

实战演练：制作第一个网页

我们将通过一个简单的实例来巩固所学知识。

创建HTML文件：使用文本编辑器创建一个新文件，将其命名为index.html。
编写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>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个使用HTML和CSS制作的个人主页。</p>
    <a href="https://www.example.com">点击访问example.com</a>
    <img src="https://via.placeholder.com/150" alt="示例图片">
</body>
</html>