视频封面

视频元信息

  • 时长：约1小时40分钟（推测，视频为CS50x 2026 Lecture 8）
  • 主题：Web开发基础 — HTML、CSS、JavaScript，以及互联网底层原理

📌 内容摘要（TL;DR）

本节课从互联网底层原理讲起（IP、TCP、DNS、DHCP、HTTP），然后系统介绍Web前端三大语言：HTML（结构）、CSS（样式）、JavaScript（交互）。通过大量现场演示，展示了如何用这些技术构建网页、实现搜索、表单验证、动态DOM操作等，为最终项目打下基础。

一、互联网是如何工作的

1. 网络与互联网

  • 网络是计算机的互连（有线或无线），家庭、校园、公司都有网络。
  • 当网络与网络互连，就形成了互联网——全球范围的计算机、服务器、设备互连。
  • ARPANet（1969年）是互联网的前身，由美国国防部高级研究计划局（ARPA）资助，用于连接有限的超级计算机。最初只有UCLA等少数节点，一年后哈佛、MIT等加入东海岸节点。
  • 如今互联网遍布全球，核心设备是路由器（router）——负责将数据从地理上的一条线路路由到另一条线路。

理解：互联网的本质是“网络的网络”，路由器就像邮政分拣中心，把数据包从一个节点转发到另一个节点。

2. 数据包（Packets）与路由

  • 数据在互联网上以数据包（packet）形式传输，可以想象成一个小信封。
  • 数据包从A点到达B点可能有多条路径，不一定是最短路径，可能是成本最低或服务器自动配置的路由结果。
  • 教学演示：教学助理扮演路由器，演示了从Phyllis到Brian发送数据包的过程。

3. TCP/IP 协议

  • 所有互联网设备（包括手机、电脑）都讲一种语言，技术上称为协议（protocol）——一组约定，规范计算机在互联网上的行为。
  • 人类世界也有协议，比如握手。
  • TCP/IP 是一对协议，解决两个不同的问题：
    • IP（Internet Protocol，互联网协议）：给每台设备一个全球唯一的地址（IP地址）。
    • TCP（Transmission Control Protocol，传输控制协议）：允许计算机区分不同的服务（如电子邮件、聊天、视频会议），并保证数据可靠传输。

考点：IP地址是32位（IPv4），格式为点分十进制（如1.2.3.4），每个数字范围0~255，共4个数字，所以是4×8=32位。IPv6使用128位，解决IPv4地址不够用的问题。

  • IP地址：类似于现实世界的邮政地址（如45 Quincy Street, Cambridge, MA 02138, USA），每台联网设备都有唯一IP地址。
  • IPv4：32位，最多约2^32 ≈ 40亿个地址，但全球设备数量已远超此数（每人至少手机+电脑，还有物联网设备）。
  • IPv6：128位，地址数量巨大，足以满足可预见的未来。虽然提出多年，但仍在逐步过渡中，教学中仍用IPv4。

4. IP数据报（IP Datagram）

  • IP数据报的规范图是一张位网格，每行32位，包含源地址、目的地址等字段。
  • 发送数据包时，源IP地址写在信封左上角，目的IP地址写在信封中间（类比现实邮件）。

5. TCP：端口与可靠传输

  • 服务器：为他人提供信息的计算机；客户端：只服务一个人的电脑（如我们的笔记本）。
  • IP只负责唯一标识计算机，TCP负责标识计算机上的服务。
  • 端口号（port number）：0~低几千的数字，标准化约定：
    • HTTP（网页）→ 端口80
    • HTTPS（安全网页）→ 端口443
  • 客户端发送请求时，也会写一个自己的端口号，以便服务器回复。这样一台电脑可以同时打开多个标签页、运行多个程序，数据包到达后根据端口号分发到对应应用。

理解：IP地址是“哪栋楼”，端口号是“楼里的哪个房间”。

  • TCP数据段包含序列号（sequence number）（32位），用于将大文件分片传输后重组。
    • 例如一张很大的JPEG图片，可以切成4个包，每个包标记“1/4、2/4、3/4、4/4”。
    • 接收方如果只收到部分包，可以要求发送方重发缺失的包。
  • TCP保证可靠交付，通过信封上的“记账”实现；同时支持多路复用（多个服务共享同一设备）。

6. DNS（域名系统）

  • 人类难以记住IP地址，于是使用域名（如google.com、harvard.edu）。
  • DNS服务器的作用：将域名翻译成对应的IP地址。DNS服务器内部就像一个两列的表：域名 → IP。
  • 设备启动时不知道任何域名的IP，它会向本地网络（家庭路由器、校园DNS服务器）询问。
  • DNS是层次化结构：本地DNS不知道时，会向根服务器查询，然后逐级缓存。
  • FQDN（完全限定域名）：如 www.example.com。
  • 域名通过互联网注册商（registrar）租用，每年费用从1美元到数千美元不等。

7. DHCP（动态主机配置协议）

  • 解决“我的IP地址是什么？”“DNS服务器IP是什么？”“路由器IP是什么？”等问题。
  • 设备启动时广播“我的IP地址是什么？”，DHCP服务器自动分配IP、路由器地址、DNS服务器地址等信息。
  • 以前需要手动配置，现在DHCP让网络“即插即用”。

二、HTTP 协议

1. URL 的组成

  • 一个完整URL示例：https://www.example.com/
    • Scheme（协议）：https（安全加密）或http
    • Hostname（主机名）：www（可以是集群，不一定是一台服务器）
    • Domain name（域名）：example.com
    • TLD（顶级域名）：.com（商业）、.edu（教育）、.gov、.net、.org等；现在有数百上千种，如.io（原为国家代码，但听起来像input/output）、.tv（听起来像television）
    • Path（路径）：/表示根目录，默认返回index.html；也可以是/folder/file.html
    • HTTP参数：?q=cats，以键值对形式传递输入，多个参数用&分隔

思考：URL中的?后面的键值对就是GET请求传递数据的方式，这也是自己实现搜索功能的基础。

2. HTTP 请求与响应

  • HTTP（超文本传输协议）：用于请求和接收网页的协议，使用端口80/443。
  • 请求消息示例： 
    GET / HTTP/2
  Host: www.harvard.edu
  • 响应消息示例： 
    HTTP/2 200 OK
  Content-Type: text/html
  • HTTP动词：GET、POST等。
  • 状态码：
    • 200 OK：一切正常
    • 301 Moved Permanently：永久重定向（浏览器应前往Location指定的新地址）
    • 404 Not Found：文件不存在
    • 400：客户端请求有误
    • 500：服务器内部错误
    • 418 I'm a teapot：愚人节玩笑，不是正式状态码

3. curl 命令

  • curl（connect URL）是一个“无头浏览器”，可以在终端直接发送HTTP请求并查看响应头。
  • 示例：curl -I https://www.harvard.edu/ 只显示响应头。
  • 演示：访问http://www.harvard.edu会收到301，强制跳转到HTTPS。
  • 有趣案例：safetyschool.org 301重定向到 yale.edu（哈佛校友的恶作剧）。

4. 浏览器开发者工具

  • 现代浏览器都有开发者工具（右键→检查/Inspect）。
  • 常用标签：
    • Elements：查看网页HTML结构，可实时编辑本地副本
    • Console：查看错误信息
    • Network：查看所有HTTP请求/响应细节
  • 演示：修改斯坦福大学首页的“Stanford”为“Harvard”，刷新后恢复——说明只是修改了本地副本。

三、HTML 基础

1. HTML 是什么

  • HTML（超文本标记语言）：不是编程语言，而是标记语言，告诉浏览器显示什么内容。
  • 网页代码会以副本形式发送到浏览器，浏览器负责解析并渲染。
  • 文件通常命名为index.html、hello.html等。

2. 基本结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, title</title>
  </head>
  <body>
    Hello, body
  </body>
</html>
  • <!DOCTYPE html>：声明HTML5版本。
  • <html>：根元素，lang="en"是属性，表示页面语言为英语。
  • <head>：包含元数据，如<title>（标签页标题）。
  • <body>：页面主体内容（占视口95%）。
  • 元素（element）：由开始标签和结束标签组成。
  • 属性（attribute）：修改元素默认行为，格式为key="value"。

易错点：浏览器会忽略HTML中的空白字符（换行、缩进），必须用标签明确表示结构。比如多个段落必须用<p>标签包裹，否则会合并成一段。

3. 常用标签

  • 段落：<p>...</p>
  • 标题：<h1>~<h6>（从大到小，加粗）
  • 列表：
    • <ul>无序列表（圆点），<li>列表项
    • <ol>有序列表（编号）
  • 表格：<table>、<tr>（行）、<td>（单元格）、<th>（表头）、<thead>、<tbody>
  • 图片：<img src="bridge.png" alt="Harvard University">
    • src指定图片路径，alt提供替代文本（屏幕阅读器、图片加载失败时显示）
    • img标签没有闭合标签，属于“空元素”
  • 视频：<video controls muted>，内部有多个<source src="video.mp4" type="video/mp4">
    • controls属性让用户看到播放控件（无需值）
    • muted默认静音
  • 链接：<a href="https://www.harvard.edu">Harvard</a>
    • href指定目标URL，标签内文本是用户看到的文字
    • 默认样式：蓝色+下划线
    • 思考：HTML不会自动把URL变成链接，必须用<a>标签。社交媒体的自动链接是额外代码实现的。

易错点（网络安全）：<a>标签可以显示一个文本，但链接到另一个地址。攻击者可利用此进行钓鱼攻击（phishing），例如显示“PayPal”但实际链接到恶意网站。所以不要轻信链接文字，要检查实际URL。

4. 表单与输入

<form action="https://www.google.com/search" method="get">
  <input name="q" type="search" placeholder="Query" autofocus autocomplete="off">
  <input type="submit" value="Google Search">
</form>
  • <form>：创建表单，action指定提交到的URL，method指定GET或POST。
  • <input>：输入框，name是传递给服务器的键名，type可以是text、search、submit、email等。
  • placeholder：灰色提示文字。
  • autofocus：页面加载时自动聚焦光标。
  • autocomplete="off"：关闭自动补全。
  • 自己实现“谷歌搜索”：表单提交到https://www.google.com/search?q=...，只需要前端HTML，不需要后端。

5. 正则表达式与输入验证

  • 正则表达式（regex）：用于描述文本模式，例如邮箱格式。
  • 常用符号：
    • . 任意字符
    • * 零次或多次
    • + 一次或多次
    • ? 零次或一次
    • {n} 恰好n次
    • [0-9] 数字范围
    • \d 任意数字，\D 非数字
    • \. 转义为字面量点号
  • 示例：pattern=".+@.+\.edu" 匹配用户名@域名.edu。
  • HTML5提供了type="email"，内置邮箱格式验证，但实际邮箱正则非常复杂。
  • 安全警告：前端验证可以被用户轻松绕过（通过开发者工具删除pattern属性），所以不能信任用户输入，必须在服务器端验证。

6. HTML验证器

  • W3C提供的验证工具：https://validator.w3.org/
  • 可以检查HTML语法是否正确（标签闭合、引号等）。

四、CSS 基础

1. CSS 是什么

  • CSS（层叠样式表）：控制网页的“皮肤”——颜色、字体、布局、定位等。
  • 不是编程语言，但正变得越来越像。
  • CSS中的键值对称为属性（property），语法为属性名: 值;，用花括号分组。

2. 三种使用方式

  1. 内联样式：在HTML标签上写style="font-size: large; text-align: center;"
  2. <style>标签：放在<head>中，如： 
    body { text-align: center; }
header { font-size: large; }
main { font-size: medium; }
footer { font-size: small; }
  3. 外部样式表：<link rel="stylesheet" href="home.css">，将CSS放入独立.css文件。

考点：CSS的“层叠”（cascading）特性——在父元素上设置的属性会向下传递给子元素。例如在<body>上设置text-align: center，所有子元素都会居中。

3. 选择器

  • 类型选择器：直接写标签名，如body { ... }
  • 类选择器：.类名，如.centered { text-align: center; }，在HTML中用class="centered"引用
  • ID选择器：#id名，如#harvard { color: red; }，在HTML中用id="harvard"引用（ID必须唯一）
  • 伪类选择器：如a:hover { text-decoration: underline; }，鼠标悬停时生效

理解：类可以复用，ID只能用于一个元素。类就像函数，可以到处调用；ID就像全局唯一变量。

4. 常用CSS属性

  • font-size: large/medium/small 或具体像素
  • text-align: center
  • color: red 或十六进制 #ff0000（红）、#00ff00（绿）、#0000ff（蓝）
  • text-decoration: none（去掉下划线）

5. 语义化标签

  • 使用<header>、<main>、<footer>替代<div>，让搜索引擎更好地理解页面结构（语义网）。
  • HTML实体：如&copy;（©版权符号），&#169;也可以。

6. CSS框架：Bootstrap

  • 框架就是库，Bootstrap是最流行的CSS框架之一。
  • 使用方式：在HTML中引入Bootstrap的CDN链接，然后使用其预定义的类。
  • 示例：<table class="table table-striped"> 即可得到漂亮的斑马纹表格。
  • 优点：快速获得专业外观，无需自己写大量CSS。

7. 开发者工具中的CSS

  • 在Elements面板右侧可以看到应用到选中元素的所有CSS规则。
  • 可以勾选/取消属性、临时修改值（如把链接颜色改成绿色），方便调试。

五、JavaScript 基础

1. JavaScript 是什么

  • JavaScript 是今天三种语言中唯一的编程语言。
  • 语法与C、Python相似，有变量、条件、循环、函数。
  • 通常运行在客户端（浏览器），但也可用于服务器端（Node.js）。
  • 核心能力：动态修改DOM（文档对象模型）——即浏览器内存中的页面树结构。

理解：网页加载后，浏览器在内存中构建一棵“树”（DOM）。JavaScript可以随时向这棵树添加、删除、修改节点，从而无需刷新页面就能更新内容。

2. 语法速览

概念 JavaScript 说明
变量 let counter = 0; 不用指定类型
自增 counter++ 或 counter += 1 同C
条件 if (x > 0) { ... } else if (x === 0) { ... } else { ... } 同C
循环 for (let i = 0; i < 3; i++) { ... } 同C
函数 function greet() { ... } 用function关键字
匿名函数 function() { ... } 可作为参数
  • 字符串拼接："Hello, " + name
  • 模板字符串：`Hello, ${name}`（类似Python f-string，但语法更丑）

3. 引入JavaScript的方式

  1. <script>标签放在<head>中（可能导致“元素还没加载”的问题）
  2. <script>标签放在<body>末尾（推荐，确保DOM已加载）
  3. 外部文件：<script src="hello.js"></script>

4. 事件与监听

  • 网页中会发生各种事件：点击、按键、拖拽、表单提交等。
  • 使用addEventListener监听事件： 
    document.querySelector('form').addEventListener('submit', function() {
  alert('Hello, ' + document.querySelector('#name').value);
});
  • document.querySelector：用CSS选择器获取元素。
  • DOMContentLoaded事件：确保DOM树完全加载后再执行代码。

5. 示例演示

  • Hello示例：表单输入名字，提交时弹出Hello, David。
  • 实时更新：监听keyup事件，输入时立即更新页面文本。
  • 改变CSS：点击按钮改变页面背景色： 
    document.querySelector('#red').addEventListener('click', function() {
  document.querySelector('body').style.backgroundColor = 'red';
});
  • Blink效果：用setInterval(blink, 500)每500毫秒切换visibility属性。
  • 自动补全：监听输入，从大数组中筛选匹配单词，动态生成<li>列表。
  • 地理位置：navigator.geolocation.getCurrentPosition(...)获取GPS坐标。
  • Bootstrap交互：汉堡菜单等交互组件依赖JavaScript。

易错点：CSS中的连字符属性（如background-color）在JavaScript中必须改为驼峰式（backgroundColor），因为减号会被解释为减运算符。

6. 安全提醒

  • 前端JavaScript验证同样不可信任，用户可轻松绕过。
  • 服务器端必须再次验证所有输入。

六、总结与幕后

  • 本节课覆盖了从互联网底层（IP/TCP/DNS/DHCP/HTTP）到前端三件套（HTML/CSS/JavaScript）的完整知识链。
  • HTML定义结构，CSS定义样式，JavaScript定义交互。
  • 所有现代网站（Gmail、Google Maps、Uber等）都基于这些技术。
  • 最终项目可以使用这些技术构建网页甚至移动应用。

🏷️ 关键标签

CS50 #HTML #CSS #JavaScript #网络协议 #TCP/IP #HTTP #DNS #DHCP #Web开发 #前端 #DOM #Bootstrap #正则表达式 #网络安全 #编程入门

生成时间：2026-09-02 17:05:17 生成平台：VideoNote