第1节 互联网、Web与你的第一行代码
欢迎来到Web开发的世界！你可能每天都在使用它，但从未想过自己也能亲手建造它。本节的目标很简单：让你理解你即将进入的这片数字疆域是如何运转的，并让你亲手写下第一行属于你自己的“建筑蓝图”——代码。当你完成本节时，你将不再只是一个互联网的“居民”，而将成为它的“建设者”之一。
让我们从最熟悉却又最陌生的两个词开始：互联网和Web。
理解互联网与万维网
很多人会把“互联网”和“Web”混为一谈，其实它们是紧密相关但又不同的两层概念。你可以把互联网想象成遍布全球的、连接所有计算机的“高速公路系统”。它是一套硬件（如光缆、路由器、服务器）和软件协议（如TCP/IP）构成的基础设施，负责让数据在不同的计算机之间跑来跑去。互联网承载着电子邮件、文件传输、在线游戏等多种服务。
而Web，或者说万维网，则是跑在这条高速公路上的一种最受欢迎的“服务类型”。它像一个建立在互联网之上的、全球性的图书馆或信息空间。这个空间里的“书页”就是网页，它们通过超链接（就是你可以点击的那些带下划线的文字或图片）相互连接。我们通过一个叫做“浏览器”的软件（比如Chrome、Firefox）来访问和阅读这些网页。
一个简单的比喻是：互联网是“路网”，Web是路上跑的“出租车服务”。没有路，车跑不了；但路上不仅可以跑出租车（Web），还可以跑货车（文件传输）、邮车（电子邮件）等等。你学习Web开发，就是要学习如何制造和运营这种“出租车”，也就是创建网站和网页应用。
Web是如何工作的：一次点击背后的旅程
那么，当你在浏览器地址栏输入 www.example.com 并按下回车时，背后到底发生了什么？理解这个基本逻辑链，是你理解所有Web技术的基础。
整个过程始于你的“请求”。你的浏览器首先会像一个问路者，去一个叫“DNS服务器”的地方查询“www.example.com”这个好记的名字对应着互联网上哪台计算机的真实地址（也就是IP地址，类似“203.0.113.1”）。找到地址后，浏览器会沿着互联网这条“高速公路”，向那台存放着目标网站的计算机（我们称之为“服务器”）发送一个请求：“嘿，请把 www.example.com 的主页发给我！”
服务器收到请求后，会找到对应的文件——通常是一个以 .html 结尾的文本文件——并将其内容打包进一个“响应”包裹里，沿着网络原路发回给你的浏览器。你的浏览器收到这个包裹后，会打开它，并按照文件里的“说明书”（也就是我们即将学习的HTML代码）进行解析和绘制，最终将图文并茂的网页呈现在你眼前。
这个过程的核心在于“请求-响应”模型。你（客户端）发起请求，服务器给予响应。我们开发网页，就是在编写服务器要发送的那个“响应包裹”里的内容，以及决定浏览器该如何解读和展示它。
从日常到行业：无处不在的Web
为了让你感受Web开发的具体成果，我们来看两个场景。
第一个是日常生活场景：在线点餐。你打开外卖App或网站，浏览琳琅满目的美食图片和描述，将想吃的加入购物车，填写地址并支付。这个过程中，你看到的每一个菜品图片、文字介绍、可点击的按钮，都是前端Web开发的成果。而当你提交订单后，你的地址、菜单信息被传送到服务器处理，这又涉及后端开发（本书主要聚焦于前端，即你在浏览器里看到和交互的部分）。
第二个是行业应用场景：企业内部管理系统。许多公司都使用基于Web的OA系统、客户关系管理（CRM）系统或项目协作工具。员工通过浏览器登录后，可以在线提交报销、审批流程、查看销售数据报表。这些复杂的表格、图表、交互表单，同样是由HTML、CSS和JavaScript构建的Web应用。它们让办公流程数字化、协同化，极大地提升了效率。
别被这些概念吓到
在开始动手前，有两个常见的误解需要澄清。
误区一：学Web开发必须精通计算机科学和数学。 事实并非如此。Web开发，尤其是前端开发，入门门槛相对友好。它的核心是逻辑、结构和审美，而不是高深的数学理论。很多优秀的开发者都是从零基础开始的，关键在于持续动手实践和解决问题。
误区二：HTML不是“真正”的编程语言。 这个说法部分正确，但容易让人轻视它的重要性。HTML（超文本标记语言）确实不是像Python或JavaScript那样的“编程”语言，它不负责计算和逻辑判断。它的核心是“标记”和“结构”，用来定义网页的内容和骨架，比如“这是一段文字”、“这是一个标题”、“这是一个导航栏”。你可以把它看作建筑的蓝图，定义了哪里是承重墙，哪里是窗户。没有坚实、清晰的蓝图（HTML），后续的装修（CSS）和智能家居系统（JavaScript）就无从谈起。因此，学好HTML是Web开发万里长征的第一步，也是最关键的一步。
准备好，写下你的第一行代码
理论说得够多了，现在让我们来点实际的。打开你电脑上任何一个文本编辑器，甚至是系统自带的“记事本”（Windows）或“文本编辑”（Mac）。然后，一字不差地输入下面这行代码：
- <h1>Hello, World!h1>
输入完成后，将这个文件保存到你的桌面上，名字就叫 first.html。注意，后缀 .html 非常重要，它告诉计算机这是一个网页文件。
接下来，找到这个文件，用鼠标双击它。你的电脑会自动用默认的浏览器（比如Chrome）打开它。神奇的事情发生了——你会在浏览器窗口的正中央，看到一行醒目的大字：Hello, World!
恭喜你！你刚刚创建了人生中第一个网页。<h1> 和 </h1> 就是HTML标签，它们像一对括号，告诉浏览器：“夹在中间的文字，请用最大的标题样式显示出来。” 这行简单的代码，就是你作为Web开发者与世界打的第一个招呼。在接下来的章节里，我们将深入探索这些标签的奥秘，让你能构建出远比这复杂和精美的网页。
现在，停下来思考一下
在继续前进之前，不妨花几分钟思考以下问题，这能帮你更好地消化刚刚接触到的概念：
类比练习：除了“高速公路与出租车”，你还能想到什么生活中的比喻，来解释互联网和Web的关系？试着向身边的朋友用你的比喻描述一下。
观察与分解：随意打开一个你常访问的网站（比如新闻门户或购物网站）。尝试分辨页面上哪些元素可能是由HTML定义的“结构”（如标题、段落、列表、图片框），哪些可能是后续由CSS添加的“样式”（如颜色、字体、布局位置）？暂时不用追求完全准确，只是培养观察的习惯。
本节要点回顾
互联网是基础设施，Web是其上的一种服务：明白了这个根本区别，你就知道了自己学习的技术在整个数字世界中的位置。
“请求-响应”是Web工作的核心模型：浏览器请求，服务器响应，这个简单的循环支撑着每一次网页浏览。
HTML是网页的骨架和蓝图：它用标签定义内容的结构和含义，是Web开发一切美丽与互动的基础。
你的第一行代码已经运行：通过创建 first.html 并写下 `<h1> 标签，你完成了从理论到实践的零的突破，证明了这一切是可操作的。