使用 HTML 和 CSS 制作网页的详细指南

前言

在现代 Web 开发中，HTML 和 CSS 是构建网页的基础技术。HTML（超文本标记语言）用于定义网页的结构和内容，而 CSS（层叠样式表）用于控制网页的外观和布局。掌握这两项技术是制作现代网页的第一步。

本篇文章将详细介绍如何使用 HTML 和 CSS 制作一个简单的网页，从基本结构到页面样式，帮助你快速上手网页开发。

一、HTML 基础

1.1 什么是 HTML？

HTML（HyperText Markup Language）是用于定义网页内容的标记语言。它通过一系列标签将内容结构化，使浏览器能够理解并渲染网页。常见的 HTML 元素包括标题、段落、图片、链接等。

1.2 HTML 文档的基本结构

每个 HTML 文档都有固定的基本结构，包括 声明、 根元素、 头部元素和 主体元素。以下是一个简单的 HTML 文件结构：

DOCTYPE html>
html lang="zh-CN">
head>
  meta charset="UTF-8">
  meta name="viewport" content="width=device-width, initial-scale=1.0">
  title> 我的网页 title>
head>
body>
  h1> 欢迎来到我的网页 h1>
  p> 这是一个简单的 HTML 页面示例。p>
body>
html>

在这个示例中，

是一级标题标签，

是段落标签， 标签用于定义页面的字符集和视口设置， 标签用于设置网页标题。

1.3 常见的 HTML 标签

• 标题标签 ：从
  

  到

  ，用于定义不同层级的标题。

  为最大标题，

  为最小标题。

• 段落标签 ：

  标签用于定义段落。

• 链接标签 ： 标签用于创建超链接，使用 href 属性指定链接地址。
• 图片标签 ： 标签用于嵌入图片，使用 src 属性指定图片路径，alt 属性用于提供图片的替代文本。

二、CSS 基础

2.1 什么是 CSS？

CSS（Cascading Style Sheets）是用于控制网页外观的样式表语言。通过 CSS，开发者可以定义网页元素的颜色、字体、布局、大小等外观属性。CSS 可以嵌入到 HTML 文件中，也可以通过外部文件进行引入。

2.2 将 CSS 添加到 HTML

有三种方式将 CSS 添加到 HTML 页面中：

1. 行内样式 ：通过元素的 style 属性直接添加 CSS 样式。
2. 内部样式表 ：将 CSS 写在


   标签中，通常放置在 部分。

3. 外部样式表 ：通过 标签引入外部 CSS 文件。

示例：行内样式

"color: red;"> 这是一个红色的段落。

示例：内部样式表

DOCTYPE html>
html lang="zh-CN">
head>
  meta charset="UTF-8">
  title> 内部样式表示例 title>
  style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-family: "Arial", sans-serif;
      font-size: 20px;
    }
  style>
head>
body>
  h1> 我的网页 h1>
  p> 这是一个使用内部样式表的网页示例。p>
body>
html>