网页到底是什么

你在浏览器地址栏输入一个网址，回车，出现了一个页面——这个过程背后发生了什么？

简单来说：

你的浏览器  →  向服务器发送请求  →  服务器返回一堆代码  →  浏览器把这堆代码渲染成你看到的页面

这堆代码就是网页的源代码。在浏览器里右键 → 查看页面源代码，你就能看到它长什么样。

网页的三个组成部分

任何一个网页，底层都是由三种语言写的：

语言作用类比
HTML搭结构房子的骨架和墙壁
CSS管样式墙的颜色、家具的摆放
JavaScript做交互电灯开关、水龙头

HTML：网页的骨架

HTML 用标签来描述内容。每个标签用尖括号包起来：

<h1>这是一级标题</h1>
<p>这是一个段落。</p>
<a href="https://www.baidu.com">这是一个链接</a>
<img src="图片地址" />

所有标签都是成对出现的：开始标签 <p> 和结束标签 </p>，中间是内容。

CSS：网页的皮肤

CSS 控制样式——颜色、大小、位置、动画。

h1 {
    color: red;          /* 标题变红色 */
    font-size: 24px;     /* 字号 24 像素 */
}

JavaScript：网页的大脑

JS 让网页能"动"——点击按钮弹窗、表单验证、动态加载内容，全都是 JS 做的。

// 点击按钮弹出一个提示框
document.querySelector("button").onclick = function() {
    alert("你点击了按钮！");
};

一个完整的网页长什么样

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

把它保存成 .html 文件，双击打开，浏览器就能显示。

什么是服务器？什么是前端后端？

  • 前端：在浏览器里跑的代码（HTML + CSS + JS），用户能看到、能交互的东西
  • 后端：在服务器上跑的代码（Python、Java、Node.js 等），处理数据、管用户登录、读写数据库
  • 服务器：一台永远开机的电脑，等别人来访问

这个博客是纯前端的，不需要后端，所以可以免费托管在 GitHub Pages 上。

你应该怎么学

不要一开始就啃大本的 HTML/CSS 教材。 正确姿势是：

  1. 打开浏览器 F12（开发者工具），看任意网站的源代码
  2. 跟着教程写一个最简单的网页（一个 HTML 文件就够了）
  3. 边做边查，碰到不懂的标签就搜
  4. 慢慢加上 CSS 让它变好看，加上 JS 让它能交互

学了不用等于白学。 每一节看完，立刻打开 VS Code 写一遍。

推荐资源

  • MDN Web Docs（搜 “MDN HTML 教程”）— 最权威的免费文档
  • 用 VS Code 装 Live Server 插件，改了代码浏览器自动刷新
  • 把写的东西传上 GitHub Pages，和别人分享

下一步

下一篇文章会讲 HTML 常用标签的实际操作——写一个带标题、段落、图片、链接的真实页面。