Web学习 - 基础概念认知

本文最后更新于 2026年4月9日 下午

前言的前言

想学前端很久了，今天开一下坑，争取这周之内速通完HTML + CSS + JS/TS基础，然后下周学一下Vue。

参考资料：

前言

用户访问网站的时候，发生了什么？

  • 网页实质是文件
  • 通过浏览器访问网站，
    • 浏览器向服务器发送请求
    • 服务器再将网页文件发送给浏览器
    • 浏览器再将网页文件渲染成我们看到的网页。

在这里再区分一下三个易混淆的概念：

  • 网页 Web Pages
    • 一份能够显示在Web浏览器上的文档
    • 使用HTML语言编写
  • 网站 Website
    • 共享唯一域名的，由许多的网页组合在一起的集合
  • Web服务器
    • 一个在互联网上托管网站的计算机

Web页面 / Web技术概述

HTML

HTML (Hyper Text Markup Language，超文本标记语言) 是一种用于描述网页文档的语言。

HTML的一个核心要素/特征是标签，HTML定义了许多不同的标签。

  • 标签被尖括号<>包裹
  • 起始标签和结束标签通常成对出现
  • 结束标签是在起始标签的基础上，在<后面加一个/
  • 标签自身表示了内容的类型与格式
  • 标签包裹的是具体的内容

简单举例，下面的代码表示加粗的Hello

<b>Hello</b>

下面是一些常用的用来表征文本的 HTML 标签：

标签 描述
<h1> - <h6> 定义标题，从最高级别到最低级别
<p> 定义段落
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表项
<table> 定义表格
<tr> 定义表格的行
<td> 定义表格的单元格
<th> 定义表格的表头单元格
<strong> 定义加粗的文本
<em> 定义斜体的文本
<br> 插入换行符

上面的都是复制的，毕竟本文只是对大部分知识做一个入门。

所谓HTML中的"Hyper"，意味着HTML标签还可以表征文本以外的内容，下面给出另外一些常用的标签：

标签 描述
<html> 定义HTML文档的根元素
<head> 定义文档的头部区域
<body> 定义文档的主体区域
<img> 插入图像
<a> 创建链接
<div> 定义一个区块或容器
<span> 标记或包装文本片段
<header> 定义页眉部分
<style> 定义内部样式表

当然也是复制的

给出一个简单的HTML文档的示例：

<!DOCTYPE html>
<!--声明文档类型-->
<!--没错，这就是注释的写法-->
<html>
<head>
    <title>Tab 栏标题</title>
</head>
<body>
    <h1>大标题</h1>
    <p>一个段落包含一部分<b>加粗的文字</b></p>
    <img src="./figure.png">
    <!--一张图片-->
    <a href="https://net9.org/">链接</a>
    <!--一个超链接-->
</body>
</html>

CSS

我们可以通过CSS (Cascading Style Sheets，层叠样式表) 来为网页添加样式。

比如说，可以在起始标签内添加 style="..." 字段进行美化，或在文档头部添加 <style>...</style> 标签来定义样式，进行批量的格式调整。

代码HTML · 19 行
<!DOCTYPE html>
<!--声明文档类型-->
<html>
<head>
    <title>Tab 栏标题</title>
    <style>
        h1 {
            color: darkgray;
            font-weight: bold;
        }
    </style>
    <!--定义了 h1 标签的颜色和字体-->
</head>
<body>
    <h1>大标题</h1>
    <p style="color: deepskyblue">一个段落包含一部分<b>加粗的文字</b></p>
    <!--剩余部分同上-->
</body>
</html>

belike：

Tab 栏标题

大标题

一个段落包含一部分加粗的文字

同一网站的不同页面往往具有统一的格式，在每个 HTML 文件中进行重复的修改是一件比较麻烦的事，因此可以将这些样式抽离出来，成为CSS文件。

例如，下列的 CSS 代码选择了所有的段落文本，并将它们设置为红色：

h1 {
    color: red;
    font-size: 2em;
}

h1被称为选择器，{}里面包裹的是多个声明，每个声明由属性和值组成。一个CSS样式表通常包括许多这样的规则，依次书写。

CSS不止可以根据元素类型来控制样式，还支持更多的样式控制。

之所以叫做“层叠样式表”，是因为当有多个规则作用于同一个元素时，规则会按照一定顺序叠加，可以理解为不同的规则具有不同的优先级。比如，直接写在HTML标签里面的<style>，会覆盖外部引用的单独的CSS文件。

JavaScript

纯粹静态的网页过于无聊，我们可以使用JavaScript这种脚本语言来实现网页中的交互。

JavaScript 语言可以在网页中直接嵌入，也可以单独写成文件。

JS是一种脚本语言，无需编译，嵌入HTML之后就可以直接运行。

优势：可以方便地访问网络，操纵HTML中的元素。

浏览器开发者工具

按下F12可以阅读网页的HTML CSS JS源码，可以修改HTML和CSS，可以输入JS代码来进行调试。

Web通信

HTTP是什么？

HTML, CSS, JavaScript 统称为“前端三件套”。如果把这些文件比作包裹，那么为了实现通信，我们还需要一个“快递员”——HTTP 协议。

HTTP (Hyper Text Transfer Protocol) 协议是一种用于传输超文本的应用层协议，它是基于 TCP/IP 协议的。

我们发送请求时可能希望获得一些文件，也可能需要主动发送一些信息，如用户名、密码等。HTTP 协议定义了一些请求方法，这里不展开。

我们通过客户端发送的请求被服务器接收后，服务器会进行处理并返回一个响应，其中包括了：

  • 状态码
  • 响应头
  • 响应体, etc.

状态码就表示请求的状态，比如知名的404 Not Found。

HTTP相应中包含哪些文件？

  • HTML文件
  • CSS文件
  • JS文件
  • 媒体资源、其他类型文件

网页渲染过程

用户访问网页时，浏览器发出多个HTTP请求，然后接收HTTP相应中的多个文件。浏览器再处理这些文件，组合成一个可交互的网页，这个过程叫做渲染。

下面来分步理解渲染的过程。

处理HTML

浏览器收到HTML文件后将其解析为一棵DOM树 (文档对象模型)。

DOM在内存中以树状结构表示整个HTML文件的层次关系，举个例子：

<p>
    Let's use
    <span>HTML</span>
    <span>CSS</span>
    <span>JavaScript</span>
</p>

每个标签、属性、文本都会成为DOM树中的一个DOM节点：

P
├─ "Let's use:"
├─ SPAN
|  └─ "HTML"
├─ SPAN
|  └─ "CSS"
└─ SPAN
    └─ "JavaScript"

在解析HTML的过程中，如果遇到

  • <link>引用的外部CSS文件
  • <script>应用的外部JS文件
  • <img> <video>等其他外部资源

浏览器会发起额外的HTTP请求来获取外部资源。

解析CSS并渲染页面

浏览器依照此步骤处理CSS：

  1. 解析页面中所有CSS，包括HTML中<style>自带的以及外部引用的，并根据应用在的HTML元素，将CSS的样式规则放入不同的“桶”，并按需将样式附加到对应的不同的元素中，形成渲染树。
  2. 在应用规则后呈现渲染树应当展现的结构
  3. 将布局后的节点实际显示到屏幕上

处理JavaScript

处理完CSS之后，页面上任何的JS代码都会被解析、解释、编译、执行。

Web应用基础

静态网页

有些网站的内容是提前创建好、固定不变的，这些被称为静态网页，比如Hexo生成的个人博客网站。

对于静态网页，每一个地址对应固定的网页文件，服务端只需要把内容发送给客户端（请求方）即可。

然而，有些网页的内容不得不动态地变化，内容需要实时更新，或者我们希望根据用户的身份显示不同的内容，这时，就需要动态网页。

动态网页

动态的网页内容根据用户的请求动态生成。

传统的动态网页实现策略：

  1. 服务器收到请求，从数据库中读取数据
  2. 将数据填充进预先准备好的模板中，构成完整的HTML文件
  3. 将文件发送给客户端

然而，这种模式每次都需要发送完整的HTML文件，消耗大量的网络流量并降低传输效率。

现代的模式：将“动态”的数据和“静态”的模板分离开，让客户端完成将数据填入模板的过程，这也就是前后端分离开发模式。

前后端分离开发模式

  • 动态的部分：具体的数据

  • 静态的部分：网页的框架、呈现给用户的界面

  • 前端：用户界面

  • 后端：数据与业务逻辑

网页上的JS脚本向制定的后端服务器发起请求，JS脚本将获取到的信息填入网页，呈现出用户看到的内容。

前后端之间的通信也往往使用 HTTP 协议；内容的格式由开发者规定，称为 API (Application Programming Interface, 应用程序接口)。

Web最佳实践

因为不知道用户的操作平台，所以我们需要进行防御性设计。

Web始终要求存在向后兼容性。

Web设计存在跨浏览器兼容性。

响应式布局：一种使得功能和布局变得灵活的实践，使得网页可以自适应不同的浏览器。一个典型案例：在桌面上的宽屏浏览器中以一种方式进行布局、但在手机浏览器中以另一种更紧凑的单列布局的网站。