HTML 与 CSS 入门教程：零基础写第一个网页

发布日期：2026 年 6 月阅读时长：约 35 分钟作者：XinYuMaTou 团队

导读：也许你已经用 WordPress 搭建了一个网站，但偶尔想改一下字体、调整一下颜色、添加一段自定义内容时，却对"代码"感到恐惧。其实 HTML 和 CSS 并不难——它们不是真正的编程语言，只是"描述文档结构和外观"的标记语言。花 30 分钟读完这篇教程，你就能从零开始写出第一个网页。

📖 目录

网页的构成：HTML + CSS + JavaScript
HTML 基础标签详解
你的第一个 HTML 页面（记事本实战）
CSS 的三种写法：内联 / 内部 / 外部样式表
常用 CSS 属性：颜色、字体、间距、边框、背景
Flexbox 布局入门：轻松实现任意排版
响应式设计：让网页在手机上也好看
实战项目：从零搭建响应式个人作品集
浏览器开发者工具（F12）的使用方法
下一步学习路径推荐
常见问题 FAQ
总结与免费学习资源

1. 网页的构成：HTML + CSS + JavaScript

现代网页由三种基础技术构成，它们各自承担不同角色：

技术	角色	类比	你会学到
HTML（超文本标记语言）	骨架与内容	房子的钢筋结构、墙和房间	定义标题、段落、图片、链接、表格
CSS（层叠样式表）	外观与样式	房子的装修：墙漆、家具、灯光	控制颜色、字体、布局、动画
JavaScript	行为与交互	房子的电器：空调、门铃、灯光开关	响应用户点击、表单验证、动态效果

2. HTML 基础标签详解

HTML 使用"标签（Tag）"来标记内容。标签通常是成对出现的：一个开始标签和一个结束标签，中间包裹的就是内容。

① 文档结构标签

<!DOCTYPE html>                 <!-- 声明这是一个 HTML5 文档 -->
<html lang="zh-CN">             <!-- 文档根元素，lang 声明语言 -->
<head>
    <meta charset="UTF-8">       <!-- 字符编码：必须写 UTF-8 才能显示中文 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题 - 出现在浏览器标签页</title>
</head>
<body>
    这里写所有可见的内容：标题、段落、图片、链接...
</body>
</html>

② 文本标签

标签	作用
`<h1>-<h6>`	六级标题（h1 最大，每个页面只有一个 h1）
`<p>`	段落
`<strong>`	加粗（语义上表示"重要"）
`<em>`	斜体（语义上表示"强调"）
`<br>`	换行（单标签，不需要结束标签）
`<hr>`	水平分割线
`<blockquote>`	引用块

③ 链接与图片

<!-- 链接 <a> -->
<a href="https://example.com" target="_blank">点击访问 Example</a>
<!-- href = 网址；target="_blank" = 在新标签页打开 -->

<!-- 图片 <img>（单标签） -->
<img src="images/photo.jpg" alt="一张风景照片" width="400">
<!-- src = 图片路径；alt = 图片描述（SEO 和无障碍必备） -->

④ 列表与表单

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>起床</li>
    <li>洗脸</li>
</ol>

<!-- 表单：文本输入 + 提交按钮 -->
<form action="/submit.php" method="POST">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="username">
    <button type="submit">提交</button>
</form>

⑤ 语义化标签（HTML5 新增）

让代码可读性更强，对搜索引擎和屏幕阅读器更友好：

<header>   页面头部 / 页眉   </header>
<nav>        导航菜单区域    </nav>
<main>       主要内容区      </main>
<section>    内容章节/段落   </section>
<article>    独立的文章内容  </article>
<aside>      侧边栏内容      </aside>
<footer>     页脚            </footer>

3. 你的第一个 HTML 页面（记事本实战）

不需要任何特殊软件，你电脑里自带的记事本就够了。

打开记事本（或更好的选择：安装免费的 VS Code）。
复制上面的完整 HTML 结构，写一些你自己的内容。
保存文件时，文件名写 index.html，保存类型选择"所有文件"。
双击文件，它会在浏览器中打开，你就能看到自己的第一个网页了！

4. CSS 的三种写法

CSS 语法非常简单：选择器 { 属性: 值; }，意思是"选中这些元素，让它们长这样"。但 CSS 有三种"写在哪里"的方式：

① 内联样式（Inline Style）—— ❌ 不推荐

直接写在 HTML 标签的 style 属性中：

<h1 style="color: red; font-size: 24px;">红色大标题</h1>

② 内部样式表（Internal Style Sheet）—— ⚠️ 单页面可用

把所有 CSS 写在 <style> 标签内，放在 <head> 里。当前页面有效，其他页面无法共享。

③ 外部样式表（External Style Sheet）—— ✅ 强烈推荐

把 CSS 写在一个独立的 .css 文件中，所有页面通过 <link> 标签引入。一处修改，全站生效。

<!-- 在 HTML 的 <head> 中引入 -->
<link rel="stylesheet" href="style.css">

<!-- 然后在 style.css 文件中写样式 -->
body {
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

h1 {
    color: #1a1a1a;
    font-size: 2.2rem;
}

5. 常用 CSS 属性：颜色、字体、间距、边框、背景

选择器基础

p { color: #333; }           /* 标签选择器：所有 <p> */
.highlight { background: yellow; }  /* 类选择器：class="highlight" 的元素 */
#main-title { font-size: 3rem; }    /* ID 选择器：id="main-title" 的元素 */
a:hover { color: red; }      /* 伪类：鼠标悬停在链接上时 */
nav ul li { margin: 5px; }   /* 组合选择器：nav 下 ul 下的 li */
h1, h2, h3 { font-weight: 700; }  /* 同时选中多个 */

颜色表示方法

p {
    color: red;                    /* 颜色名 */
    color: #ff0000;                /* 十六进制 #RRGGBB —— 最常用 */
    color: rgb(255, 0, 0);         /* RGB（红, 绿, 蓝） */
    color: rgba(255, 0, 0, 0.5);   /* RGBA：多一个透明度（0-1） */
}

字体与排版

body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;        /* 字号：推荐使用 rem（1rem = 16px） */
    font-weight: 400;       /* 字重：400=常规，700=粗体 */
    line-height: 1.8;       /* 行高：1.8 倍字号，中文推荐 1.6-2.0 */
    color: #333;            /* 文字颜色 */
    text-align: left;       /* 对齐：left / center / right */
}

盒子模型：Padding + Border + Margin

每个 HTML 元素都是一个"盒子"，它有 4 层：内容 → 内边距 padding → 边框 border → 外边距 margin。

.box {
    padding: 20px;              /* 内边距：内容与边框的距离 */
    padding: 10px 20px;         /* 上下 10px，左右 20px */
    padding: 10px 20px 30px 20px; /* 上 右 下 左（顺时针） */

    margin: 20px;               /* 外边距：元素与其他元素的距离 */
    margin: 0 auto;             /* 经典技巧：水平居中 */

    border: 1px solid #ccc;     /* 边框：粗细 样式 颜色 */
    border-radius: 8px;         /* 圆角 —— 越大越圆 */

    background: #f5f7fa;        /* 背景色 */
    background: linear-gradient(135deg, #00d4aa, #00b894); /* 渐变背景 */

    width: 300px;
    max-width: 100%;            /* 响应式：最大不超过容器宽度 */
}

6. Flexbox 布局入门：轻松实现任意排版

Flexbox 是 CSS3 中最强大的布局工具——它让"水平居中、垂直居中、等分宽度、自动排列"这些曾经的难题变得异常简单。

.container {
    display: flex;               /* 声明：我是 Flex 容器 */
    flex-direction: row;         /* 主轴方向：row=横向（默认） */
    justify-content: center;     /* 主轴（水平）对齐 */
    align-items: center;         /* 交叉轴（垂直）对齐 */
    gap: 20px;                   /* 子元素间距 */
    flex-wrap: wrap;             /* 一行排不下自动换行 */
}

.item {
    flex: 1;                     /* 所有子元素等分剩余空间 */
}

justify-content 的值	效果
`flex-start`	左对齐（默认）
`flex-end`	右对齐
`center`	居中对齐 ✨
`space-between`	两端对齐，中间等分——经典导航布局
`space-around`	每个元素周围留相等空间

🎯 记住两句话就能用好 Flex：想让谁布局，就把它的父元素设为 display: flex；水平方向用 justify-content，垂直方向用 align-items。

7. 响应式设计：让网页在手机上也好看

"响应式"意思是：同一个网页在不同尺寸的屏幕上自动调整到最合适的布局。核心工具是媒体查询（Media Query）。

① 第一步：viewport meta 标签（必须写！）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有它，手机浏览器会用"桌面视图"缩小显示，内容看起来非常小。

② 媒体查询（Media Query）

/* 默认：桌面端样式 */
.container { width: 900px; padding: 3rem; }

/* 平板：屏幕宽度 ≤ 768px 时 */
@media (max-width: 768px) {
    .container { width: 100%; padding: 1.5rem; }
}

/* 手机：屏幕宽度 ≤ 480px 时 */
@media (max-width: 480px) {
    .grid { flex-direction: column; }  /* 横向布局改纵向堆叠 */
    h1 { font-size: 1.5rem; }
}

③ 响应式图片

img {
    max-width: 100%;    /* 图片最大不会超过容器宽度 */
    height: auto;       /* 高度按比例自动缩放，不变形 */
}

8. 实战项目：从零搭建响应式个人作品集

把前面学到的知识整合起来。项目结构：

my-portfolio/
├── index.html          <!-- 主页面 -->
└── style.css           <!-- 样式表 -->

在 index.html 中编写：顶部导航、Hero 英雄区（大标题 + 按钮）、关于我、作品展示卡片网格、联系方式、页脚。在 style.css 中用 Flex 做布局、用媒体查询做响应式、加上渐变背景和卡片阴影。

💡 学习方法：模仿优秀网站是最快的进步方式。打开你喜欢的网站，按 F12 看别人是怎么写的——这是每个前端开发者每天都在做的事。

9. 浏览器开发者工具（F12）的使用方法

按 F12 键（Mac 是 Cmd + Opt + I）打开浏览器自带的开发者工具：

Elements 面板：查看和编辑 HTML/CSS 实时预览——日常最常用。
Console 面板：查看报错、运行 JavaScript。
Network 面板：查看文件加载速度和大小——性能优化时用。
左上角箭头图标：点击后再点击页面元素，即可定位到它的 HTML/CSS。

10. 下一步学习路径推荐

CSS 进阶：学习 Grid 布局（比 Flex 更强大的二维布局）、CSS 动画（transition 和 animation）、CSS 变量。
JavaScript：学习变量、函数、事件、DOM 操作——让网页真正"动起来"。
框架：Vue.js（易上手，国内公司大量使用）或 React（全球最流行）。
实战：用学到的技术做 3-5 个完整项目，这比看 10 个教程都更有价值。

❓ 常见问题 FAQ

我应该先学 HTML 还是先学 WordPress？

两者不冲突。建议顺序：先学 HTML/CSS 基础（1-2 周）→ 用 WordPress 快速建站 → 后期回来继续深入 JavaScript。原因是：WordPress 虽然"开箱即用"，但你想自定义主题、修改样式、排查问题时，HTML/CSS 基础是必不可少的。

class 和 id 什么时候用哪个？

简单规则：class（. 开头）用于可复用的样式（多个元素可以共享同一个 class，这是你 95% 时间应该使用的）。id（# 开头）用于页面上唯一的元素（一个 id 在整个 HTML 中只能出现一次，通常用于锚点跳转或 JavaScript 精准选中某个元素）。

为什么我的 CSS 修改后浏览器看不到变化？

这是新手最常见的问题。排查顺序：① 浏览器缓存——按 Ctrl + F5 强制刷新试试；② CSS 文件路径写错了——检查 <link href="style.css"> 的路径是否正确；③ CSS 语法错误（缺少大括号、分号）——用 F12 打开 Console 会有错误提示；④ 选择器优先级冲突——多个规则作用于同一元素时，id 比 class 优先级高，内联样式最高。

有推荐的代码编辑器吗？

目前最流行、最强大的免费选择是 Visual Studio Code（VS Code）。它支持语法高亮、智能提示、Git 集成、海量插件。不建议继续用 Windows 自带的记事本——没有语法高亮，写代码非常容易出错。

🎯 总结与免费学习资源

HTML 和 CSS 是所有网页技术的基石——无论你以后学 WordPress 开发、React、Vue 还是 Node.js，这两个基础知识都会被反复用到。值得花时间把它们学好。

资源	网址	特色
MDN Web Docs	`developer.mozilla.org/zh-CN/`	最权威的 Web 文档，遇到不懂的属性在此查阅
Flexbox Froggy	`flexboxfroggy.com`	用游戏的方式学习 Flex 布局
CSS Grid Garden	`cssgridgarden.com`	游戏化学习 CSS Grid
Can I Use	`caniuse.com`	查询各浏览器对 CSS 特性的兼容性
菜鸟教程	`www.runoob.com`	中文友好，适合初学者快速查阅

最后一句忠告：学习编程最好的方式不是看更多的教程，而是动手写更多的代码。每个教程看完后，立刻花 2-3 倍的时间做一个小练习，把学到的知识变成自己的能力。

← 回到首页