HTML + CSS 网页制作入门完全教程：从零写出你的第一个网页

适用人群：想学做网站但不知道从哪下手的小白、被"前端"吓到的人、想给项目做个落地页/个人主页的人。 学完你能做到：用记事本写出带标题、图片、按钮、排版的网页，并在浏览器里打开看到效果。 配合之前发的《JavaScript 入门》食用更佳——HTML 是骨架，CSS 是皮肤，JS 是灵魂。

一、三件套的关系（先建立认知）

| 技术 | 角色 | 比喻 | |||| | HTML | 结构与内容 | 人体的骨头和器官 | | CSS | 样式与排版 | 穿的衣服、长相 | | JavaScript | 交互与逻辑 | 会动的神经反应 |

本文搞定前两个。一个最朴素的网页，本质是一个 .html 文本文件。

二、你的第一个网页（3 步）

  1. 桌面新建文件 index.html（注意后缀是 .html）。
  2. 用记事本打开，粘贴下面内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1
内容摘要

一句话概述：适用人群：想学做网站但不知道从哪下手的小白、被"前端"吓到的人、想给项目做个落地页/个人主页的人。

你将了解到：

  • 三件套的关系（先建立认知）
  • 你的第一个网页（3 步）
  • HTML 常用标签（搭骨架）
  • 让网页变好看（三种写法）
  • CSS 核心
  • Flexbox 一行搞定居中

适合人群：想快速判断这篇内容值不值得读的读者。

全文共 9 个章节，按「三件套的关系（先建立认知） → Flexbox 一行搞定居中」的顺序展开，每节都能单独查阅，配有可直接照做的清单与模板。

内容侧重可落地的操作流程与常见坑点，读完就能对照自己的情况动手，不需要额外补理论基础。

以上为全文要点速览，完整内容需解锁后阅读

🔒 登录后查看全文

登录后即可查看完整内容