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

本教程将教您如何从头开始创建第一个网页，包括HTML和CSS的基础知识，我们将了解HTML的基本语法和结构，如标签、属性和文档对象模型（DOM），我们将学习如何使用CSS来设计网页的布局和外观，包括选择器、样式属性和盒模型，通过一个简单的实例，我们将演示如何将HTML和CSS结合起来创建一个基本的网页，跟随我们的步骤，您将掌握网页设计的基本技能，并能够创建属于自己的独特网页。

在数字化时代,网页设计已成为连接世界的重要桥梁，作为一名合格的网页设计师，掌握HTML和CSS基础知识是必不可少的第一步，本文将为你详细讲解如何使用HTML和CSS编写你的第一个网页。

HTML基础：构建网页骨架

HTML概述

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言，它允许你通过一系列标签来描述网页的结构和内容。

标签与属性

HTML使用标签来定义网页中的各个部分,如标题、段落、链接等，每个标签都由开始标签和结束标签组成，并可能包含属性以提供额外信息。

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问example.com</a>
</body>
</html>

在这个示例中,<!DOCTYPE html> 声明了文档类型，<html> 标签是整个网页的根元素，<head> 和 <body> 分别包含网页的元数据和可见内容。

常用标签

以下是一些常用的HTML标签：

<header>：定义网页的头部。
<nav>：创建导航链接。
<main>：定义文档的主要内容。
<article>：表示独立的、可复用的内容。
<section>：将文档分成不同的区域。
<footer>：定义网页的底部。

CSS基础：美化网页

CSS概述

CSS（Cascading Style Sheets，层叠样式表）用于控制网页的外观和布局，通过将样式与HTML结构分离，CSS提高了代码的可维护性和复用性。

选择器与声明块

CSS使用选择器来指定应用样式的HTML元素,选择器可以是元素类型、类名、ID或属性等，声明块包含一组CSS属性及其值，用于定义元素的样式。

示例：

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

在这个示例中,body 是选择器，h1 和 p 是子选择器。font-family、background-color、color、text-align 和 font-size 等是CSS属性。