手把手教你写第一个网页—HTML与CSS基础入门

本教程指导你创建首个网页，涵盖HTML和CSS基础知识，学习HTML定义文档结构，如标题、段落、链接和图像，使用CSS定制网页外观，包括字体、颜色、间距和布局，实践通过构建简单的网页布局并应用样式，如使用浮动和定位展示内容，理解响应式设计的重要性，并学会为不同设备优化网页。

在数字化时代，掌握基础的网页设计技能对于每个人来说都是一项宝贵的资产，无论你是刚刚开始探索互联网世界的新手，还是希望提升自己技能的资深用户，学习如何使用HTML和CSS来创建和管理网站都是非常必要的，本文将详细介绍如何从零开始,一步步地学会编写自己的第一个网页。

第一部分：HTML基础

HTML概述

超文本标记语言（HTML）是用来构建网页的标准标记语言，它允许你通过一系列标签来描述网页的结构和内容，HTML文档通常由<!DOCTYPE html>声明开始，后面紧跟着<html>标签，而<html>标签内部又包含了<head>和<body>两个主要部分。

HTML基本标签

<html>: 定义整个HTML文档的范围。
<head>: 包含关于文档的元数据，如文档的标题、字符集、样式表链接等，`: 定义浏览器标签页上显示的标题。
<body>: 包含了可见的网页内容，如文本、图片、链接等。

创建你的第一个HTML页面

打开一个文本编辑器，如Notepad（记事本）或Sublime Text。
输入以下代码，并保存为index.html。

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

保存文件后，找到你的文件所在的文件夹,并双击打开它以在浏览器中预览你的网页。

第二部分：CSS基础

层叠样式表（CSS）是一种用于控制网页外观和格式化的语言，通过使用CSS，你可以控制网页元素的布局、颜色、字体等属性，CSS分离了HTML文档的结构和表现,使得网页更易于维护和更新。

CSS基本语法

选择器：用来指定应用样式的HTML元素。
属性：描述了要改变的样式特性。
值：对应属性的具体取值。

创建你的第一个CSS样式表

创建一个新的文本文件，并将其命名为styles.css。
输入以下代码：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: #333;
    text-align: center;
}
p {
    color: #666;
    line-height: 1.6;
}

保存文件后，在你的HTML文件的<head>部分添加一个链接到CSS文件的标签：

<!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>