CAN302 电子商务技术 Pt.1 Web技术导论

sensen_kiss2026-03-25 15:24

文章目录

  • [1. 网页如何工作](#1. 网页如何工作)
    • [1.1 典型的应用层协议（Typical Application Protocols）](#1.1 典型的应用层协议（Typical Application Protocols）)
      • [1.1.1 HTTP](#1.1.1 HTTP)
    • [1.2 网页地址（URL）的组成部分](#1.2 网页地址（URL）的组成部分)
    • [1.3 DNS（Domain Name Service，域名系统）](#1.3 DNS（Domain Name Service，域名系统）)
    • [1.4 IP 地址和端口号](#1.4 IP 地址和端口号)
      • [1.4.1 文件路径和 Web 服务器中文件存储的关系](#1.4.1 文件路径和 Web 服务器中文件存储的关系)
    • [1.5 查询字符串](#1.5 查询字符串)
    • [1.6 文档片段](#1.6 文档片段)
    • [1.7 HTTP 协议中的请求方法（Request Methods）](#1.7 HTTP 协议中的请求方法（Request Methods）)
    • [1.8 HTTP 中的响应](#1.8 HTTP 中的响应)
    • [1.9 HTTP 响应状态码（HTTP Response Code）](#1.9 HTTP 响应状态码（HTTP Response Code）)
    • [1.10 前端（Front-End）和后端（Back-End）](#1.10 前端（Front-End）和后端（Back-End）)
      • [1.10.1 前后端协作](#1.10.1 前后端协作)
      • [1.10.2 使用的语言](#1.10.2 使用的语言)
    • [1.11 网页浏览器](#1.11 网页浏览器)
  • [2. HTML 基础](#2. HTML 基础)
    • [2.1 标签（Tags）](#2.1 标签（Tags）)
    • [2.2 属性（Attributes）](#2.2 属性（Attributes）)
    • [2.3 内联样式（Inline Styles）](#2.3 内联样式（Inline Styles）)
    • [2.4 ID 属性](#2.4 ID 属性)
    • [2.5 链接（Anchor \<a>）](#2.5 链接（Anchor <a>）)
    • [2.6 标题（Heading \<h1> ~ \<h4>）](#2.6 标题（Heading <h1> ~ <h4>）)
    • [2.7 段落（Paragraph \<p>）](#2.7 段落（Paragraph <p>）)
    • [2.8 列表（List \<ul> / \<li>）](#2.8 列表（List <ul> / <li>）)
    • [2.9 HTML 元素示例](#2.9 HTML 元素示例)
    • [2.10 嵌套（nesting）](#2.10 嵌套（nesting）)
    • [2.11 空元素（Empty Element）](#2.11 空元素（Empty Element）)
  • [3. CSS 基础](#3. CSS 基础)
    • [3.1 CSS选择器（CSS Selector）](#3.1 CSS选择器（CSS Selector）)
      • [3.1.1 元素选择器（Element Selector）](#3.1.1 元素选择器（Element Selector）)
      • [3.1.2 通配选择器（Universal Selector）](#3.1.2 通配选择器（Universal Selector）)
      • [3.1.3 ID选择器（ID Selector）](#3.1.3 ID选择器（ID Selector）)
      • [3.1.4 类选择器（Class Selector）](#3.1.4 类选择器（Class Selector）)
    • [3.2 CSS的属性（Property）和值（Value）](#3.2 CSS的属性（Property）和值（Value）)
    • [3.3 CSS 盒子模型(Box Model)](#3.3 CSS 盒子模型(Box Model))
  • [4. JavaScript (JS)](#4. JavaScript (JS))
    • [4.1 JavaScript 的执行流程](#4.1 JavaScript 的执行流程)
    • [4.2 JavaScript 的 API](#4.2 JavaScript 的 API)
  • [5. HTML、CSS 和 JavaScript结合](#5. HTML、CSS 和 JavaScript结合)
    • [5.1 IDE](#5.1 IDE)
    • [5.2 写在同一个文件里](#5.2 写在同一个文件里)
    • [5.3 分开管理](#5.3 分开管理)
    • [5.4 在网页中的文档结构和层次](#5.4 在网页中的文档结构和层次)
  • [6. Web服务器（Web Server）](#6. Web服务器（Web Server）)
    • [6.1 常见 Web 服务器](#6.1 常见 Web 服务器)
    • [6.2 Web 服务器文件列表功能](#6.2 Web 服务器文件列表功能)
    • [6.3 创建 Web 网站](#6.3 创建 Web 网站)
    • [6.4 静态网页和动态网页](#6.4 静态网页和动态网页)
    • [6.5 PHP（Hypertext Preprocessor）](#6.5 PHP（Hypertext Preprocessor）)
    • [6.6 数据库基础知识](#6.6 数据库基础知识)
    • [6.7 软件框架（Software Framework）](#6.7 软件框架（Software Framework）)

1. 网页如何工作

当我们在网上购物的时候，我们都是通过手机app或者电脑网页去完成操作。

我们现在就主要介绍电脑网页如何工作的，这一部分在 CAN201 中叙述的更加详细CAN201专栏

网页采用客户端-服务器模式（Client-Server mode） 工作，由客户端发起请求，服务器响应请求。

HTTP（超文本传输协议）是一种 用于获取资源（如 HTML 文档）的协议。

HTTP 是 Web 应用程序中数据交换的基础（但并非所有网络应用都使用 HTTP！）

如图所示，左边是存放网页文件的服务器，右边是浏览器（客户端），用户通过它来访问网页。

浏览器向服务器发送请求，比如访问 http://domain.com/page.html。服务器返回请求的内容，比如 page.html 的内容或者错误码。

这就是客户端-服务器交互流程。

1.1 典型的应用层协议（Typical Application Protocols）

应用层协议有很多，例如：

Telnet / SSH：远程登录

FTP / TFTP：文件传输

SNMP：网络管理

NTP：时间同步

DNS：域名解析

DHCP：自动分配 IP

我们这里会重点介绍HTTP / HTTPS，它们是专门用于网页浏览的协议，负责客户端（浏览器）和服务器之间的数据交换。

1.1.1 HTTP

早期网页界面，黑色背景、绿色文字，这是 World Wide Web (WWW) 的最早浏览器界面，显示网页内容和链接。

Tim Berners-Lee在 CERN（欧洲核子研究中心） 工作时发明了万维网（WWW）。他同样发明了HTTP，最初设计网页和 HTTP的目的是 为了自动化信息共享，方便科学家之间共享文档和数据。

左边是 Web Server（网页服务器）

包含 Files（文件） 和 HTTP Server（HTTP 服务软件）

右边是 Browser（浏览器）

箭头表示 HTTP 请求和响应的流程：

浏览器发起 HTTP Request → 服务器

服务器返回 HTTP Response → 浏览器

Web Server（网页服务器）

可以指硬件、软件，或者二者结合

硬件：就是一台计算机

软件：包含控制用户访问文件的各个部分，最核心是 HTTP Server

HTTP Server：理解 URL（网页地址）和 HTTP 协议，让浏览器能访问网页

Browser（浏览器）

浏览器是本地应用程序，作为客户端（client）

浏览器从服务器获取数据，然后 渲染并显示网页内容给用户

1.2 网页地址（URL）的组成部分

例如 URL：

html 复制代码 
https://www.example.co.uk:443/blog/article/search?docid=720&hl=en#dayone

scheme（协议）：https:// → 表示使用的协议（HTTP 或 HTTPS）

subdomain（子域名）：www → 网站的子域

domain（域名）：example → 网站主域名

top-level domain（顶级域）：co.uk → 顶级域名

port number（端口号）：:443 → 服务器通信端口（HTTPS 默认 443）

path（路径）：/blog/article/search → 服务器上资源的路径

query string separator（查询分隔符）：? → 后面跟参数

query string/parameter（查询参数）：docid=720&hl=en → 提供给服务器的额外信息

fragment（片段标识符）：#dayone → 网页内的锚点位置

1.3 DNS（Domain Name Service，域名系统）

DNS 的作用是把域名转换为 IP 地址。

人类使用域名（例如 gcorelabs.com），因为更容易记忆。

计算机通信需要 IP 地址（例如 123.123.123.123）。

DNS 就是一个"翻译器"，把域名转换成计算机可以识别的 IP 地址。

DNS 层级结构（Hierarchy）

Root Domain（根域）：最顶层，用 . 表示

Top Level Domains（顶级域）：例如 .com, .org, .net, .in

Second Level Domains（二级域）：例如 google, ace

Third Level Domains（三级域 / 子域名）：例如 www, mail, docs

域名是从右向左解析的：先顶级域，再二级域，最后子域名。

1.4 IP 地址和端口号

端口号（Port Number）

作用：识别设备上的特定应用或服务。

例子：Web 服务器使用 端口 80（HTTP） 或 端口 443（HTTPS）

格式：0--65535 的数字

网络作用：将进入的数据包导向正确的应用程序

IP 地址（IP Address）

作用：识别网络上的具体设备

格式：唯一的数字标签，例如 192.168.1.1 或 255.255.255.0

网络作用：让数据包找到目标设备

浏览器和服务器通过 IP + 端口 来通信，IP 地址负责找到设备，端口号负责找到设备上的应用。

1.4.1 文件路径和 Web 服务器中文件存储的关系

多层目录结构

Linux 文件系统：从 /（根目录）开始

例子：/home/jake/scripts/myscript.sh

/ → 根目录

home → 一级子目录

jake → 用户目录

scripts → 子目录

myscript.sh → 文件

Windows 文件系统：使用盘符 + 路径

例子：C:\Source\project\docs\file.txt

C: → 根

Source\project\docs → 路径

file.txt → 文件名

Web 服务器是软件，运行在服务器电脑上。服务器上有存放网页和资源的文件夹。

URL 路径和服务器上的文件夹路径对应关系：

访问 http://example.com/docs/file.txt

服务器会映射到某个实际路径 /var/www/html/docs/file.txt

默认根目录：Web 服务器通常有默认根文件夹，URL 中的路径从这里开始映射到文件。

文件存储在多级目录里，URL 路径和服务器文件夹路径有一一映射关系。

浏览器访问 URL → Web 服务器找到对应文件 → 返回给浏览器。

1.5 查询字符串

查询字符串用于向服务器传递参数。

动态网页（dynamic web page）通常通过查询字符串接收用户的输入或筛选条件，服务器根据这些参数生成对应内容。

例如。

html 复制代码 
https://www.examplestore.com/products?category=electronics&sort=price_low_to_high

Base URL（基础网址）：https://www.examplestore.com/products

这是请求的主网页或资源

Beginning of the Query String（查询字符串开始）：?

? 后面的部分就是查询字符串

Key-Value Pair（键值对）：

category=electronics → 类别 = 电子产品

sort=price_low_to_high → 排序 = 从低到高

Separator（分隔符）：&

用于分隔多个键值对

所以浏览器访问 URL → 服务器收到请求

服务器解析查询字符串 → 提取键值对参数

参数用于生成动态网页内容

1.6 文档片段

符号：#

作用：定位到网页中的某一部分（通常是 HTML 中的锚点<a id="xxx"> 或元素的 ID）

例如原来的网页是。

html 复制代码 
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/DocumentFragment

现在添加 #。

html 复制代码 
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/DocumentFragment#browser_compatibility

#browser_compatibilit→ 浏览器会自动滚动到网页中 id="browser_compatibilit" 的部分。

当你访问带 # 的 URL 时，浏览器会自动跳到网页对应的锚点或元素位置。

不需要用户滚动，网页会直接显示这个部分。

1.7 HTTP 协议中的请求方法（Request Methods）

  1. 安全方法（Safe Methods）
    GET：获取资源（网页、文件等）
    不会对服务器数据产生副作用
    HTTP/1.1 必须实现
    HEAD：获取资源的响应头信息
    也不修改服务器数据
    这里的安全的意思是不会改变服务器上的数据
  2. 带 Body 的方法（Message With Body）
    PUT：在服务器上 存储或更新数据（类似上传）
    POST：向服务器 发送数据进行处理（表单提交、创建记录等）
    PATCH：部分修改资源
    这些方法可以改变服务器上的数据
  3. 其他方法
    TRACE：回显收到的请求信息（调试用）
    OPTIONS：查看服务器支持哪些方法（能力）
    DELETE：删除资源（不保证一定成功）

下图给出一个GET请求。

html 复制代码 
GET /doc/test.html HTTP/1.1

是请求行

GET → HTTP 方法（请求服务器获取资源）

/doc/test.html → 请求的资源路径

HTTP/1.1 → 使用的 HTTP 协议版本

html 复制代码 
Host: www.test101.com
Accept: image/gif, image/jpeg, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0
Content-Length: 35

是请求头

Host → 指定服务器域名

Accept / Accept-Language / Accept-Encoding → 浏览器希望接收的数据类型、语言和编码方式

User-Agent → 浏览器或客户端标识

Content-Length → 请求正文长度（用于 POST 或 PUT 请求）

html 复制代码 
bookId=12345&author=Tan+Ah+Teck

是请求正文

用于 POST、PUT、PATCH 等方法

发送给服务器的数据，例如表单信息、JSON、XML 等

头部和正文之间用空行分隔

因此HTTP 请求 = 请求行 + 请求头 + 空行 + 请求正文

1.8 HTTP 中的响应

html 复制代码 
HTTP/1.1 200 OK

是Status Line（状态行）

HTTP/1.1 → 使用的 HTTP 协议版本

200 → 状态码，表示请求成功

OK → 状态文本，对状态码的描述

html 复制代码 
Date: Sun, 08 Feb xxxx 01:11:12 GMT
Server: Apache/1.3.29 (Win32)
Last-Modified: Sat, 07 Feb xxxx
ETag: "0-23-4024c3a5"
Accept-Ranges: bytes
Content-Length: 35
Connection: close
Content-Type: text/html

是Response Headers（响应头）

Date → 服务器响应时间

Server → 服务器软件信息

Last-Modified → 资源最后修改时间

ETag → 资源标识符，用于缓存

Accept-Ranges → 支持分块传输

Content-Length → 响应正文长度

Connection → 连接方式（如 close 表示请求后关闭）

Content-Type → 返回内容类型（如 text/html、image/png 等）

html 复制代码 
<h1>My Home page</h1>

是Response Message Body（响应正文）

这是服务器返回的 实际网页内容

浏览器根据正文渲染页面

同样，头部和正文之间用空行分隔

因此HTTP 响应 = 状态行 + 响应头 + 空行 + 响应正文

1.9 HTTP 响应状态码（HTTP Response Code）

HTTP 响应状态码用来表示客户端请求是否成功

服务器返回状态码 + 状态文本 + 响应内容

浏览器根据状态码处理网页显示或提示用户

类别 范围 含义
Informational responses 100--199 信息性响应，表示请求已接收，需要继续处理
Successful responses 200--299 成功响应，请求被成功处理
Redirection messages 300--399 重定向消息，请求需要进一步操作（如跳转到新 URL）
Client error responses 400--499 客户端错误（如 404 找不到页面、400 错误请求）
Server error responses 500--599 服务器错误（如 500 内部服务器错误）

例如我们常见到的404表示请求的页面不存在。

1.10 前端（Front-End）和后端（Back-End）

前端（Front-End）是用户在浏览器里看到的网页界面

包括 HTML、CSS、JavaScript 代码

内容包含：

页面标记和布局（HTML/CSS）

动态交互（JavaScript + Ajax）

图像处理和网页编辑

兼容不同浏览器和优化搜索引擎

提供可访问性（Accessibility）

前端就是"用户看到的和操作的部分"。

后端（Back-End）是运行在服务器上的程序和数据库

内容包含：

编程和脚本（Python、Ruby、Perl 等）

服务器架构设计

数据库管理

系统可扩展性和安全性

数据处理和备份

后端就是"处理数据、生成网页内容的部分"。

1.10.1 前后端协作

后端：提供数据 → 前端 显示数据

浏览器向服务器请求数据 → 服务器返回 → 浏览器渲染成网页

1.10.2 使用的语言

前端：HTML、CSS、JavaScript

后端：至少一种编程语言 + SQL（数据库语言）

1.11 网页浏览器

HTML：网页结构和内容，提供基础交互

CSS：网页外观设计、样式和简单交互

JavaScript：动态行为、复杂交互、可编程操作

三者结合 → 构成现代网页和 Web 应用

浏览器加载网页时，会发送多个 HTTP 请求

GET page.html → 主网页

GET layout.css → 样式表

GET image.png → 图片

GET video.mp4 → 视频

GET ads.jpg → 广告资源

每个请求可能访问不同的服务器

主网页 → Web server

视频 → Video server

广告 → Ads server

浏览器收到资源后 → 解析 HTML、CSS、JS → 渲染页面

浏览器像一个资源收集器，把不同服务器的资源汇总后显示成完整网页。

2. HTML 基础

HTML 是标记语言（Markup Language）。

这部分的教学可以参考以下材料。
HTML 基础教学
HTML 教学

2.1 标签（Tags）

HTML 用 标签（tags） 来定义网页内容和结构

每个标签通常成对出现：

html 复制代码 
<p>这是段落内容</p>

Opening tag（开始标签）：<p>

Closing tag（结束标签）：</p>

Content（内容）：这是段落内容

Element（元素）：从开始标签到结束标签包含内容的整个部分

2.2 属性（Attributes）

HTML 元素可以设置属性（attributes）来添加额外信息：

html 复制代码 
<p class="editor-note">这是段落内容</p>

class = 属性名

"editor-note" = 属性值

属性可以用来应用样式或在 JavaScript 中引用元素

2.3 内联样式（Inline Styles）

可以直接在标签中设置样式：

html 复制代码 
<p style="color:#ff0000;font-size:30px">红色文字</p>

color = 文字颜色

font-size = 字体大小

可以直接控制元素的外观

2.4 ID 属性

id 是特殊属性，必须唯一：

html 复制代码 
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

可以在 JavaScript 或 CSS 中通过 id 引用这个元素

一个网页中同一个 id 不能重复

2.5 链接（Anchor <a>）

html 复制代码 
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

<a> = 超链接标签

href = 属性，定义链接目标

点击文本 "Mozilla Manifesto" 会跳转到指定网址

2.6 标题（Heading <h1> ~ <h4>）

html 复制代码 
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

<h1> ~ <h6> 表示标题等级

<h1> = 最大标题（最重要）

<h4> = 较小标题

用于组织页面结构和 SEO

2.7 段落（Paragraph <p>）

html 复制代码 
<p>This is a single paragraph</p>

<p> = 段落标签

用于普通文字内容

2.8 列表（List <ul> / <li>）

html 复制代码 
<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<ul> = 无序列表

<li> = 列表项

有序列表用 <ol>

2.9 HTML 元素示例

下面列出标签示例：

页面结构：<head>、<body>、<header>、<footer>、<section>、<article>

内容和文本：<p>、<div>、<span>

媒体元素：<img>、<audio>、<video>、<canvas>

列表：<ul>、<ol>、<li>

交互：<details>、<output>、<progress>、<nav>

嵌入元素：<embed>、<datalist>

2.10 嵌套（nesting）

HTML 元素可以包含其他元素，这叫嵌套（nesting）。

html 复制代码 
<body>
    <p>这是一个 <strong>加粗</strong> 的段落</p>
</body>

<strong> 标签被嵌套在 <p> 里面。

2.11 空元素（Empty Element）

一些 HTML 元素没有内容，也没有闭合标签，叫 空元素。

html 复制代码 
<img src="images/firefox-icon.png" alt="My test image">

<img> 是空元素，没有闭合标签，也没有内置内容。

它有 属性（Attribute）：

src：图片路径

alt：替代文字（图片无法显示时显示）

所以空元素并不是什么都没用，它可以通过属性来显示内容，比如图片。

3. CSS 基础

相关材料可以看这个链接 CSS教学。

3.1 CSS选择器（CSS Selector）

CSS选择器用于选中 HTML 元素，然后对这些元素应用样式（比如颜色、字体、大小、间距等）。通过选择器，你可以控制网页中具体元素的显示效果。

3.1.1 元素选择器（Element Selector）

css 复制代码 
h2 {
    color: #c70039;
}

作用：选择 所有 <h2> 元素并将它们字体颜色改成 #c70039。

特点：简单直接，选中页面上所有对应标签。

3.1.2 通配选择器（Universal Selector）

css 复制代码 
* {
    color: #c70039;
}

作用：选择页面上所有元素并将它们字体颜色改成 #c70039。

特点：非常全局，会影响所有标签，一般用于统一样式或者重置浏览器默认样式。

3.1.3 ID选择器（ID Selector）

css 复制代码 
#content {
    color: #6E4253;
    font-size: 15px;
}

作用：选择 ID为 content 的元素并将它们字体字体和颜色进行修改。

特点：每个ID在页面中必须唯一，适合针对特定元素做样式。

3.1.4 类选择器（Class Selector）

css 复制代码 
.main {
    margin-top: 10px;
    margin-bottom: 10px;
}

作用：选择 class为 main 的元素，将其修改为顶部距离上方元素或边界 10 像素，底部距离下方元素或边界 10 像素。

特点：同一个class可以用于多个元素，便于批量设置样式。

3.2 CSS的属性（Property）和值（Value）

CSS 样式是通过选择器找到元素，然后用属性:值的形式来定义样式。

css 复制代码 
.my-css-rule {
    background: red;
    color: beige;
    font-size: 1.2rem;
}

.my-css-rule → 选择器（Selector）：它指定了要应用样式的 HTML 元素或类，这里是 . 开头的，所以是一个类选择器，指定 HTML 中 class 属性值为 "my-css-rule" 的元素。

background: red; → background 是 属性（Property），red 是这个属性的 值（Value）。意思是背景颜色设置为红色。

color: beige; → color 是属性，beige 是值。意思是文字颜色设置为米色。

font-size: 1.2rem; → font-size 是属性，1.2rem 是值。意思是文字大小为 1.2 倍的根元素字体大小。

3.3 CSS 盒子模型(Box Model)

相关参考资料：CSS 盒子模型快速介绍
CSS 盒子模型教学

每个 HTML 元素都可以被看作一个矩形盒子，这个矩形盒子由几层组成，从内到外：

Content（内容区）

放置文字、图片或其他内容的区域。

Padding（内边距）

内容与边框之间的空白区域。

Border（边框）

包围内容和内边距的边框。

Margin（外边距）

元素与其他元素之间的空白区域。

下面给出一个代码示例。

HTML:

html 复制代码 
<div class="box">CAN302 CSS test!</div>

CSS:

css 复制代码 
.box {
    width: 200px;    /* 内容宽度 */
    height: 100px;   /* 内容高度 */
    padding: 20px;   /* 内容与边框之间的内边距 */
}

width 和 height 决定了 内容区域的大小。

padding 增加内容周围的空白。

最终浏览器显示出来的盒子尺寸 = 内容 + padding + border + margin（如果有设置边框和外边距）。

下图是具体效果。

4. JavaScript (JS)

JS 是浏览器内置的脚本语言。

浏览器有 JS 引擎（JavaScript Engine），它结合了解释器和编译器的特点来执行 JS 代码。

JS 可以直接在浏览器里运行，不需要依赖服务器。

JS是一种脚本语言（scripting language），用于前端开发。

TypeScript 是 JS 的一个升级版（静态类型，增强了可维护性）。

JS 可以让网页动态和交互，JS 能够操作网页元素，实现弹窗、动画、用户输入处理等交互效果。

"JavaScript"名字里有 "Java"，但它 不是 Java。JS 和 Java 语法、运行机制、用途完全不同。

上面的图片显示了 JS 可以创建的标准浏览器对话框：

alert() 弹窗：提示信息。

confirm() 弹窗：确认/取消。

prompt() 弹窗：输入框，用户可以输入内容。

4.1 JavaScript 的执行流程

相关材料：快速了解V8引擎如何运行JS
介绍JS的执行流程

现代浏览器既有解释器也有编译器，所以 JavaScript 既是解释型语言，又有编译型的特性。

原始 JavaScript 脚本放到浏览器里会被解析，JS 代码会被解析成一种内部结构，叫抽象语法树(AST, Abstract Syntax Tree)。这棵树表示代码的逻辑结构，便于后续处理。

解释器(Interpreter)会根据 AST 逐行执行 JS 代码，直接把代码转换成可运行的结果。

浏览器同时会分析代码的执行情况，把常用或热点代码优化成 机器码 (Machine Code) 或 字节码 (Bytecode)，提高执行效率，这一步由优化编译器(Optimising Compiler)操作。

4.2 JavaScript 的 API

相关学习资料 JS教学。

浏览器本身提供了一些"现成功能"，比如：

  • 操作网页 DOM（Document Object Model，网页元素）
  • 定时器（setTimeout、setInterval）
  • 浏览器存储（localStorage、sessionStorage）
  • 发送网络请求（fetch、XMLHttpRequest）
  • Canvas、音频、视频操作等

这些都是浏览器提供的 内置 API，你不需要自己实现。

除了浏览器内置的 API，还可以使用 第三方 API：

  • 比如地图 API（Google Maps）
  • 数据接口（天气、股票）
  • 第三方库/服务提供的功能

这些第三方 API 就像工具箱里的现成工具，让你快速实现功能，而不必从零开发。

所以我们的 JS 核心代码在浏览器里运行，然后我们还可以调用浏览器提供的 API 或第三方 API 来操作网页或获取数据。

5. HTML、CSS 和 JavaScript结合

我们现在将 HTML、CSS 和 JavaScript 结合起来使用形成一个完整的示例。

html 复制代码 
<h1 id="welcome">HTML CSS JS</h1>
<p>Welcome to HTML-CSS-JS.com</p>
<p>Online HTML, CSS and JavaScript editor with instant preview.</p>

HTML 定义了网页的结构和内容。

<h1> 是标题，<p> 是段落。

id="welcome" 给 <h1> 一个唯一标识，方便 JavaScript 找到它。

css 复制代码 
h1 {
  font-family: Impact, sans-serif;
  color: #CE5937;
}

CSS 用于设置样式，比如字体和颜色。

这里给 <h1> 标签设置了字体和颜色。

javascript 复制代码 
document.getElementById('welcome').innerText += " CAN302 ";

JS 用于网页交互和动态内容。

document.getElementById('welcome') 找到 HTML 中 id="welcome" 的元素。

.innerText += " CAN302 " 把 " CAN302 " 添加到标题内容后面。

结果是页面标题显示成 HTML CSS JS CAN302。

结果如下图所示。

5.1 IDE

常用的IDE有VS Code、Sublime Text、WebStorm 等。

我们可以选择任何熟悉的 IDE 来写 HTML、CSS 和 JavaScript 代码。

5.2 写在同一个文件里

在学习和小项目中，可以把 HTML、CSS、JavaScript 放在同一个文件里，这样方便快速测试和演示。但在真实项目中，一般会把它们分开（HTML、CSS、JS 分别放不同文件）以便维护和复用。

script放在body和放在head的区别

我们可以把前面的示例用一个 HTML 文件来呈现效果。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML CSS JS</title>
    <style type="text/css">
        /* CSS styles */
        h1 {
            font-family: Impact, sans-serif;
            color: #CE5937;
        }
    </style>
</head>
<body>
    <h1 id="welcome">HTML CSS JS</h1>
    <p>Welcome to HTML-CSS-JS.com</p>
    <p>Online HTML, CSS and JavaScript editor with instant preview.</p>

    <script type="text/javascript">
        // JavaScript
        document.getElementById('welcome').innerText += " CAN302";
    </script>
</body>
</html>

5.3 分开管理

把 HTML、CSS 和 JavaScript 分开放在不同文件里管理需要对 HTML 文件进行修改，以让 CSS 文件和 JavaScript 文件能够引入 HTML。

<link rel="stylesheet" href="default.css"> → 把 CSS 文件引入 HTML，在<head>标签里，使用<link> 标签引入 CSS 文件。

<script src="default.js"> → 把 JavaScript 文件引入 HTML，在 HTML 文件的 <body> 结束前（通常在 </body> 标签前）添加 <script> 标签。

其他 HTML 代码和结构正常写。

所以只需要将 HTML 代码修改，然后 CSS 代码和 JS 代码都不用变。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML CSS JS</title>
    <link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
    <h1 id="welcome">HTML CSS JS</h1>
    <p>Welcome to HTML-CSS-JS.com</p>
    <p>Online HTML, CSS and JavaScript editor with instant preview.</p>

    <script type="text/javascript" src="default.js"></script>
</body>
</html>
css 复制代码 
h1 {
  font-family: Impact, sans-serif;
  color: #CE5937;
}
javascript 复制代码 
document.getElementById('welcome').innerText += " CAN302 ";

HTML、CSS、JS 这样分开，保持代码整洁，方便管理。

5.4 在网页中的文档结构和层次

下图用树状图的方式可视化文档结构（DOM，Document Object Model）。

顶层是 Document（文档），Document 下是 <HTML> 元素。

<HTML> 下分两个主要部分：

  • <HEAD>：包含页面信息（如 ）。
  • <BODY>：包含网页可见内容（标题、段落、图片等）。

<BODY> 下的每个元素都是 DOM 的节点：

  • <H1> 是一级标题节点。
  • <P> 是段落节点。
  • 里面的文本（如 "Header" 或 "Paragraph"）是 文本节点。

CSS 不出现在 DOM 树中，它是作用在这些节点上的样式。

JS 通过操作 DOM 节点（比如 document.getElementById('welcome')）来动态修改网页内容。

6. Web服务器（Web Server）

一个基本的 HTTP 服务器是一种软件，它能够理解 URL（网页地址），并且通过 HTTP 响应将服务器上存储的对应文件发送给客户端（浏览器或其他请求者）。

也就是说，当我们在浏览器里输入网址时，浏览器向服务器发请求，服务器找到对应的网页文件，然后把它发送回浏览器显示。

6.1 常见 Web 服务器

常见的 Web 服务器类型有很多：

IIS：Windows 自带的服务器。

Apache：最流行的开源 Web 服务器之一。

Apache Tomcat：专门用来运行 Java Web 应用。

NGINX：轻量高效的 Web 服务器。

Gunicorn：Python 应用服务器。

Jetty：轻量 Java Web 服务器。

XAMPP：一键安装的 Apache 服务器套件，包含 MariaDB/MySQL、PHP 和 Perl，适合初学者练习。

每种服务器通常会针对特定语言或用途优化。

XAMPP 提供了低门槛的实验环境，适合初学者。

PHP 是 XAMPP 支持的一种脚本语言，它语法上与 Python 类似。

如果你已经安装了 XAMPP，可以直接使用。但是如果你本地已经有 MySQL 数据库，可能会与 XAMPP 自带的 MySQL 端口冲突，需要处理掉旧的 MySQL。

6.2 Web 服务器文件列表功能

Web 服务器（比如 Apache）可以显示服务器上存放的所有文件和文件夹，就像一个目录列表。

有时候我们不希望用户看到服务器上的所有内容，因为可能有一些隐藏信息（hidden info）不希望泄露，所以通常会关闭（disable）这个功能。

6.3 创建 Web 网站

如果我们想创建一个 Web 网站，那么我们需要为网站的每一个页面写一个 HTML 文件，然后部署到服务器上，用户通过浏览器访问服务器，看到网站页面。

6.4 静态网页和动态网页

像电商网站（Amazon）那样，每个产品都可能对应一个单独的 HTML 页面。

如果网站产品非常多，每次更新内容都要手动修改 HTML 页面，这非常麻烦。

动态网页通过在服务器端读取不同的数据，动态生成网页内容。

就像商品货架，货架是网页框架（HTML模板），商品是数据（产品信息）。

优点：

  1. 不用手动修改每个 HTML 页面。
  2. 用户访问时，服务器根据请求生成页面内容。
  3. 更适合产品种类多、数据频繁更新的电商网站。

6.5 PHP（Hypertext Preprocessor）

PHP 是一种流行的通用脚本语言，特别适合 Web 开发。它可以生成动态网页内容。

PHP 代码通常嵌入在 HTML 文件中。

PHP 代码用 <?php 开始，用 ?> 结束。

php 复制代码 
<?php
for ($i=1; $i<=5; $i++) {
    echo "The number is " . $i . "<br />";
}
?>

循环输出数字 1 到 5。

<br /> 用于换行。

浏览器看到的输出是：

复制代码 
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

当客户端（浏览器）请求一个 PHP 页面时，Web 服务器（例如 Apache）会解析 PHP 脚本。服务器执行 PHP 脚本，把结果输出成 HTML。浏览器只收到生成后的 HTML 内容，而不是 PHP 代码本身。

所以 PHP 可以在服务器端动态生成内容，然后发送给客户端。

PHP官网

6.6 数据库基础知识

数据库类似于 Web 服务器：

就像 Web 服务器存储网页内容，数据库也是一个软件，用来存储数据。

数据库是有组织的数据集合：

数据库里存储的是结构化的信息（比如表格形式的数据），通常以电子方式保存在计算机系统中。

数据库由 DBMS 控制：

数据库通常由数据库管理系统（DBMS）来管理。

DBMS 是一套软件，用来管理、操作、存储和保护数据库里的数据。

数据库系统的概念：

数据库系统 = 数据 + DBMS + 相关应用程序

我们常说的"某个数据库"，实际上往往指的是该数据库所使用的 DBMS 系统的名字，例如 MySQL。

总的来说，数据库是存数据的地方，DBMS 是管理数据的软件，而网站或应用程序通过 DBMS 来访问和操作数据。

6.7 软件框架（Software Framework）

在开发软件时，如果每次都从零开始写所有东西，会很慢，也很容易出错。框架就是提前帮我们写好很多常用功能，我们只需要专注写业务逻辑，节省时间。

"不要重新发明轮子"（Don't reinvent the wheel），框架里已经有很多常用组件（wheels），比如网页开发、图形界面、数据处理、机器学习等，你直接用就可以。

例如 Bootstrap，这是一个前端框架，可以快速设计和自定义响应式网站（能够在电脑、平板、手机上自适应显示）。

它是一个 开源工具包（open source toolkit），里面有 Sass 变量、混入（mixins）、响应式栅格系统、预制组件和强大的 JavaScript 插件。

Bootstrap 提供了许多 预定义的 CSS 类，包括样式（CSS）、字体（fonts）和 JavaScript 功能（早期版本使用 jQuery）。

使用 Bootstrap 可以让前端开发变得更加简单高效。

下一章回进行更多细节的介绍。
Bootstrap 官网

相关推荐
FPGA小迷弟2 小时前
FPGA面试题汇总整理（一）
学习·fpga开发·verilog·fpga
ProgramHan2 小时前
十大排行榜——前端语言及要介绍
前端
氢灵子2 小时前
Fixed 定位的失效问题
前端·javascript·css
攻城狮在此2 小时前
华为LACP链路聚合配置（三层聚合）
网络·华为
haibindev2 小时前
把近5万个源文件喂给AI之前，我先做了一件事
java·前端·c++·ai编程·代码审计·架构分析
AttaGain2 小时前
【Ubuntu配置VLAN网络】
linux·网络·ubuntu
labixiong3 小时前
React Hooks 闭包陷阱：高级场景与深度思考
前端·javascript·react.js
FatHonor3 小时前
【golang学习之旅】使用VScode安装配置Go开发环境
vscode·学习·golang
网安Ruler3 小时前
DoIP (基于 IP 的诊断通信协议)分析与理解
网络·tcp/ip·汽车
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05OpenClaw 使用和管理 MCP 完全指南06班级宠物园部署指南07UV安装并设置国内源08“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10OpenClaw Control UI安全上下文访问配置